腊月的季节

模板引擎

发表于 | 分类于 ， | | 阅读次数

ejs模板引擎

安装
npm i ejs –save
修改index.js如下:
index.js

1
2
3
4
5
6
7
8
9
10
var path = require('path');
var express = require('express');
var app = express();
var indexRouter = require('./routes/index');
var userRouter = require('./routes/users');
app.set('views',path.join(__dirname,'views'))//设置放模板文件的位置
app.set('views engine','ejs');//设置模板引擎为ejs
app.use('/',indexRouter);
app.use('/users',userRouter);
app.listen(3000);

通过app.set设置模板引擎为ejs和存放模板的目录。在myblog下新建views文件夹，在views下新建users.ejs。
views/users.ejs

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body{padding:50px;font:14px "Lucids Grande", Helvetics,Arial,sans-serif;}
        </style>
    </head>
    <body>
        <h1><%= name.toUpperCase() %></h1>
        <p>hello ,<%= name %></p>
    </body>
</html>

routes/user.js

1
2
3
4
5
var express = require('express');
var router = express.Router();
router.get('/:name',function(req,res){
    res.render('users',{name:req.params.name});
});

通过调用res.render函数渲染ejs模板，res.render第一个参数是模板的名字，这里则会匹配views/users.ejs,第二个参数是传给模板的数据，这里传入name，则在ejs模板可使用name。res.render的作用就是将模板和数据结合生成html，同时设置响应头中的Content-Type:text/html,告诉浏览器我返回的是html，不是纯文本，要按html展示。现在我们访问localhost:3000/users/haha。
ejs常用标签：

  • <% code %>:运行JavaScript代码，不输出
  • <%= code %>:显示转义后的HTML内容
  • <%- code %>:显示原始HTML内容
    下面的例子解释<% code %>的用法:
    Data
    supplies:{‘mop’,’broom’,’duster’}
    Template
    1
    2
    3
    4
    5
    <ul>
        <% for(var i=0;i<supplies.length;i++){%>
            <li><%= supplies[i] %></li>
        <% } %>
    </ul>

Result

1
2
3
4
5
<ul>
    <li>mop</li>
    <li>broom</li>
    <li>duster</li>
</ul>

includes

我们使用模板引擎通常不是一个页面对应一个模板，这样就失去了模板的优势，而是把模板拆成可复用的模板片段组合使用，如在views下新建header.ejs和footerejs，并修改users.ejs
views/header.ejs

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body{padding:50px;font: 14px "Lucids Grande",Helvetica,Arical,sans-serif;}
        </style>
    </head>
    <body>

views/footer.ejs

1
2
    </body>
</html>

views/users.ejs

1
2
3
4
<% - include('header') %>
    <h1><%= name.toUpperCase() %></h1>
    <p> hello ,<%= name %></p>
<% - include('footer') &>

拆分的好处是
1.模板可复用，减少重复代码
2.主模板结构清晰

热评文章