Egg.js中引入egg-view-ejs模板引擎

github地址https://github.com/eggjs/egg-view-ejs
在github中有详细的介绍

安装

npm i egg-view-ejs --save

在{app_root}/config/plugin.js中配置，注释掉之前的

'use strict';

/** @type Egg.EggPlugin */
// module.exports = {
//   // had enabled by egg
//   // static: {
//   //   enable: true,
//   // }
// };

exports.ejs = {
  enable: true,
  package: 'egg-view-ejs',
};

在{app_root}/config/config.default.js中配置如下,需要把github提供的exports改成config

// 把默认的.ejs改成.html
  config.view = {
    mapping: {
      '.html': 'ejs',
    },
  };

在app目录下新建view文件夹，在view文件夹中新建index.html,内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index 页面</title>
</head>
<body>
    <h1>hello huangbaokang</h1> 
</body>
</html>

在首页控制器home.js中进行render渲染，需要有一个注意点，一定要加上await关键字，否则会报404错误

'use strict';

const Controller = require('egg').Controller;

class HomeController extends Controller {
  async index() {
    const { ctx } = this;
    // ctx.body = 'hi, egg';
    // 调用Service获取数据
    //const res = await ctx.service.student.index();
    //ctx.body = res;
    // 使用模板引擎
    await ctx.render("index.html");
  }
  
  // 新增方法
  async huangbaokang(){
    const { ctx } = this;
    ctx.body = "hello huangbaokang"; 
  }
}

module.exports = HomeController;

在这里插入图片描述
render第二个参数可以传递变量，我们把之前调用Service的返回值res进行传入，在页面上我们就可以进行模板语法渲染。

async index() {
    const { ctx } = this;
    // ctx.body = 'hi, egg';
    // 调用Service获取数据
    const res = await ctx.service.student.index();
    //ctx.body = res;
    // 使用模板引擎
    await ctx.render("index.html",{res});
  }

在这里插入图片描述

版本循环
模拟多一个数组

await ctx.render("index.html",{res,lists:["苹果","香蕉","西瓜"]});

 <ul>
        <% for(var i=0;i<lists.length;i++) {%>
        <li><%=lists[i]%></li>
        <% } %>
    </ul>

在这里插入图片描述

关于EJS的学习，可以到官网进行学习
https://ejs.bootcss.com/

黄宝康

发布了1184 篇原创文章 · 获赞 272 · 访问量 203万+

他的留言板关注

Egg.js中引入egg-view-ejs模板引擎

安装

猜你喜欢