EJS官网

Eggjs 也提供了插件

为什么我们还需要学习后端模板引擎

  • 后端渲染由来已久，渲染性能得到业界认可
  • 利于 SEO 优化，对纯展示类网站体验较好
    • react、vue 都是对展示内容进行动态渲染，浏览器就很难直接拿到页面中的内容
  • 对前后端分离开发模式的补充（单点登录的登录页面）

简单入门

安装
yarn add egg-view-ejs

配置

plugin.js

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

再到 config.default.js 中对视图以及ejs 进行配置

  1.   config.view = {
  2.     mapping: {
  3.       '.html': 'ejs',// 意思是 遇到html 文件就使用 ejs模板引擎进行渲染
  4.     },
  5.   };
  7.   config.ejs = {};
  8. //后面慢慢说

ctx.render

ctx.render()对页面进行渲染，接收三个参数：

  • name： 需要渲染的 文件名称
  • locals： 页面的一些属性
  • options： 当前视图的一些配置

并且其返回的是 Promise所以还需要用await对其进行修饰
user.js

  1.   async index() {
  2.     const { ctx } = this;
  3.     // ctx.body = 'hi, user index';
  4.    await ctx.render('user.html', { id: 100, name: 'admin' });
  5.   }

其中 html 默认放在 app/view 中，也进行配置

  1. const path = require('path') //nodejs 内置的模块：用于解析文件路径
  3. config.view = {
  4.   root:path.join(appInfo.baseDir, "app/html")
  5. }

这样默认文件夹就改为 app下的html 文件夹了。如果想要多个文件夹，将 root 设置为数组形式即可

  1. root: [...,...].join(",")

参数

ejs 中接收参数的方式：
user.html

  1. id:<%= id %>
  2. <br />
  3. name:<%= name %>

这样渲染数组

  1. <ul>
  2.   <% for(var i = 0; i < lists.length; i++){ %>
  3.     <li>
  4.       <%= lists[i]  %>
  5.     </li>
  6.   <% }  %>
  7. </ul>

注释

  1.   <%# 注释 %>

如果不喜欢用%，也可以去 config.default.js 对ejs进行全局配置

  2.   config.ejs = {
  3.     delimiter: '$',
  4.   };

也可以单独配置

  1. await ctx.render(
  2.       'user.html',
  3.       {
  4.         id: 100,
  5.         name: 'admin',
  6.         lists: ['java', 'php'],
  7.       },
  8.       {
  9.         delimiter: '$',
  10.       }
  11.     );

公共头部&尾部

创建一个 user-header.html，然后再在 user.html 中引入

  1. <% include user-header.html %>

静态资源的使用与配置

静态资源默认存放在 public 中
也可以对其进行配置
config.default.js

  1. config.static = {
  2.   prefix: "/public/", //url的前缀
  3.   dir:path.join(appInfo.baseDir, "app/public") //文件路径
  4. };

这样引用
user.html

  1. <link rel="stylesheet" type="text/css" href="public/css/user.css" />
  2. <script src="public/js/user.js"> </script>