node的art-template插件使用
1.前端使用模板引擎
1.下载 npm i art-template
2.前端对此的使用只要template.js文件(不需要使用整个模块),所以引入 template-web.js 文件，文件引入以后会向外暴露一个 template 方法(直接使用就可以)
3.3个script标签 模块的script(type="text/html",id="tmp") 引入的script(src="") 输出script
4.使用模板渲染的语法(输出的script中) template(模板id, {})
- 这一步会有返回值，返回值是模板中的内容，可以直接赋予想要渲染的元素上(这就是输出)
2.模板语法
- 输出内容
- 原生 js 输出
<%= 变量 %> 不认识 html 格式
<%- 变量 %> 认识 html 格式 - 模板语法输出
{{ 变量 }} 不认识 html 格式
{{@ 变量 }} 认识 html 格式
2.条件判断 - 原生 js 输出
<% if () { %>
根据 if 条件决定 这个位置的内容是不是渲染
<% } else { %>
根据 if 条件决定 这个位置的内容是不是渲染
<% } %>
- 模板语法输出
{{ if 条件 }}
根据 if 条件决定 这个位置的内容是不是渲染
{{ /if }}
3.循环渲染
- 原生 js 输出
<% for () { %>
这个位置的结构会根据 for 循环渲染多少次
<% } %>
- 模板语法输出
{{ each 数组 }}
{{ /each }}
输出scrit举例
const div = document.querySelector('div') //相当于挂载 el
// 相当于在 模板标签里面拥有了一个叫做 title 的变量, 值是 '你好 世界'
div.innerHTML = template('tmp', { //相当于data 返回值是模板字符串，从而实现渲染 且直接使用暴露出来的这个方法
title: '你好 世界',
str: '<span>我是一段超文本</span>',
boo1: true,
boo2: false,
hobby: ['吃饭', '睡觉', '打游戏']
})
3.后端使用模板引擎
.1.直接引入模块
2.使用render方法，实现页面和数据的结合
- 3.举个简单例子 分页
node文件
const http = require('http')
const fs = require('fs')
const urlModel = require('url')
const { selectUser } = require('./db/db_model')
const template = require('art-template')
http.createServer((req, res) => {
const { url } = req
if (url.startsWith('/index.html')) {
const { current } = urlModel.parse(url, true).query
// // 读取到带有模板语法的 html 结构
fs.readFile('./index.html', 'utf8', async (err, data) => { //data是读取的整个页面
if (err) return console.log(err)
// 从数据库获取数据 数据库中查询使用limit 10 达到每次从(current - 1) * 10] 开始查找，找固定条数
const result = await selectUser([(current - 1) * 10])
// 把数据库的数据和页面结合在一起 data是页面，这里做模板，任何地方可以获得后面对象中的属性，使用模板来渲染页面
const html = template.render(data, { list: result, current: current })
// 返回给前端一个已经结合好的页面
res.end(html)
})
}
}).listen(8080, () => console.log('8080'))
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button class="prev">上一页</button>
<button class="next">下一页</button>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>班级</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
{{ each list }} //这里是node的模板渲染
<tr>
<td>{{ $index + 1 }}</td>
<td>{{ $value.name }}</td>
<td>{{ $value.age }}</td>
<td>{{ $value.gender }}</td>
<td>{{ $value.class }}</td>
<td>{{ $value.score }}</td>
</tr>
{{ /each }}
</tbody>
</table>
<script>
let current = {{ current }} //使用模板，动态渲染
document.querySelector('.prev').onclick = function () {
current--
window.location.href = './index.html?current=' + current
}
document.querySelector('.next').onclick = function () {
current++
window.location.href = './index.html?current=' + current
}
</script>
</body>
</html>