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/