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

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

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，可以看到输出了我们想要的结果。