1、安装插件 egg-view-ejs
npm install egg-view-ejs -save
2、配置插件信息
2.1 config/plugin.js
声明需要用到的插件
module.exports = { ejs: { enable: true, package: 'egg-view-ejs' } };
2.2 config/config.default.js
配置 ejs：将 view 文件夹下的 .html 后缀的文件，识别为 .ejs。
config.view = { mapping: {'.html': 'ejs'} // 左边写成.html后缀，会自动渲染.html文件 };
3、创建 view 文件夹
在 app 目录下创建 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><%-title%></title> </head> <body> <!-- 使用 egg-view-ejs --> <h1><%-title%></h1> </body> </html>
4、修改控制层
Egg 约定: ctx.render 默认会去 view 文件夹寻找 index.html。
'use strict'; const Controller = require('egg').Controller; class HomeController extends Controller { async index() { const { ctx } = this; await ctx.render('index.html', { title: 'kaimo 玩 egg', }); } async user() { const { ctx } = this; const userData = await ctx.service.home.user(); ctx.body = userData; } async add() { const { ctx } = this; const body = ctx.request.body; ctx.body = body; } } module.exports = HomeController;
5、效果
我们访问 http://127.0.0.1:7001/， 效果如下：
6、拓展
更多参考：【View 模板渲染】，官方文档用的是 egg-view-nunjucks 插件，具体的可以自己去看一下。
