模板引擎artTemplate基本概念,基本语法,第三方模块-路由router,第三方模块 server-static(静态资源加载常用插件),案例中涉及到重定向等
模板引擎artTemplate
1 模板引擎的基本概念
1.1 模板引擎(第三方模块需要下载安装)
- 让开发者以更加友好的方式拼接字符串,使项目代码更加清晰、更加易于维护。
- 使用步骤
- 下载
1
npm install art-template
- 引入模板引擎(注意:返回的是一个方法)
1
const template = require('art-template')
- 告诉引擎模板的路径在哪,这里的模板路径中的文件格式是.art格式(里面是html标记语言)
1
const html = template('模板路径', 数据);
- 使用模板语法告诉模板引擎,模板与数据应该如何进行拼接
- 下载
- 代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18模板:01.art
<body>
<p>{{name}}</p>
<p>{{age}}</p>
</body>
执行代码:
const template = require('art-template');
const path = require('path');
// 模板路径这里建议使用绝对路径
const views = path.join(__dirname, 'views', '01.art');
// 获取特定模板与特定数据进行拼接
const html = template(views, {
name: '张三',
age: 20,
content: '<h1>我是标题</h1>'
});
// 输出返回的html模板
console.log(html);2 模板引擎的语法
2.1 模板的两种语法
- art-template同时支持两种语法
- 标准语法
1
{{数据}}
- 原始语法
1
<% =数据 %>
- 标准语法
- 标准语法可以让模板更容易读写,原始语法拥有更强大的逻辑处理能力
2.2 输出
1.输出
- 将某项数据输出在模板中,标准语法和原始语法如下:
1
2- 标准语法:{{ 数据 }}
- 原始语法:<%=数据 %>1
2
3
4
5
6
7
8
9<!-- 标准语法 -->
<h2>{{value}}</h2>
<h2>{{a ? b : c}}</h2>
<h2>{{a + b}}</h2>
<!-- 原始语法 -->
<h2><%= value %></h2>
<h2><%= a ? b : c %></h2>
<h2><%= a + b %></h2>2.原文输出
- 如果数据中携带HTML标签,默认模板引擎不会解析标签,会将其转义后输出。
1
2- 标准语法:{{@ 数据 }}
- 原始语法:<%-数据 %>1
2
3
4<!-- 标准语法 -->
<h2>{{@ value }}</h2>
<!-- 原始语法 -->
<h2><%- value %></h2>完整代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32.art->
<body>
<!-- 标准语法 -->
<p>{{name}}</p>
<p>{{age}}</p>
<p>{{1+1}}</p>
<p>{{1 + 1 == 2 ? '相等' : '不相等'}}</p>
<p>{{content}}</p>
<p>{{@content}}</p>
<!-- 原始语法 -->
<p><%=name%></p>
<p><%=age%></p>
<p><%=1+1%></p>
<p><%=1 + 1 == 2 ? '相等' : '不相等'%></p>
<p><%=content%></p>
<p><%-content%></p>
</body>
.js->
const template = require('art-template');
const path = require('path');
// 获取绝对路径
const views = path.join(__dirname, 'views', '02.art');
// 获取特定模板与特定数据进行拼接
const html = template(views, {
name: '张三',
age: 20,
content: '<h1>我是无标题</h1>'
});
// 输出返回的html模板
console.log(html); - 执行结果如下
- 总结
- 格式
1
2
3
4
5
6<!-- 标准语法 -->
{{if 条件}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
<!-- 原始语法 -->
<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %> - 代码执行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!-- 标准写法 -->
{{if age > 18}}
年龄大于18
{{else if age < 15}}
年龄小于15
{{else}}
年龄不符合要求
{{/if}}
<!-- 原始写法:内部遵循原始的js代码语法 -->
<% if(age>18) {%>
年龄大于18岁
<% }else if( age<15) { %>
年龄小于15
<% }else{%>
年龄不符合要求
<% }%>2.4 循环
1
2- 标准语法:{{each 数据}} {{/each}}
- 原始语法:<% for() { %> <% } %>1
2
3
4
5
6
7
8<!-- 标准语法 -->
{{each target}}
{{$index}} {{$value}}//这里index表示索引号,value表示值
{{/each}}
<!-- 原始语法 -->
<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>
注意
- 标准语法中循环体内的输出值要加$来获取变量的值,在输出的时候需要加
1
{{}}
- 原始语法中的输出值要加等号
2.5 子模板
- 使用子模板可以将网站公共区块(头部、底部)抽离到单独的文件中。
- 格式
1
2- 标准语法:{{include '模板'}}
- 原始语法:<%include('模板') %>这里是include()方法1
2
3
4
5{{include './common/header.art'}}
{{include('./common/header.art')}}
<div>{{msg}}</div>
{{include './common/footer.art'}}
{{include('./common/footer.art')}}2.6 模板继承
- 使用模板继承可以将网站HTML骨架抽离到单独的文件中,其他页面模板可以继承骨架文件。
- 模板继承的使用步骤
1
2
3
4- html模板主体art
- 在抽离的HTML主体中预留添加位置{{block '位置名称'}}{{/block}}双标签
- 通过{{extend '位置名称'}}来继承在页面中
- 通过双标签block来添加内容 - 代码展示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19html骨架:
<html lang="en">
<head>
{{block 'header'}}
{{/block}}
</head>
<body>
{{block 'content'}}
{{/block}}
</body>
继承页面:
{{extend './common/layout.art'}}
{{block 'header'}}
<link rel="stylesheet" href="./main.css">
{{/block}}
{{block 'content'}}
<p>{{msg}}</p>
{{/block}}2.7 模板配置
1
2
3- 向模板中导入变量 template.defaults.imports.变量名 = 变量值;
- 设置模板根目录 template.defaults.root = 模板目录
- 设置模板默认后缀 template.defaults.extname = '.art' - eg:
1
2
3
4
5
6
7
8
9
10
11- 将生成的date进行格式化需要第三方常见dateformat
- 下载 npm install dateformat
- 导入const dateformat = require('dateformat');//返回的是一个方法变量
- 将变量导入模板: template.defaults.imports.变量名 = 变量值
- 在模板中调用:{{dateformat(time,'yyyy-mm-dd')}}
- 设置模板根目录后,只需要写入文件即可不用写路径
- template.defaults.root = path.join(__dirname, 'views');//设置
- const html = template('07.art',{});//使用
- 设置默认后缀,只需要写文件名
- template.defaults.extname = '.html';//设置
- const html = template('07',{});//使用 - 好处:是的模板渲染更加简洁方便
- 源代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20.js文件
const template = require('art-template');
const path = require('path');
// 对时间进行格式化,引入第三方模块dateformat
const dateformat = require('dateformat');
// 向模板中导入变量对时间进行处理
template.defaults.imports.dateformat = dateformat;//方法名
// 设置模板根目录 template.defaults.root = 模板目录
template.defaults.root = path.join(__dirname, 'views');
// 设置模板默认后缀 template.defaults.extname = '.art',使用时直接输入文件名
template.defaults.extname = '.html';
const html = template('07.art', {
time: new Date()
});
console.log(template('08', {
}));
console.log(html);
.art模板文件
{{dateformat(time,'yyyy-mm-dd')}} - 执行结果
3 第三方模块-路由router
- 功能实现路由
- 使用
- 下载第三方模块:
1
npm install router
- 引入第三方模块
- 获取路由对象
- 调用路由对象提供的方法创建路由
- router.get(‘路径’,()=>{}):get请求
- router.post(‘路径’,()=>{}):post请求处理
- 启用路由,使路由生效
1
2router(req, res, () => { })
这里的路由对象有三个参数,第三个参数是一个匿名函数,不可省略,是事件结束之后的操作1
2
3
4
5
6
7
8
9
10const getRouter = require('router')//返回的是路由方法
const router = getRouter();//调用返回的方法获取路由对象
<!-- 调用提供的方法创建路由 -->
router.get('/add', (req, res) => {
res.end('Hello World!')
})
server.on('request', (req, res) => {
<!-- 启动路由 -->
router(req, res)
})4 第三方模块 server-static
- 下载第三方模块:
- 实现静态资源访问服务(在页面加载过程中实现css的文件的加载等)
- 使用
- 下载第三方模块:
1
npm install server-static
- 模块获取创建静态资源服务功能的方法
- 调用方法创建静态资源服务并指定静态资源服务目录
- 下载第三方模块:
- 实现
1
2
3
4
5
6
7
8
9<!-- 引入 -->
const server-static = require('server-static');//返回的是方法名
<!-- 返回静态资源服务对象 -->
const server = server-static('静态资源路径');
server.on('request', () => {
<!-- 启动静态资源服务 -->
serve(req, res)
})
server.listen(3000) - 知识点:http请求响应、数据库、模板引擎、静态资源访问。
实践总结
- 文件位置放置
- model:放数据库相关戴安
- public:静态资源代码
- route:放置路由代码
- views:放置模板
- app.js:项目的入口文件
- 提交form表单(post方式)
- method:post,action=/add
- 每个提交内容的标签中有name属性
- post方法处理
- 两个事件data和end
- data事件中需要定义一个变量接收传过来的params
- on事件中需要res.end()响应客户端请求,不然请求一直在等待
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17// 接受用户提交的信息
let formData = '';
// 接受post参数
req.on('data', param => {
formData += param;
})
// post参数接受完毕
req.on('end', async () => {
let user = querystring.parse(formData)
// 将用户提交的信息添加到数据库中
await User.updateOne({ _id: query.id }, user);
// 301代表重定向
// location 跳转地址
res.writeHead(301, {
Location: '/list'
});
res.end();
- 重定向代码Location
1
2
3
4
5// location 跳转地址
res.writeHead(301, {
Location: '/list'
});
res.end();
本文作者:
SparkParis
本文链接: https://sparkparis.github.io/2020/04/07/Node-%E7%AC%94%E8%AE%B04%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E/
版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!
本文链接: https://sparkparis.github.io/2020/04/07/Node-%E7%AC%94%E8%AE%B04%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E/
版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!