Skip to content

Egg 中级

中级架构图

模板引擎

egg 能用的模板引擎有很多,在这里我用的是 egg-view-ejs

安装

bash
npm i egg-view-ejs -S

配置

js
// config/plugin.js
exports.ejs = {
  enable: true,
  package: "egg-view-ejs",
};
js
// config/config.default.js
exports.view = {
  mapping: {
    ".html": "ejs",
  },
};

使用

  • 路由
js
// 渲染页面
router.get("/render", controller.render.index);
  • 控制器

新建一个 controller/render.js 控制器

js
const { Controller } = require("egg");

class RenderController extends Controller {
  async index() {
    const { ctx, app } = this;
    await ctx.render("demo.html", {
      title: "测试页面",
      list: ["新闻1", "新闻2", "新闻3"],
    });
  }
}

module.exports = RenderController;
  • 视图

新建 app/view/demo.html 文件

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%=title%></title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  </head>
  <body>
    <ul>
       <% for(var i=0;i<list.length;i++){ %>
        <li>
        <%=list[i]%>
        </li>
        <%}%>
    </ul>

  </body>
  <script>

  </script>
</html>
  </script>
</html>

使用