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

最新推荐文章于 2024-08-03 20:32:29 发布
最新推荐文章于 2024-08-03 20:32:29 发布
阅读量1.2k 收藏 8
点赞数 2
分类专栏： nodejs 文章标签： 前端 javascript 开发语言 node
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43837235/article/details/121328679
版权

文章目录

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

一、实现内容描述

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

在这里插入图片描述

渲染前：

在这里插入图片描述

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

在这里插入图片描述

二、知识补充

服务端渲染介绍👉

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

art-template模板渲染的步骤

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

    关于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>

  2. 获取数据，借助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打开控制台，在项目根目录下进行如下操作

  1. npm init -y 初始化项目【自动创建package.json（包描述文件)，用于保存项目安装了哪些依赖】
  2. npm i -S art-template 安装用于实现模板渲染的依赖【自动创建node_modules文件夹】
3. 项目入口文件app.js编写
编写步骤
  1. 引入依赖
  2. 创建服务器
  3. 处理服务器接收到的请求，并生成返回内容
    • 保存请求的url地址
    • 根据url，展示对应的页面
    • 读取文件数据，转换成字符串类型
    • 在服务端替换页面中需要展示的数据，形成最终版文件数据
    • 将最终版文件数据在页面上展示
  4. 定义服务器端口号（运行后，即可通过端口号访问）
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请求获取数据再渲染。
    在这里插入图片描述

