模板引擎是第三方模块。 让开发者以更加友好的方式拼接字符串,使项目代码更加清晰、更加易于维护。
标准语法: {{ 数据 }} 原始语法:<%=数据 %>
将某项数据输出在模板中,标准语法和原始语法如下:
如果数据中携带HTML标签,默认模板引擎不会解析标签,会将其转义后输出。
标准语法:{{@ 数据 }} 原始语法:<%-数据 %>
<!-- 标准语法 -->
<p>{{name}}</p>
<p> {{age}}</p>
<p>{{content}}</p>
<p>{{@ content}}</p>
<p>{{ 1 + 1}}</p>
<p>{{1 + 1 == 2? '相等':'不相等'}}</p>
<!-- 原始语法 -->
<p> <%= name %> </p>
<p><%= age %> </p>
<p><%= content %></p>
<p><%- content %></p>
<p><%= 1 + 3%></p>
<p><%= 1 + 1 == 2? '相等':'不相等' %></p>
运行结果:
<!-- 条件判断 -->
<!-- 标准语法 -->
{{if age > 18 }}
年龄大于18
{{else if age < 15 }}
年龄小于15
{{else}}
年龄条件不符合
{{/if}}
<!-- 原始语法 -->
<% if(age > 18 ) { %>
年龄大于18
<% } else if(age < 15) {%>
年龄小于15
<% } else { %>
年龄条件不符合
<% } %>
运行结果:
标准语法:{{each 数据}} {{/each}} 原始语法:<% for() { %> <% } %>
<ul>
{{each users}}
<li>
{{$value.uname}}
{{$value.age}}
{{$value.sex}}
</li>
{{/each}}
</ul>
<ul>
<% for(var i = 0;i< users.length;i++) {%>
<li>
<%= users[i].uname %>
<%= users[i].age %>
<%= users[i].sex %>
</li>
<% } %>
</ul>
运行结果:
使用子模板可以将网站公共区块(头部、底部)抽离到单独的文件中。
{{include './common/heard.html'}}
<% include('./common/heard.html') %>
<div>{{msg}}</div>
{{include './common/footer.html'}}
<% include('./common/footer.html') %>
运行结果:
使用模板继承可以将网站HTML骨架抽离到单独的文件中,其他页面模板可以继承骨架文件。
layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
{{block 'link'}} {{/block}}
</head>
<body>
{{block 'content'}} {{/block}}
</body>
</html>
05.html
{{extend './common/layout.html'}}
{{block 'content'}}
<p>{{msg}}</p>
{{/block}}
{{block 'link'}}
<link rel="stylesheet" href="./main.css">
{{/block}}
运行结果:
const template = require('art-template');
const path = require('path');
var dateFormat = require('dateformat');
// 设置模板根目录
template.defaults.root = path.join(__dirname, 'views');
// 导入模板变量
template.defaults.imports.dateFormat = dateFormat;
// 配置模板的默认后缀
template.defaults.extname = '.art';
const html = template('06.html', {
time: new Date()
});
console.log(template('07', {}));
console.log(html);
目标:模板引擎应用,强化node.js项目制作流程。
知识点:http请求响应、数据库、模板引擎、静态资源访问。
/* app.js*/
// 引入http模块
const http = require('http');
// 创建服务器
const app = http.createServer();
// 给服务器添加事件
app.on('request', (req, res) => {
res.end('ok');
});
// 注册监听事件
app.listen(80);
console.log('服务器启动成功');
/* connect.js*/
// 引入数据库模块
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/playground', {
useNewUrlParser: true,
useUnifiedTopology: true
})
.then(() => console.log('数据库连接成功'))
.catch(() => console.log('数据库连接失败'));
学员信息表
/* users.js*/
const mongose = require('mongoose');
// 创建学生集合规则
const studentsSchema = new mongoose.schema({
name: {
type: String,
required: true,
minlength: 2,
maxlength: 10
},
age: {
type: Number,
min: 10,
max: 25
},
sex: {
type: String
},
email: String,
hobbies: [String],
college: String,
enterDate: {
type: Date,
default: Date.now
}
})
// 创建学生信息集合
const student = mongose.model('student', studentsSchema);
// 导出学生信息集合
module.exports = student;
// 引入router模块
const getRouter = require('router');
// 获取路由对象
const router = getRouter();
// 呈递学生档案信息页面
router.get('/add', (req, res) => {
res.end('test');
})
// 呈递学生档案信息列表页面
router.get('/list', (req, res) => {
res.end('index');
})
// 呈递学生档案信息列表页面
router.get('/list', (req, res) => {
let html = template('list.html', {})
res.end(html);
})
// 给服务器添加事件
app.on('request', (req, res) => {
router(req, res, () => {})
});
下载模板引擎
在students下创建views文件存放模板文件(html文件),同时创建public存放css文件
// 引入静态资源访问模块
const serveStatic = require('serve-static');
// 实现静态资源访问服务
const serve = serveStatic(path.join(__dirname, 'public'));
// 给服务器添加事件
app.on('request', (req, res) => {
//启用路由功能
router(req, res, () => {});
// 启用静态资源访问服务功能
serve(req, res, () => {});
});
下载第三方模块serve-static
功能:实现路由 使用步骤: 1.获取路由对象 2.调用路由对象提供的方法创建路由 3.启用路由,使路由生效
/* app.js*/
// 引入router模块
const getRouter = require('router');
// 获取路由对象
const router = getRouter();
router.get('/test', (req, res) => {
res.end('test');
})
router.get('/index', (req, res) => {
res.end('index');
})
// 给服务器添加事件
app.on('request', (req, res) => {
//启用路由功能
router(req, res, () => {
console.log(11);
})
});
功能:实现静态资源访问服务 步骤: 1.引入serve-static模块获取创建静态资源服务功能的方法 2.调用方法创建静态资源服务并指定静态资源服务目录 3.启用静态资源服务功能
// 引入静态资源访问模块
const serveStatic = require('serve-static');
// 实现静态资源访问服务
const serve = serveStatic(path.join(__dirname, 'public'));
// 给服务器添加事件
app.on('request', (req, res) => {
//启用路由功能
router(req, res, () => {});
// 启用静态资源访问服务功能
serve(req, res, () => {});
});
案例最终结果: