node的art-template插件动态渲染页面

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>