上篇在 Egg 中已经配置好了 EJS 模板,本文学习一下 EJS 模板引擎的基本使用语法。如果你有 PHP 开发经验,这些语法就非常简单了,因为跟 PHP 的模板语法基本一样。
EJS 模板中显示 controller 返回的数据
在 Controller 中我们有一些动态的数据,需要在 EJS 模板中进行显示。这时候可以使用render()
第二个参数,第二个参数可以传递 JavaScript 中的对象,也就是说你可以任意的传递各种形式的参数过去。
我们先到/app/controller/mybj.js
文件下面。在index()
方法里,使用第二个render()
的参数,来传递参数。
async index() { const { ctx } = this; await ctx.render( 'mybj.html',{ id:2021, name:'小红', age: 18, skill:'泰式按摩' }) }
有了这些数据后,就可以在/controller/view/jspang.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>欢迎来到红浪漫~~</h1> <h2>现在由<%= id %>号技师,为您服务!</h2> <h3>您好,我是<%= name %>,今年<%= age %>岁,专业技能是<%= skill %></h3> </body> </html>
通过这种方式,在 EJS 模板中就可以使用controller
传递过来的变量了。
效果如下:
修改默认分隔符符号
其实很多前端小伙伴是不喜欢用这种<%%>
的形式展示数据的,这很不前端。EJS 也为我们提供了配置型方法,你可以根据你的喜好配置这个配置符。
打开/config/config.default.js
文件,然后修改config.ejs
选项:
config.ejs={ delimiter: "$" },
然后再回到mybj.html
文件,用全部地替换的方法,把%
换车$
,这样就更换成功了。建议这个还是在项目初级就规范好,不要随意改动。
EJS 还提供了单独修改某个修饰符,但这里不建议这样修改,会让项目变的混乱不堪,也就是render
的第三个参数。
总结
本文我们主要学习了 EJS 模板引擎的基本使用方法,还学习了配置 EJS 的配置分隔符的方法。其实 EJS 是完全可定制的,有很多地方都可以根据需要自行修改。但是个人不建议作太多的个性化配置,这会给团队和项目带来混乱和跟多的学习成本。