egg-view-ejs 是 Egg 中比较常用的模板引擎,虽然性能不是很高,但是它的语法规则却是极其的简单,使用起来很方便,下面简单介绍一下它的用法。
1. 安装模板引擎
npm i egg-view-ejs --save
2. 在 config 文件夹下找到 plugin.js 文件,导出ejs
'use strict';
// 导出 ejs
exports.ejs = {
enable: true,
package: 'egg-view-ejs',
};
3. 在config 文件夹下找到 config.default.js,配置ejs
'use strict';
module.exports = appInfo => {
const config = exports = {};
// use for cookie sign key, should change to your own and keep security
config.keys = appInfo.name + '_1532511512428_3477';
// add your config here
config.middleware = [];
// 新增以下配置
// 配置模板引擎
config.view = {
mapping: {
// 模板文件以html结尾
'.html': 'ejs',
},
};
return config;
};
完成以上3步操作,就可以正式的使用模板引擎了,下面演示一个使用模板引擎的示例。
首先在app文件夹下的router.js中配置路由。
'use strict';
module.exports = app => {
const { router, controller } = app;
// 配置路由,指向controller文件夹下news.js文件里的index方法
router.get('/news', controller.news.index);
};
然后在 controller 文件夹中新建路由所对应的控制器文件 new.js,并在文件里添加路由所对应的控制器方法 index。
'use strict';
const Controller = require('egg').Controller;
class NewsController extends Controller {
async index() {
// 注意render是一个异步方法,要用await
// title与list为模拟数据,项目中一般通过service查询数据库获取
await this.ctx.render('news',{
title:'新闻页面',
list:['新闻一','新闻二','新闻三'],
})
}
}
module.exports = NewsController;
最后在view文件夹中新建模板文件news.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">
<!-- 使用静态资源 -->
<link rel="stylesheet" href="/public/css/basic.css">
</head>
<body>
<h2><%=title%></h2>
<ul>
<% for(var i=0;i<list.length;i++){ %>
<li><%=list[i]%></li>
<%}%>
</ul>
<!-- 使用静态资源 -->
<img src="/public/images/1.jpg" alt="">
</body>
</html>
完成以上这些操作,就可以通过本地的服务器地址 http://127.0.0.1:7001/news 看到效果了。
注意,静态资源必须存放在public文件夹下,实际引用时,如果担心层级过多,可以用"/public" 开头的绝对路径来访问静态资源。
片段视图
这里为了演示还使用了include用来包含另一个ejs。
通过 include 指令将相对于模板路径中的模板片段包含进来。(需要提供 'filename' 参数。) 例如,如果存在 "./views/users.ejs" 和 "./views/user/show.ejs" 两个模板文件,你可以通过 <%- include('user/show'); %> 代码包含后者。
你可能需要能够输出原始内容的标签 (<%-) 用于 include 指令,避免对输出的 HTML 代码做转义处理
<head>
<%- include('template/header.html',{item: item}); %>
</head>
<%-代表输出非转义的数据到模板,其它标签含义还有