码云 Egg.js教程 2021-12-22

08.Egg.js教程-View中使用EJS模板引擎(1)

文章目录隐藏

服务端渲染页面的好处
EJS 模板引擎的介绍
EJS 在 Egg 中的安装和配置
使用 EJS 模板引擎

Egg.js 专注后端开发，但是也提供了 View 层的渲染，个人觉的这是有必要的，因为就算是这个时代，也并不是所有的开发都是前后端分离的。还是有很多应用需要服务端渲染的，比如博客就需要服务端渲染。

本文我们就学习一下 Egg.js 中的 View 层，并使用 Ejs 模板引擎来操作，当然 Egg 还支持其他模板引擎。

服务端渲染页面的好处

先来说说理论，大家如果烦可以跳过去。

还是先来说一下服务端渲染页面的三个优点。我怕有很多小伙伴认为服务端渲染页面是一个落后的技术，现在都讲究前后端分离和 SPA 应用。当然无论是 Vue 还是 React 都有很好的服务端渲染插件。所以理论上你不用学习 Egg 的引擎，而还是使用前后端分离模式就可以进行开发。

对 SEO 非常友好，单页应用，比如 Vue 是到客户端才生成的。这种应用对于国内的搜索引擎是没办法爬取的，这样 SEO 就不会有好的结果。所以如果是官网、新闻网站、博客这些展示类、宣传类的网址，必须要使用服务端渲染技术。
后端渲染是老牌开发模式，渲染性能也是得到一致认可的。在 PHP 时代，这种后端渲染的技术达到了顶峰。
对前后端分离开发模式的补充，并不是所有的功能都可以实现前后端分离的。特别现在流行的中台系统，有很多一次登录，处处可用的原则。这时候就需要服务端渲染来帮忙。

EJS 模板引擎的介绍

EJS 属于老牌的模板引擎，记得我在使用 ThinkPHP 的使用，用的就是 EJS 模板引擎。EJS 模板引擎一直在维护，所以稳定性和生态上都比较好。所以最终选择用 EJS 给小伙伴讲解 Egg 中的 View 层。

如果你对 EJS 还不熟悉，可以先浏览一下 EJS 的官方网站和文档。

EJS 官方网站（英文）：链接，中文网站：链接

EJS 在 Egg 中的安装和配置

Egg.js 提供了 EJS 的插件egg-view-ejs，直接用 yarn 或者 npm 安装。

npm 的安装方法：

npm i egg-view-ejs --save

yarn 的安装方法：

yarn add egg-view-ejs

安装完成后，并不能直接使用，需要再进行一些简单的配置。

配置/config/plugin.js文件：

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

plugin.js 文件配置完成后，再到/config /config.default.js文件里进行配置。

config.view = {
    mapping: {
      '.html': 'ejs',
    },
};

config.ejs = {

}

这两部配置完成后，就可以在 Controller 里使用 EJS 模板引擎了。

使用 EJS 模板引擎

当配置项都完成后，就可以使用模板 EJS 模板引擎了。打开/config/controller/mybj.js文件。修改index()，因为render()方法返回的是Promise的对象，所以要使用关键字await。

async index() {
  const { ctx } = this;
  await ctx.render('mybj.html')
}

这时候我们还没有mybj.html这个页面，所以需要马上建立一个。Egg.js规定view的引擎模板，必须写在/app/view/文件夹下面（如果没有 view 文件夹，可以自己建立）。在文件夹下面新建一个文件mybj.html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>I am Mybj!</h1>
</body>
</html>

在终端里输入npm run dev开启服务，在浏览器中输入http://127.0.0.1:7001/my，可以看到输出了我们想要的结果。