通过node和art-template实现服务端渲染

最新推荐文章于 2023-03-12 22:39:59 发布

莫宛

最新推荐文章于 2023-03-12 22:39:59 发布

阅读量1.5k

点赞数 2

分类专栏： nodejs 文章标签：前端 javascript 开发语言 node

本文链接：https://blog.csdn.net/qq_43837235/article/details/121328679

版权

nodejs 专栏收录该内容

5 篇文章

订阅专栏

本文通过实例展示了如何使用Node.js和art-template在服务端渲染一个带有动态数据的表格，包括模板编写、数据处理和服务器配置，实现实时数据展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

- 通过node和art-template实现服务端渲染

通过node和art-template实现服务端渲染

一、实现内容描述

本例实现了一个服务端渲染的数据表格，页面的动态数据由服务端渲染到页面中，再发送给浏览器展示。

在这里插入图片描述

渲染前：

在这里插入图片描述

浏览器接收到的页面结构：（已经在服务端渲染好了数据）

在这里插入图片描述

二、知识补充

服务端渲染介绍👉

服务端渲染SSR与客户端渲染 https://blog.csdn.net/qq_43837235/article/details/121157862?spm=1001.2014.3001.5502

art-template模板渲染的步骤

在页面中写出需要填写数据的模板

关于art-template

通过{{ }}包裹需要展示的数据

在页面中循环数据的方式：

(1) 用{{ each 数组 }} {{ /each }}包裹需要循环的页面结构，案例代码就是循环一行表格
<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>
(2) 在循环体内用{{ $value }}来拿到当前数组元素

<table>
    <thead>
        <tr>
            <th class="theader">姓名</th>
            <th class="theader">性别</th>
            <th class="theader">学历</th>
        </tr>
    </thead>
    <tbody>
        {{ each students }}
        <tr>
            <td>{{ $value.name }}</td>
            <td>{{ $value.gender }}</td>
            <td>{{ $value.age }}</td>
        </tr>
        {{ /each }}
    </tbody>
</table>

获取数据，借助art-template提供的render在服务端进行渲染

template.render(data.toString(), {
    students: students,
});

三、项目具体实现

1. 目录结构

在这里插入图片描述

node_modules — 保存项目依赖的第三方包，目录不需要自己创建
app.js — 用于创建服务器，且启动服务器时，作为项目入口，通过node app.js来启动
index.html — 页面代码
package.json — 保存项目依赖的信息

2. 初始化package.json与node_modules

通过ctrl+R打开控制台，在项目根目录下进行如下操作

npm init -y 初始化项目【自动创建package.json（包描述文件)，用于保存项目安装了哪些依赖】
npm i -S art-template 安装用于实现模板渲染的依赖【自动创建node_modules文件夹】

3. 项目入口文件app.js编写

编写步骤

引入依赖
创建服务器
处理服务器接收到的请求，并生成返回内容
- 保存请求的url地址
- 根据url，展示对应的页面
- 读取文件数据，转换成字符串类型
- 在服务端替换页面中需要展示的数据，形成最终版文件数据
- 将最终版文件数据在页面上展示
定义服务器端口号（运行后，即可通过端口号访问）

app.js文件代码

// 1.引入依赖
//   (1)art-tempate 实现模板渲染，第三方依赖
const template = require("art-template");
//   (2)http 实现创建并搭建服务器，node自带
const http = require("http");
//   (3)fs 实现文件读写，node自带
const fs = require("fs");
// 2.创建服务器
let server = http.createServer();
let students = [
  { name: "小丸子", gender: "女", age: "6" },
  { name: "熊大", gender: "男", age: "9" },
  { name: "边牧", gender: "男", age: "3" },
];
// 3.处理接收到的请求，生成返回内容
server.on("request", (req, res) => {
  // 3.1 接收请求的url地址
  let url = req.url;
  if (url == "/") {
    // 3.2 通过fs的readFile方法，读取index.html文件
    fs.readFile("./index.html", function (err, data) {
      // 3.3 如果报错在页面写入404 not found，并使函数结束运行
      if (err) {
        return res.end("404 not found");
      }
      // 3.4 通过template提供的render方法，进行模板渲染
      // 参数一：读取到的页面（转成字符串类型）
      // 参数二：需要在模板中渲染的数据
      let htmlStr = template.render(data.toString(), {
        students: students,
      });
      // 3.5 将渲染后的index.html写入"/"对应的页面
      res.end(htmlStr);
    });
  }
});
// 4.定义服务器端口号
server.listen(3000, () => {
  console.log("server is running on http://127.0.0.1:3000");
});

4. index.html页面编写

搭建页面基本结构
留出需要渲染数据的部分

index.html页面代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>服务端渲染</title>
    <style>
      table,
      td,
      th {
        border: 1px solid #ccc;
      }
      table {
        width: 300px;
        border-collapse: collapse;
      }
      th {
        height: 50px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th class="theader">姓名</th>
          <th class="theader">性别</th>
          <th class="theader">学历</th>
        </tr>
      </thead>
      <tbody>
        {{ each students }}
        <tr>
          <td>{{ $value.name }}</td>
          <td>{{ $value.gender }}</td>
          <td>{{ $value.age }}</td>
        </tr>
        {{ /each }}
      </tbody>
    </table>
  </body>
</html>

5. 启动项目

通过ctrl+R打开控制台，在项目根目录下，输入node app.js，得到
通过http://127.0.0.1:3000即可看到展示的结果
F12打开控制台，可以看到，浏览器请求127.0.0.1时，收到的response就是已经渲染好数据的页面【此时，就是实现了服务端渲染】，而不是在浏览器解析，进行ajax请求获取数据再渲染。