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

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

文章目录隐藏

EJS 模板中显示 controller 返回的数据
EJS 模板中的循环显示
修改默认分隔符符号
总结

上篇在 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 模板中的循环显示

技师小姐姐不可能只会一项技能，比如我们小红，可能就会三项技能泰式按摩、精油搓背、水疗 SPA，那这时候我希望他是循环展示出来的。也就是说cotroller传递过来的数据是一个数组，如何利用列表来展示。

先来修改\app\controller\mybj.js文件中的index()方法。

async index() {
  const { ctx } = this;
  await ctx.render(
    'mybj.html',{
      id:2021,
      name:'小红',
      age: 18,
      skills:[
        '泰式按摩',
        '精油搓背',
        '水疗 SPA'
      ]
    })
}

这时候已经传递了一个数组到模板中，重点是如何再模板中用列表的形式进行展示。

<!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 %>岁</h3>
    <br/>
     我的技能如下：
     <ul>
         <% for(var i=0;i<skills.length;i++){ %>
         <li><%= skills[i] %></li>
         <%}%>
     </ul>
</body>
</html>

这里使用了for循环进行展示，这种写法跟 php 的写法也非常类似。

效果如下：