egg渲染html模板
阿新 • • 發佈:2018-11-11
後臺服務的模板引擎有很多,但我還是喜歡用.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>