莫宛
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在node和express中配置使用art-template
webchang的博客
05-02 753
在node和express中使用art-template
Node.js 借助art-template进行后端渲染并呈现页面到前端
白瑕 的博客
11-14 1633
文章目录前言一、二、使用步骤总结 前言 cotroller/index.js储存抽离出的路由中间件; 在"router/index.js"里进行路由中间件的挂载; server.js将路由对象router挂载, 进行body-parser, art-template相关配置; 一、 目测从router/index.js起手较为适合; 二、使用步骤 总结 ...
Node + art-template服务端渲染
weixin_42429220的博客
12-13 176
Node 创建简易服务 // HTTP 模块 var http = require('http') // 文件处理模块 var fs = require('fs') // 创建服务实例 var server = http.createServer() // 文件路径 var pathDir = 'D:/HBuiderProjects/NodeJsLearn/resoure/' // 监听客户端请求 server.on('request',function (req,res) { // 请求数据
express-art-template服务端渲染
坚持原创
12-27 212
我们都知道，在用node写服务器的时候，要用http来创建服务，然而，为了方便开发，有人对http进行了封装，于是就有了express。 那么怎么在express中使用art-template，那就要用到express-art-template进行服务端渲染。 首先，要在项目中用npm安装express,art-template,express-art-template 然后在命令行执行命令node app.js启动服务 访问： 服务端在渲染的时候就会找到项目中views文件中的页面进行渲染 ap
NodeJs 服务端渲染 art-template 与 CommonJS 的模块规范
共勉
10-11 360
在nodeJs服务端上进行数据渲染，我们需要使用到第三方模块 art-template ，使用npm进行安装这个模块，npm install art-template 安装完成后：（可能无法访问）中文文档： https://aui.github.io/art-template/ 介绍 art-template 是一个简约、超快的模板引擎。 它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。 简单使用 在这里我们定义一个js文
art-template 的使用
weixin_45677987的博客
07-24 567
1: art-template 的使用: art-template 不仅可以在浏览器中使用, 而且可以在node 环境中使用 2: 安装: npm install art-template 的使用: 3: 在node 环境中可以使用art-template 模板引擎: 4: 模板引擎最早就是诞生于服务器领域, 后来才发展到了前端。 5: 安装npm install art-template 模板 在需要是使用的文件模块中加载 art-template 模块; 6: 只需要使用req.
Node模版引擎(ejs, art-template)
MiMeng的博客
03-16 2087
模版引擎 1 ejs模版引擎 安装ejs模版引擎 $ npm i ejs -s 使用模版引擎 const express = require('express'); const app = express(); // 设置视图模版引擎 'ejs' app.set('view engine', 'ejs'); // 配置模版目录 让程序直到模版引擎的位置 app.set('view', './views'); app.get('/show', (request, response) =>
Nodejs基础之Express框架和art-template引擎(四)
Augenstern_QXL的博客
09-01 1244
✍ 1、Express框架 Express 是一个基于Node.js 平台，快速、开放、极简的web 开发框架，它提供一系列强大的特性，帮助你创建各种Web 和移动设备应用。 英文官网：http://expressjs.com/ 中文官网：https://www.expressjs.com.cn/ 1.1、Express安装 安装 Expresss 框架，就是使用 npm 的命令 npm install express --save –save 参数，表示自动修改 package.json 文件
node.js (四)使用art-template渲染数据
weixin_43932098的博客
08-20 646
art-template文档官网：https://aui.github.io/art-template/zh-cn/index.html 一：什么是art-template art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。使用art-template也便于维护...
前端插件art-template模板引擎art-template-test示例代码
09-24
通过学习和理解`art-template-test`中的示例代码，我们可以更好地掌握这一工具，并将其应用于实际项目，以提升开发效率和代码质量。在前端开发过程中，正确选择和使用模板引擎，是优化Web应用性能的关键之一。
留言板-express+art-template.zip
02-20
在Express中，我们通常会将Art-Template作为视图引擎，通过`res.render()`方法将后端数据传递给前端模板进行渲染。例如，`res.render('index', { messages: feedbackList })`这行代码会将反馈列表`feedbackList`传入...
nodejs中art-template模板语法的引入及冲突解决方案
12-23
1、安装art-template npm install art-template 2、修改app.js文件，添加如下代码： // view engine setup app.set('views', path.join(__dirname, 'views')); var template = require('art-template'); template.
node-typescript-koa-template
04-02
节点Web服务模板 实用的模板，可快速启动RESTful API项目。 你得到： Koa Web服务 Postgres数据库 ... 注意toPojo是为了避免通过在整个系统上散布ORM模型而失去对数据层的控制。 一个示例动作，对资源
node-red-dashboard-custom-widget:使用ui-template创建Node-RED-Dashboard UI小部件
05-11
ui-template代码段 <!-- external libraries --> [removed][removed] <link rel="stylesheet" href="http://billmill.org/css/style.css" /> <style> ... </style> [removed] ;(function...
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1447
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
WEB渗透Web突破篇-SSRF
最新发布
qq_59468567的博客
08-03 456
转码服务 在线翻译 获取超链接的标题等内容进行显示 请求远程服务器资源的地方，图片加载与下载(通过URL地址加载或下载图片) 图片、文章收藏功能 对外发起网络请求的地方，网站采集、网页抓取的地方。 头像 (远程加载头像) 一切要你输入网址的地方和可以输入ip的地方。 数据库内置功能(mongodb的copyDatabase函数) 邮件系统 文件处理 在线处理工具 从URL关键字中寻找：share、wap、url、link、src、source、target、u、3g、display、sourceURl、im
探索WebKit之巅：开启现代网页应用的高效与兼容之旅
weixin_67239318的博客
08-03 210
随着现代网页应用的快速发展，WebKit作为先进的浏览器引擎，其在高效性和兼容性上的表现显得尤为重要。本文深入探讨了WebKit的架构和渲染机制，揭示了其在支持Web标准和提升浏览体验方面的关键技术。通过分析WebKit如何处理DOM操作、JavaScript执行与图形渲染等挑战，我们了解到优化WebKit性能不仅关乎算法和硬件的优化，还涉及网络协议和安全框架的理解。此外，本文讨论如何通过WebKit应对多设备和分辨率下的兼容性问题。掌握这些关键因素，对于开发者来说，是打造高效、兼容的现代网页应用的基础。
高德地图离线版 使用高德地图api的方法
m0_62336925的博客
08-02 366
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
node.js+mysql使用art-template模板引擎实现登录成功后页面的变化
09-05
### 回答1： 首先，你需要安装 `art-template` 和 `mysql` 模块，使用以下命令： ``` npm install art-template mysql ``` 接下来，你需要编写一个简单的登录页面。在这个页面中，你需要一个表单来输入用户名和密码，并且在提交表单时发送 POST 请求到后端。例如： ```html <form action="/login" method="POST"> <div> <label for="username">用户名</label> <input type="text" id="username" name="username"> </div> <div> <label for="password">密码</label> <input type="password" id="password" name="password"> </div> <button type="submit">登录</button> </form> ``` 在后端，你需要使用 `express` 模块来处理路由和请求，使用 `mysql` 模块来连接和操作数据库，使用 `art-template` 模板引擎来渲染页面。以下是一个简单的后端代码示例： ```javascript const express = require('express'); const mysql = require('mysql'); const template = require('art-template'); const app = express(); // 创建 MySQL 连接池 const pool = mysql.createPool({ host: 'localhost', user: 'root', password: 'password', database: 'database_name' }); // 处理登录请求 app.post('/login', (req, res) => { const { username, password } = req.body; // 查询用户数据 pool.query('SELECT * FROM users WHERE username = ?', [username], (error, results) => { if (error) throw error; // 校验密码 if (results.length > 0 && results[0].password === password) { // 登录成功，渲染成功页面 const html = template(__dirname + '/success.html', { username }); res.send(html); } else { // 登录失败，渲染失败页面 const html = template(__dirname + '/failure.html'); res.send(html); } }); }); app.listen(3000, () => { console.log('Server started on port 3000'); }); ``` 在这个示例中，我们假设数据库中有一个名为 `users` 的表，包含 `id`、`username` 和 `password` 三个字段。当用户提交登录表单时，我们首先查询数据库中是否有匹配的用户名和密码，如果有则渲染登录成功的页面，否则渲染登录失败的页面。 在 `success.html` 页面中，你可以根据需要添加一些用户信息或操作，例如： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录成功</title> </head> <body> <h1>欢迎，{{ username }}！</h1> <p>你已经成功登录。</p> <a href="/">返回首页</a> </body> </html> ``` 在 `failure.html` 页面中，你可以添加一些错误提示或重新登录的链接，例如： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录失败</title> </head> <body> <h1>登录失败</h1> <p>用户名或密码错误，请重新登录。</p> <a href="/">返回首页</a> </body> </html> ``` 以上代码仅供参考，你可以根据实际情况进行调整和扩展。 ### 回答2： 要使用Node.js和MySQL来实现登录成功后页面的变化，可以按照以下步骤进行操作： 1. 首先，需要安装`node.js`、`mysql`和`art-template`模块。可以使用以下命令进行安装： ``` npm install node.js mysql art-template ``` 2. 在Node.js中，创建一个`server.js`文件，并在文件中引入必要的模块： ```javascript const http = require('http'); const mysql = require('mysql'); const template = require('art-template'); ``` 3. 连接到MySQL数据库： ```javascript const connection = mysql.createConnection({ host: 'localhost', //数据库服务器地址 user: 'root', //数据库用户名 password: 'password', //数据库密码 database: 'database_name' //数据库名称 }); connection.connect((err) => { if (err) { console.error('数据库连接失败！', err); } else { console.log('数据库连接成功！'); } }); ``` 4. 创建一个HTTP服务器： ```javascript const server = http.createServer((req, res) => { // 处理登录请求 if (req.url === '/login' && req.method === 'POST') { const body = []; req.on('data', (chunk) => { body.push(chunk); }); req.on('end', () => { const data = JSON.parse(body.toString()); // 查询数据库，验证用户名和密码是否正确 const sql = `SELECT * FROM users WHERE username = ? AND password = ?`; const values = [data.username, data.password]; connection.query(sql, values, (err, results, fields) => { if (err) { console.error('登录失败！', err); res.statusCode = 500; res.end(); } else if (results.length > 0) { // 使用art-template生成登录成功后的页面 const html = template.render('success.html', { username: data.username }); res.statusCode = 200; res.setHeader('Content-Type', 'text/html'); res.end(html); } else { // 登录失败 res.statusCode = 401; res.end(); } }); }); } else { // 返回登录页面 const html = template.render('login.html'); res.statusCode = 200; res.setHeader('Content-Type', 'text/html'); res.end(html); } }); server.listen(3000, () => { console.log('服务器已启动，监听端口3000'); }); ``` 5. 在项目根目录下创建`login.html`和`success.html`文件，并定义对应的登录和成功页面内容。 以上是一个简单的使用Node.js、MySQL和art-template模板引擎实现登录成功后页面的变化的示例。根据具体项目需求，你可能需要进一步完善和调整代码。 ### 回答3： 要使用Node.js和MySQL来实现登录成功后页面的变化，并结合art-template模板引擎，可以按照以下步骤进行： 1. 确保已安装Node.js和MySQL，并通过npm安装art-template和mysql模块。 2. 在MySQL中创建一个用户表，包含用户名和密码等字段。 3. 在Node.js中创建一个服务器，监听特定端口。 4. 创建路由来处理不同的请求，包括登录页面和登录请求。 5. 使用art-template模板引擎来渲染登录页面，包括表单和错误提示。 6. 当用户提交登录表单时，通过post请求来处理登录请求。 7. 在登录请求的处理函数中，通过向数据库查询匹配的用户名和密码来验证用户的凭据。 8. 如果验证成功，将用户信息保存在session或cookie中，以便在后续页面中使用。 9. 根据验证结果来渲染不同的页面，如登录成功后的主页或登录失败后的错误页面。 10. 在主页上，可以根据用户的登录状态，显示不同的内容。 以上是一个简单的示例，具体的实现过程会涉及更多细节和逻辑，例如密码加密、用户权限控制等。这样，当用户成功登录后，页面会根据登录状态和用户信息的变化而发生变化。使用art-template模板引擎能够方便地渲染页面，并通过与MySQL数据库进行交互来进行用户验证和数据查询操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值