模板引擎
art-template模板引擎是第三方模块
让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护
var ary = [{name: '张三', age: '20'}];
// 未使用模板引擎
var str = '<ul>';
for(var i =0;i < ary.length;i++){
str += `<li>\
<span>'+ ary[i].name +'</span>\
<span>'+ ary[i].age+'</span>\
</li>`;
}
str += '</ul>';
// 使用模板引擎
<ul>
{{each ary}}
<li>{{$value.name}}</li>
<li>{{$value.age}}</li>
{{/each}}
</ul>
art-template模板引擎
- 在命令行工具中使用
npm install art-template命令进行下载 - 使用
const template = require('art-template')引入模板引擎 - 告诉模板引擎要拼接的数据和模板在哪
const html = template('模板引擎', 数据); - 使用模板语法告诉模板引擎，模板与数据应该如何进行拼接
// 导入模板引擎模块
const template = require('art-template');
//将特定模块与特定数据进行拼接
const html = template('./views/index.art', {
data: {
name: '张三',
age: 20
}
})
//index.art
<body>
{{ name }}
{{ age }}
</body>
模板语法
- art-template同时支持两种模板语法：标准语法和原始语法
- 标准语法可以让模板更容易读写，原始语法具有强大的逻辑处理能力
标准语法： {{数据}}
原始语法：<%=数据 %>
// 标准语法
<h2>{{value}}</h2>
<h2>{{a ? b : c}}</h2>
<h2>{{a + b}}</h2>
// 原始语法
<h2><%= value %></h2>
<h2><%= a ? b : c %></h2>
<h2><%= a + b %></h2>
如果数据中携带HTML标签，默认模板引擎不会解析标签，会将其转义后输出
标准语法：{{@ 数据 }}
原始语法：<%-数据 %>
// 标准语法
<h2>{{@ value }}</h2>
// 原始语法
<h2><%- value %></h2>
条件判断
// 标准语法
{{if 条件}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
// 原始语法
<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
// 标准语法
{{if age > 18}}
年龄大于18
{{else if age < 15 }}
年龄小于15
{{else}}
年龄不符合要求
{{/if}}
// 原始语法
<% if (age > 18) { %>
年龄大于18
<% } else if (age < 15) { %>
年龄小于15
<% } else { %>
年龄不符合要求
<% } %>
循环
标准语法：{{each 数据}} {{/each}}
原始语法：<% for() { %> <% } %>
// 标准语法
{{each target}}
{{$index}} {{$value}}
{{/each}}
// 原始语法
<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>
// 标准语法
<ul>
{{each users}}
<li>
{{$value.name}}
{{$value.age}}
{{$value.sex}}
</li>
{{/each}}
</ul>
// 原始语法
<ul>
<% for (var i = 0; i < users.length; i++) { %>
<li>
<%=users[i].name %>
<%=users[i].age %>
<%=users[i].sex %>
</li>
<% } %>
</ul>
子模版
使用子模板可以将网站公共区块(头部、底部)抽离到单独的文件中
标准语法：{{include ‘模板’}}
原始语法：<%include(‘模板’) %>
// 标准语法
{{include './header.art'}}
// 原始语法
<% include('./header.art') %>
<% include('./common/header.art') %>
<div> {{ msg }} </div>
{{ include './common/footer.art' }}
模板继承
使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承骨架文件
// layout.art
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML骨架模板</title>
{{block 'link'}} {{/block}}
</head>
<body>
{{block 'content'}} {{/block}}
</body>
</html>
// index.art
{{extend './common/layout.art'}}
{{block 'link'}}
<link rel="stylesheet" type="text/css" href="./main.css">
{{/block}}
{{block 'content'}}
<p>{{ msg }}</p>
{{/block}}
模板配置
- 向模板中导入变量 template.defaults.imports.变量名= 变量值;
- 设置模板根目录 template.defaults.root = 模板目录
- 设置模板默认后缀 template.defaults.extname = ‘.art’
npm install dateformat
var dateFormat = require('dateformat');
const template = require('art-template');
const path = require('path');
const dateFormat = require('dateformat');
// 设置模板的根目录
template.defaults.root = path.join(__dirname, 'views');
// 导入模板变量
template.defaults.imports.dateFormat = dateFormat;
// 配置模板的默认后缀
template.defaults.extname = '.html';
const html = template('06.art', {
time: new Date()
});
console.log(template('07', {}));
console.log(html);
// 06.art
{{ dateFormat(time, 'yyyy-mm-dd')}} //2020-05-30
// 07.html
我是07.html模板
学生档案管理-案例
目标：模板引擎应用，强化node.js项目制作流程
知识点：http请求响应、数据库、模板引擎、静态资源访问
制作流程：
- 建立项目文件夹并生成项目描述文件
- 创建网站服务器实现客户端和服务器端通信
- 连接数据库并根据需求设计学员信息表
- 创建路由并实现页面模板呈递
- 实现静态资源访问
- 实现学生信息添加功能
- 实现学生信息展示功能
- 1-建立项目文件夹并生成项目描述文件
npm init -y
- 2-创建网站服务器实现客户端和服务器端通信
// 引入http模块
const http = require('http');
// 创建网站服务器
const app = http.createServer();
// 当客户端访问服务器端的时候
app.on('request', (req, res) => {
res.end('ok');
})
app.listen(80);
console.log('服务器启动成功');
- 3-连接数据库并根据需求设计学员信息表
npm install mongoose
// connect.js
const mongoose = require('mongoose');
// 连接数据库
mongoose.connect('mongodb://localhost/playground',{ useUnifiedTopology: true, useNewUrlParser: true })
.then(() => console.log('数据库连接成功'))
.catch(() => console.log('数据库连接失败'))
// app.js
require('./model/connect');
// user.js
const mongoose = require('mongoose');
// 创建学生集合规则
const studentsSchema = new mongoose.Schema({
name: {
type: String,
require: true,
minlength: 2,
maxlength: 10
},
age: {
type: Number,
min: 10,
max: 25
},
sex: {
type: String
},
email: String,
hobbies: [ String ],
collage: String,
enterDate:{
type: Date,
default: Date.now
}
});
// 创建学生信息集合
const Student = mongoose.model('Student', studentsSchema);
// 将学生信息集合进行导出
module.exports = Student;
// app.js
const Student = require('./model/user');
- 4-创建路由并实现页面模板呈递
第三方模块 router
功能：实现路由
使用步骤：
- 获取路由对象
- 调用路由对象提供的方法创建路由
- 启用路由，使路由生效
npm install router
// app.js
// 引入router模块
const getRouter = require('router')
// 获取路由对象
const router = getRouter();
// 呈递学生档案信息页面
router.get('/add', (req, res) => {
res.end('add');
})
// 呈现学生档案信息列表页面
router.get('/list', (req, res) => {
res.end('list');
})
app.on('request', (req, res) => {
router(req, res, () => {})
})
- 5-实现静态资源访问
创建views文件夹，放模板文件，.html 改 .art
因为css属于静态资源文件，所以新建public文件夹用于放css文件
npm install art-template
// app.js
// 引入模板引擎
const template = require('art-template');
// 引入path模块
const path = require('path');
// 配置模板的跟目录
template.defaults.root = path.join(__dirname, 'views');
// 呈递学生档案信息页面
router.get('/add', (req, res) => {
let html = template('index.art', {});
res.end(html);
})
// 呈现学生档案信息列表页面
router.get('/list', (req, res) => {
let html = template('list.art', {});
res.end(html);
})
目前是无法打开对应页面的，因为在 index.art 中有css的外链还没有处理，所以网页一直处理等待的状态，使用第三方模块 server-static 实现静态资源访问服务
第三方模块 serve-static
功能：实现静态资源访问服务
步骤：
- 引入serve-static模块获取创建静态资源服务功能的方法
- 调用方法创建静态资源服务并指定静态资源服务目录
- 启用静态资源服务功能
npm install serve-static
// app.js
// 引入静态资源访问模块
const serveStatic = require('serve-static')
// 实现静态资源访问服务
const serve = serveStatic(path.join(__dirname, 'public'));
// serve添加到原有app.on内
app.on('request', () => {
// 启动静态资源访问服务功能
serve(req, res, () => {})
})
server.listen(3000)
实现路由功能和静态资源访问功能
http://localhost/add
http://localhost/list
- 6-实现学生信息添加功能
- 在模板的表单中指定请求地址与请求方式
<form action="/add" method="post"> - 为每一个表单项添加name属性
- 添加实现学生信息功能路由
- 接收客户端传递过来的学生信息
- 将学生信息添加到数据库中
- 将页面重定向到学生信息列表页面
// 引入querystring模块
const querystring = require('querystring');
// 实现学生信息添加功能路由
router.post('/add', (req, res) => {
// 接收post请求参数
let formData = '';
req.on('data', param => {
formData += param;
});
req.on('end', async () => {
// console.log(querystring.parse(formData));
await Student.create(querystring.parse(formData))
res.writeHead(301, {
Location: '/list'
})
res.end();
})
})
- 7-实现学生信息展示功能
- 从数据库中将所有的学生信息查询出来
- 通过模板引擎将学生信息和HTML模板进行拼接
- 将拼接好的HTML模板响应给客户端
// app.js修改
// 呈现学生档案信息列表页面
router.get('/list', async (req, res) => {
// 查询学生信息
let students = await Student.find();
console.log(students);
let html = template('list.art', {
students: students
});
res.end(html);
})
// list.art
<table>
<caption>学员信息</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>邮箱地址</th>
<th>爱好</th>
<th>所属学院</th>
<th>入学时间</th>
</tr>
{{each students}}
<tr>
<th>{{$value.name}}</th>
<th>{{$value.age}}</th>
<th>{{$value.sex == '0' ? '男' : '女'}}</th>
<th>{{$value.email}}</th>
<th>
{{each $value.hobbies}}
<span>{{$value}}</span>
{{/each}}
</th>
<th>{{$value.collage}}</th>
<th>{{$value.enterDate}}</th>
</tr>
{{/each}}
</table>
处理时间格式
npm install dateformat
// app.js
// 引入处理日期的第三方模块
const dateformat = require(dateformat);
// 处理日期格式的方法（模板中默认不能调方法，需要通过导入模板变量的方式导入到模板中，才可以调用）
template.defaults.imports.dateformat = dateformat;
//list.art修改
<th>${{dateformat($value.enterDate, 'yyyy-mm-dd')}}</th>
290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
