太原网站制作_太原网站建设_太原做网站_秘密武器开发者中心
历史搜索

09.Egg.js教程

游客2024-12-01 07:53:01
目录文章目录
  1. EJS 模板中显示 controller 返回的数据
  2. EJS 模板中的循环显示
  3. 修改默认分隔符符号
  4. 总结

上篇在 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传递过来的变量了。

效果如下:

09.Egg.js教程 1

修改默认分隔符符号

其实很多前端小伙伴是不喜欢用这种<%%>的形式展示数据的,这很不前端。EJS 也为我们提供了配置型方法,你可以根据你的喜好配置这个配置符。

打开/config/config.default.js文件,然后修改config.ejs选项:

config.ejs={
     delimiter: "$"
},

然后再回到mybj.html文件,用全部地替换的方法,把%换车$,这样就更换成功了。建议这个还是在项目初级就规范好,不要随意改动。

EJS 还提供了单独修改某个修饰符,但这里不建议这样修改,会让项目变的混乱不堪,也就是render的第三个参数。

总结

本文我们主要学习了 EJS 模板引擎的基本使用方法,还学习了配置 EJS 的配置分隔符的方法。其实 EJS 是完全可定制的,有很多地方都可以根据需要自行修改。但是个人不建议作太多的个性化配置,这会给团队和项目带来混乱和跟多的学习成本。

标签:egg.js

本文是由用户"游客"发布,所有内容的版权归原作者所有。没有经过书面许可,任何单位或个人不得以任何形式复制、转载、引用本网站的内容。否则将追究法律责任。

相关专题