Node.js（四、模板引擎artTemplate）
1、模板引擎的基础概念
1.1、什么是模板引擎
模板引擎是第三方模块。
让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护。
// 未使用模板引擎的写法
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>;'
}
// 使用模板引擎的写法
<ul>
{
{
each ary }}
<li>{
{
$value.name}}</li>
<li>{
{
$value.age}}</li>
{
{
/each}}
</ul>
str += '</ul>';
1.2、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: 'lgg',
age: 20
}
})
// index.art模块
<div>
<span>{
{
data.name }}</span>
<span>{
{
data.age }}</span>
</div>
1.3、模板引擎语法
1.3.1、模板语法
- art-template同时支持两种模板语法：标准语法和原始语法。
标准语法：{ { 数据 }}
原始语法：<%= 数据%>
1.3.2、输出
将某项数据输出在模板中，标准语法和原始语法如下：
- 标准语法： { { 数据 }}
- 原始语法：<%=数据%>
// 标准语法
<h2>{
{
value }}</h2>
<h2>{
{
a ? b : c }}</h2>
<h2>{
{
a + b }}</h2>
// 原始语法
<h2><%= value %></h2>
<h2><%= a ? b : c %></h2>
<h2><%= a + b %></h2>
1.3.3、原文输出
如果数据中携带HTML标签，默认模板引擎不会解析标签，会将其转义后输出。
- 标准语法：{ {@ 数据 }}
- 原始语法：<%- 数据%>
// 标准语法
<h2>{
{
@ value }}</h2>
<h2><%- value%></h2>
1.3.4、条件判断
// 标准语法
{
{
if 条件 }}...{
{
/if}}
{
{
if v1}}...{
{
else if v2}}...{
{
/if}}
// 原始语法
<% if(value) {
%>...<% } %>
<% if(v1) {
%>
...
<% } else if(v2) {
%>
...
<% } %>
1.3.5 、循环
- 标准语法： { {each 数据 }}{ { /each }}
- 原始语法：<% for() { %><% } %>
// 标准语法
{
{
each target }}
{
{
$index}}-{
{
$value}}
{
{
/each}}
// 原始语法
<% for(var i = 0; i < target.length; i++) {
%>
<%= i %>-<%= target[i] %>
<% } %>
1.5.6、子模板
使用字模板可以将网站公共区块（头部、底部）抽离到单独的文件中。
- 标准语法：{ {include ‘模板’ }}
- 原始语法：<% include(‘./header.art’) %>
// 标准语法
{
{
include './common/header.art' }}
// 原始语法
<% include('./common/header.art') %>
1.5.7、模板继承
使用模板继承可以将网站HTML骨架抽离到单独的文件夹中，其他页面模板可以继承骨架文件。
- 准备
坑一：填充css内容
坑二：填充js内容
坑三：填充页面主体内容 - 使用
填充一：main.css
填充二：index.js
填充三：Hello
- 模板继承示例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML骨架模板</title>
{
{
block 'head' }}{
{
/block}}
</head>
<body>
{
{
block 'content'}}{
{
/block}}
</body>
</html>
// index.art 首页模板
{
{
extend './layout.art'}}
{
{
block 'head'}}<link rel="stylesheet" h>{
{
/block}}
{
{
block 'content'}}<p>This is just an awesome page.</p>{
{
/block}}
1.5.8、模板配置
- 向模板中导入变量：template.defaults.imports.变量名 = 变量值；
- 设置模板根目录：template.defaults.root = 模板目录；
- 设置模板默认后缀：template.defaults.extname = ‘.art’
附：router路由模块、serve-static静态资源管理模块
- 第三方模块router
功能：实现路由
- 获取路由对象。
- 调用路由对象提供的方法创建路由。
- 启用路由，使路由生效。
const getRouter = require('router')
const router = getRouter()
router.get('/', (req, res) => {
res.end('lgg')
})
router.post('/add', (req, res) => {
let addParams = ""
req.on('data', (params) => {
addParams += params
})
req.on('end', async () => {
await Student.create(queryString.parse(addParams))
res.writeHead(301, {
Location: '/list'
})
res.end()
})
})
app.on('request', (req, res) => {
router(req, res， () => {
}) // 有三个参数，最后一个回调函数是必填参数。
})
- 第三方模块serve-static
功能：实现静态资源访问服务
- 引用serve- static模块获取创建静态资源服务功能的方法。
- 调用方法创建静态资源服务并指定静态资源服务目录(引入path模块)。
- 启用静态资源服务功能。
const serveStatic = require('serve-static')
const serve = serveStatic()
app.on('request', (req, res) => {
serve(req, res， () => {
}) // 有三个参数，最后一个回调函数是必填参数。
})