基于NodeJS的前后端分离的思考与实践（二）模版探索

【标题】基于NodeJS的前后端分离的思考与实践（二）模版探索

【摘要】本文将探索基于NodeJS的前后端分离场景下的模版渲染，包括模版引擎的选择、模版渲染的实现方式以及相关的代码示例。

一、选择模板引擎

在前后端分离的情况下，有许多选择支持前后端都能够使用的模版引擎，例如EJS、Handlebars、Pug等。在选择模板引擎的时候，我们需要考虑一些关键因素，例如模板语言本身的易懂程度、渲染性能、扩展能力等等。本文选择使用Pug模板来探索模版渲染的实现。

二、模版渲染实现方式探索

在前后端分离的情况下，一般情况下是通过Ajax或者fetch等方式从服务器异步获取数据，然后通过模板引擎来渲染模板并将数据插入到对应的位置上，最终显示到用户界面上。

下面，我们将具体探索一下Pug模板渲染的实现方式。首先在后端服务器中设置路由，当前端请求某个模板页面时，服务器渲染对应的Pug模板，并将模板中需要的数据渲染出来后返回给前端。具体实现代码如下：

const express = require('express');
const app = express();
const pug = require('pug');

// 设置模板引擎为Pug
app.set('view engine', 'pug');

// 设置模板目录
app.set('views', './views');

// 定义渲染模板的路由
app.get('/', (req, res) => {
  res.render('index', {
    title: 'Node.js学习笔记',
    content: '这是一篇关于Node.js的学习笔记'
  });
});

// 启动服务器，监听端口
app.listen(3000, () => {
  console.log('Server is running on port 3000.');
});

以上代码中，我们在服务器端设置了Pug模板引擎，并定义了一个路由用于渲染index.pug模板，同时传入了该模板需要的数据，包括标题和正文内容。

然后在前端使用Ajax或者fetch等方式请求该路由，如下所示：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/');
xhr.send();

xhr.onreadystatechange = function() {
  if(xhr.readyState === 4 && xhr.status === 200) {
    const data = xhr.responseText;
    document.querySelector('#app').innerHTML = data;
  }
};

当我们在前端成功获取到服务器返回的数据后，我们就可以通过jQuery等JS框架将其插入到指定的位置上，并渲染出最终的视图页面。

三、示例情境

示例一

在一个电商网站的商品详情页中，使用Node.js和Pug来渲染商品详情的页面。其中需要展示的信息包括商品名称、价格、图片等。

在服务器端，我们可以返回一个包含商品相关数据的JSON对象，如下所示：

{
  "title": "商品A",
  "price": "299元",
  "image": "https://example.com/images/goods-a.png"
}

然后在Pug模板中按照需要的方式使用这些数据，渲染出我们所需的商品详情页面。最终该页面可以通过Ajax等方式插入到网站中的指定位置上。

示例二

在一个博客网站中，使用Node.js和Pug来渲染博客的文章列表页面。其中需要展示的信息包括文章标题、作者、发布时间等。

在服务器端，我们可以通过数据库查询将所有的文章相关数据查询出来，然后将其作为JSON对象返回给前端，如下所示：

{
  "articles": [
    {
      "title": "文章A",
      "author": "张三",
      "publishTime": "2021-01-01"
    },
    {
      "title": "文章B",
      "author": "李四",
      "publishTime": "2021-01-02"
    }
  ]
}

然后在Pug模板中，我们可以使用each语句来遍历文章列表，并将每篇文章的标题、作者、发布时间等信息展示出来。最终该页面也可以通过Ajax等方式插入到网站中的指定位置上。