egg渲染html模板
后台服务的模板引擎有很多,但我还是喜欢用.html格式的模板1、安装模板插件egg-view-ejs,虽然是ejs模板插件,但是后面会设置成html模板npm i egg-view-nunjucks -S2、在config/plugin.js里声明该插件exports.nunjucks = {enable: true,package: 'egg-view-nunju...
·
后台服务的模板引擎有很多,但我还是喜欢用.html格式的模板
1、安装模板插件egg-view-ejs,虽然是ejs模板插件,但是后面会设置成html模板
npm i egg-view-nunjucks -S
2、在config/plugin.js里声明该插件
exports.nunjucks = {
enable: true,
package: 'egg-view-nunjucks'
};
3、在config/config.default.js里面配置(重点)
exports.view = {
defaultViewEngine: 'nunjucks',
mapping: {
'.html': 'nunjucks' //左边写成.html后缀,会自动渲染.html文件
},
};
4、在路由配置中router.js,配置前端页面
router.get('/', controller.home.index);
5、在controller控制器配置
'use strict';
const Controller = require('egg').Controller;
class HomeController extends Controller {
async index() {
let title = "我是首页"; //向模板传入数据
await this.ctx.render('index',{
title: title
});
}
}
module.exports = HomeController;
6、在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>
<link rel="stylesheet" href="/public/css/style.css">
</head>
<body>
<!-- 使用模板数据 -->
<h1>{{ title }}</h1>
<!-- 使用模板数据 -->
<h2>欢迎来到egg</h2>
</body>
</html>
7、常用模板语法
1、普通数据
{{ title }}
2、for循环
{% for item in list %}
{{ item.id }}
{% endfor %}
3、if语句,多条件使用:and, or, not
{% if i < 0 %}
条件内容
{% elif i >=0 and i < 100 %}
条件内容
{% else %}
条件内容
{% endif %}
4、三目运算
{{ "是" if isVip == 1 else "否" }}
5、引入其他模板
{% include "../header.html" %}
更多推荐
已为社区贡献1条内容
所有评论(0)