Egg.js 项目中怎么使用前端模板

原创

凯小默的博客 2022-08-17 17:27:51 博主文章分类：Node / Node 框架 ©著作权

©著作权归作者所有：来自51CTO博客作者凯小默的博客的原创作品，请联系作者获取转载授权，否则将追究法律责任

1、安装插件 egg-view-ejs

npm installegg-view-ejs -save

2、配置插件信息

2.1 config/plugin.js

声明需要用到的插件

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

2.2 config/config.default.js

配置 ejs：将 view 文件夹下的 .html 后缀的文件，识别为 .ejs。

.view = {
   mapping: {'.html': 'ejs'}  // 左边写成.html后缀，会自动渲染.html文件
 };

3、创建 view 文件夹

在 app 目录下创建 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>
</head>
<body>
    <!-- 使用 egg-view-ejs -->
    <h1><%-title%></h1> 
</body>
</html>

4、修改控制层

Egg 约定: ctx.render 默认会去 view 文件夹寻找 index.html。

'use strict';

const Controller = require('egg').Controller;

class HomeController extends Controller {
  async index() {
    const { ctx } = this;
    await ctx.render('index.html', {
      title: 'kaimo 玩 egg',
    });
  }
  async user() {
    const { ctx } = this;
    const userData = await ctx.service.home.user();
    ctx.body = userData;
  }
  async add() {
    const { ctx } = this;
    const body = ctx.request.body;
    ctx.body = body;
  }
}

module.exports = HomeController;