egg渲染html模板

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bocongbo/article/details/83088147

后台服务的模板引擎有很多,但我还是喜欢用.html格式的模板

1、安装模板插件egg-view-ejs,虽然是ejs模板插件,但是后面会设置成html模板

npm i egg-view-ejs -S

2、在config/plugin.js里声明该插件

exports.ejs = {
    enable: true,
    package: 'egg-view-ejs',
};

3、在config/config.default.js里面配置(重点)

config.view = {
    mapping: {'.html': 'ejs'} //左边写成.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>

猜你喜欢

转载自blog.csdn.net/bocongbo/article/details/83088147
egg