egg渲染html模板

后台服务的模板引擎有很多，但我还是喜欢用.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" %}

更多推荐

egg渲染html模板