模板引擎
基础概念
模板引擎
第三方模块
让开发者以更加友好的方式拼接字符串,使项目代码更加清晰,易于维护
art-template模板引擎
npm install art-template
下载const template = require('art-template')
引入模板引擎const html = template('模板路径',数据);
告诉模板引擎要拼接的数据和模板在哪
art-template代码示例
// 导入模板引擎模块
const template = require('art-template');
// 将特定模板与特定数据进行拼接
const html = template('路径',{
data:{
name: '张三',
age: 20
}
})
// 模板中的代码
<div>
<span>{{ data.name }}</span>
<span>{{ data.age }}</span>
</div>
模板引擎语法
模板语法
- art-template同时支持两种模板语法:标准语法和原始语法
- 标准语法可以让模板更容易读写,原始语法具有强大的逻辑处理能力
输出
将某项数据输出在模板中,标准语法和原始语法如下:
- 标准语法:
{{ 数据 }}
- 原始语法:
<%= 数据 %>
原文输出
如果数据中携带html标签,默认模板引擎不会解析标签,会将其转义后输出
- 标准语法:
{{ ``@数据`` }}
- 原始语法:
<%- 数据 %>
条件判断
在模板中可以根据条件来决定显示哪块HTML代码
<!--标准语法-->
{{if}}
xxx
{{else if}}
xxx
{{else}}
xxx
{{/if}}
<!--原始语法-->
循环
<!--标准语法-->
{{each 数据}}
{{ $index }}
{{ $value }}
{{/each}}
<!--原始语法-->
<% for (var i = 0, i < target.length, i++) { %>
<%= i %>
<%= target[i] %>
<% } %>
子模板
使用子模板可以将网站公共区块(头部,底部)抽离到单独的文件中
- 标准语法:
{{ include '模板路径' }}
- 原始语法:
<% include('模板') %>
模板继承
使用模板继承可以将网站HTML骨架抽离到单独的文件中,其它页面模板可以继承骨架文件
模板继承示例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML骨架模板</title>
{{block 'head'}}{{/block}}
</head>
<body>
{{block 'content'}}{{/block}}
</body>
</html>
<!--index.art 首页模板-->
{{extend '路径'}}
{{block 'head'}}<link rel='stylesheet' href='custom.css'>{{/block}}
{{block 'content'}}
<p>This is just an awsome page.</p>
{{/block}}
模板配置
- 向模板中导入变量
template.defaults.imports.变量名 = 变量值
- 设置模板根目录
template.defaults.root
- 设置默认模板后缀
template.defaults.extname
案例
- 建立项目文件夹并生成项目描述文件
- 创建网站服务器实现客户端和服务器端通信
- 连接数据库并根据需求设计学员信息表
- 创建路由并实现页面模板呈递
- 实现静态资源访问
- 实现学生信息添加功能
- 实现学生信息展示功能
第三方模块 router
功能: 实现路由
使用步骤:
- 获取路由对象
- 调用路由对象提供的方法创建路由
- 启用路由,使路由生效
const getRouter = require('router')
const router = getRouter();
router.get('/add', (req,res) => {
res.end('Hello World!')
})
server.on('request', (req,res) => {
router(req,res,() => {})
})
第三方模块 serve-static
功能: 实现静态资源访问服务
使用步骤:
- 引入serve-static模块获取创建静态资源服务功能的方法
- 调用方法创建静态资源服务并制定静态资源服务目录
- 启用静态资源服务功能
const serveStatic = require ('serve-static')
const serve = serveStatic('静态资源目录')
server.on('request', () => {
serve(req, res, () => {})
})
server.listen(3000)