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

使用EJS模板引擎

好了,本文就先学到这里,下节我们继续学习EJS模板相关语法的使用。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 08.Egg.js教程-View中使用EJS模板引擎(1)

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们