egg教程系列：模版使用

官方提到的模板引擎是nunjucks，这里我们使用ejs，其实都一样的，对于偏前端的我们一般都是通过前后端分离的形式实现，如果实在需要服务器渲染再考虑这个

安装ejs

cnpm isntall egg-view-ejs

修改配置

//config/plugin.js
exports.ejs = {
  enable :true,
  package:"egg-view-ejs"
}
//config/config/default.js
config.view = {
    defaultViewEngine: 'ejs',
    mapping: {
      '.html': 'ejs',
    },
};
config.ejs={
    delimiter: "$"//这一行是修改模板中%为$，看个人习惯
  }

使用模版

• 添加路由 getEjsList
• 添加controller方法 getEjsList

//controller/home.js
async getEjsList(){
    const ctx=this.ctx
    const hobbyList=['唱歌','跳舞','打游戏']
    const infoData={name:'张三',age:18}
    await ctx.render('home/getEjsList.html',{hobbyList,infoData})
}

创建模版文件 app下创建 view文件夹 view下创建home文件下 home下创建getEjsList.html文件

//下边介绍了两种常用的的写法，具体的使用教程请去ejs官网
//可以用 include引入 公共文件 注意它的语法
<$- include("../header.html") $>
姓名：<$= infoData.name$>,年龄：<$= infoData.age$>岁
    <p>我的技能：</p>
    <$ hobbyList.forEach(item=>{ $>
        <p><$= item$></p>
    <$ }) $>

关于静态资源的引入 egg默认直接暴漏app/public下的所有文件，可以直接引入

<link rel="stylesheet" type="text/css" href="public/css/base.css" />