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

上篇在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模板中显示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的写法也非常类似。

效果如下:

EJS模板中的循环显示

修改默认分隔符符号

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

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

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

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

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

总结

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

「点点赞赏,手留余香」

0

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

微信微信 支付宝支付宝

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

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

发表评论

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

立即查看 联系我们