美文网首页
【翻译】Node.js 教程 —— express 模板引擎 第

【翻译】Node.js 教程 —— express 模板引擎 第

作者: kyuan | 来源:发表于2019-02-06 22:30 被阅读9次

这节将会是模板引擎的第二部分,由于重感冒的原因,各位请见谅我的声音变化(译者觉得还挺 sexy,aha),目前正在恢复中,但课程还是需要继续。

上节课我们创建了一个 profile 的模板视图并嵌入数据到视图当中。
这节课将介绍一些在视图上能使用的高级技巧,不仅仅只是在视图上输出数据,还可以使用 Javascript 代码进行流程控制等。

这节课我们将传递更多数据到视图里,并循环里面的数据然后输出:

  • 首先我们传递数组到视图模板中
'app.js'
var express = require('express');
var app = express();

app.get('/profile/:name', function(req, resp){
    var data = {
        hobbie: ['eating', 'fighting', 'fishing',] // 数组数据
    }
    resp.render('profile.ejs', {
        data: data
    });
});
  • ejs 里使用流程控制语句遍历数组并输出,跟 ejs 里输出的语法很相像 <% %> 就是不需要 =
    • <% data.hobbie.forEach(function(item)){%> 这是循环的语法
    • 下一行起放 HTML 标签,并输出模板引擎传递过来的参数
    • 最后结束循环语法 <% });%>
‘profile.ejs’
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index</title>
</head>
<body>
    <ul>
        <% data.hobbie.forEach(function(item)){%>
        <li><%= item %></li>
        <% });%>
    </ul>
</body>
</html>

相关文章

网友评论

      本文标题:【翻译】Node.js 教程 —— express 模板引擎 第

      本文链接:https://www.haomeiwen.com/subject/slsisqtx.html