1. 程式人生 > >egg渲染html模板

egg渲染html模板

後臺服務的模板引擎有很多,但我還是喜歡用.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>