Node.js 借助art-template进行后端渲染并呈现页面到前端

---

一、总体思路

写好前端页面, 然后在前端common.js文件用ajax向后端发送请求;

在server.js中配置art-template模板的取用路径, 相关options;配置body-parser以正确解析前端发来的数据;

然后做后端路由, 先在"controller/index"中配置各条路由活跃后需触发的方法(即自定义路由中间件), 然后在"router/index"挂载到express的路由对象router:

准备后端数据.

配置art模板文件.

抽离路由中间件(当然, 不抽离也是可以的);

---

二、前端在common.js发送请求

art-template既能在Node.js环境下运行,也能在浏览器环境下运行
art-template提供给前端使用的三种渲染方法:

语法	说明
template(filename, data);	基于模板名渲染模板, 但参数不需要template对象;
template.compile(source, options);	将模板源代码编译为函数
template.render(source, data, options);	将模板源代码编译成函数并立即执行

因为浏览器不支持文件系统, 所以template三个渲染方法都不支持传入文件路径.
因为这是在前端, 我们不能直接用require()方法, 需要去art-template官网拿到template-web.js从html页面< script src>引入才能在前端正常使用art-template;

当然, 也只能使用它们提供给前端的方法.

$.ajax({
   
  url: '/api/list',
  success(result) {
   
    let templateStr = `
      <ul>
        {
    {each data}}
          <li>{
    {$value}}</li>
        {
    {/each}}
      </ul>
    `
    //用到art-template API提供的循环语法

    let html = template.render(templateStr, {
   
        //"template"是客户端的template对象
      data: result.data
    })
    $('#list').html(html)
  }
})

三、server.js相关配置

在server.js中进行art-template和body-parser相关的配置.

1.引入依赖

const express = require('express');
const app = express();
const bodyParser = require('body-parser')
const router = require('./router/index');
const path = require('path');

---

2.body-parser相关配置

body-parser插件可以在中间件中对传入的请求体进行解析, 顾名思义的话, body指的是请求的"身体body", 而"parser"的中文在计算机领域原本就有语法分析程序,句法分析程序之意.

但其实"parser"指的是一种过程, 一般是将某种数据从一种结构转换为另一种数据结构的过程.

app.use(bodyParser.urlencoded({
    extended: false }))