一文详解Node.js服务器动态资源处理

更新时间：2024年04月25日 14:37:44 作者：想想aw

动态资源处理也就是对数据进行重新排序来读写数据库,读取反序列化,写入序列化,这篇文章主要来和大家聊聊Node.js中的服务器动态资源处理,感兴趣的可以了解下

一、node.js服务器动态资源处理与静态资源处理的区别

静态与动态服务器主要区别于是否读取数据库，若然在数据库中的资料处理中将数据转换成可取用格式的结构，也就是说把对象转化为可传输的字节序列过程称为序列化，反之则为反序列化。

简单来说，它比起静态资源较复杂，因为它会随用户不同、响应内容不同而不断产生变化

二、什么是动态资源处理

以JSON与JS为例，JSON.stringify()对数据序列化，JSON.parse()对数据反序列化。动态处理也就是对数据进行重新排序来读写数据库，读取反序列化，写入序列化。

三、处理动态资源的方法

将页面内容动态化。使用到第三方模块——>模板引擎去动态将我的数据嵌入到我的网页中去。

什么是模板引擎？见文末补充内容

四、代码示例

（1）我们将首页、登录、注册三个html静态页面和用户列表users.html写在views这个大文件夹下。css样式和images图片放入public这个大文件夹下。创建一个data大文件夹，data下面建一个user.json文件来专门存储用户数据

简单写一下首页、注册、登录页面的html静态页面的样式。此处省略。具体见详解Node.js服务器静态资源处理

动态资源处理具体表现就是我的用户列表渲染功能（users.html）和我的不同错误提示功能（404.html）。

用户列表渲染功能可以将我的user.json里面注册成功的用户数据渲染到我服务器用户列表页面

users.html 用户列表：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户列表</title>
  <link rel="stylesheet" href="../public/css/main.css" rel="external nofollow" >
</head>
<body>
  <h1>用户列表</h1>
  <img src="../public/images/01.png" alt=""><br>
  <ul>
    <!-- 循环li -->
    <% for(let username in users){ %>
    <li>
        <!-- 取出属性名和密码这个属性值，放入li里面 -->
        <%=username %> : <%=users[username] %>
    </li>
    <% } %>
  </ul>
</body>
</html>

404.html 不同错误提示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>404</title>
</head>
<style>
  body {
    background-color:pink;
  }
</style>
<body>
  <h1>
    <!-- 定义模板 -->
    <%= msg %>
  </h1>
</body>
</html>

（2）在我的测试代码的终端 npm install underscore -save安装underscore渲染模板引擎、npm install querystring安装querystring查询模块

（3）测试代码如下：

const http = require('http');
const fs = require('fs');
const path = require('path');
const url = require('url');
// 声明一个专门存放所有用户的变量
var users;
// 导入查询参数的模块
const querystring = require('querystring');
// 导入underscore渲染模板
const _ =require('underscore');
//使用underscore渲染模板
function render(data){
    // 读取模板内容
    let temp=fs.readFileSync(path.join(__dirname,'views/404.html'));
    // 获取渲染函数
    let compiled=_.template(temp.toString());
    // 渲染模板
    return compiled(data); 
}
//创建服务器
const server = http.createServer();
//读取文件。读取user.json存放用户数据的文件
fs.readFile(path.join(__dirname, 'data/users.json'), (err, data) => {
    if (err) {
        users = {};
    } else {
        users = JSON.parse(data.toString()); //如果读取正确就将读到的内容转换为一个对象存到users里
    }
})
//服务器做出请求响应
server.on('request', (req, res) => {
    let objurl = url.parse(req.url); //将url转为一个对象才能获取到它的pathname
    let pathname = objurl.pathname;
    // 对pathname做处理
    if (pathname.startsWith('/public')) {
        // 找到当前项目文件夹，再将相对路径转为绝对路径
        let p = path.join(__dirname, pathname);
        fs.readFile(p, (err, data) => {
            if (err) {
                res.end(render({msg:'访问的文件不存在'})); //可以使用中文，因为现在是html页面去显示的
            } else {
                res.end(data);
            }
        })
    } else if (pathname == '/' || pathname == '/home') {
        let p = path.join(__dirname, 'views/index.html');
        fs.readFile(p, (err, data) => {
            if (err) {
                res.end(render({msg:'访问的文件不存在'}));
            } else {
                res.end(data);
            }
        })
    } else if (pathname == '/regist') { //建一个文件夹data专门来储存数据 里面建一个users.json的文件
        let p = path.join(__dirname, 'views/regist.html');
        fs.readFile(p, (err, data) => {
            if (err) {
                res.end(render({msg:'访问的文件不存在'}));
            } else {
                res.end(data);
            }
        })
 
    } else if (pathname == '/login') {
        let p = path.join(__dirname, 'views/login.html');
        fs.readFile(p, (err, data) => {
            if (err) {
                res.end(render({msg:'访问的文件不存在'}));
            } else {
                res.end(data);
            }
        })
    } else if (pathname == '/doRegist') {
        // Node.js 的 querystring 模块用于解析和格式化 URL 查询字符串：
        // 1. 将字符串参数解析成对象
        // querystring.parse(url)
        // 2. 将对象参数解析成字符串
        // querystring.stringify(urlObject)
        let query = querystring.parse(objurl.query);
        let username = query.username;
        let password = query.password;
        if (users[username]) {
            res.end(render({msg:'用户名已存在，不能注册！'}));
        } else {
            //因为users里面是一个对象。所以只能属性名=值的形式。故属性名 = 密码（密码相当于这个属性名对应的属性值）
            users[username] = password;
            //利用JSON.stringify(users)将users对象转为字符串重新写到文件里去
            fs.writeFile(path.join(__dirname, 'data/users.json'), JSON.stringify(users), (err) => {
                if (err) {
                    res.end(render({msg:'注册失败'}));
                } else {
                    res.end(render({msg:'注册成功'}));
                }
            })
 
        }
 
    } else if (pathname == '/doLogin') {
        let query = querystring.parse(objurl.query);
        let username = query.username;
        let password = query.password;
        // 判断users的用户名和密码有无
        if (users[username] && users[username] == password) { //用户名 && 密码
            res.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8' });
            res.end(render({msg:'登录成功'}));
        } else {
            res.writeHead(502, { 'Content-Type': 'text/html;charset=utf-8' });
            res.end(render({msg:'用户名或密码错误，登录失败'}));
        }
    } else if (pathname == '/list') {
        let p=path.join(__dirname,'views/users.html');
        fs.readFile(p,(err,data)=>{
            if(err){
                res.end(render({msg:'访问的文件不存在'}));
            }else{
                //获得渲染函数 
                let compiled=_.template(data.toString()); 
                // 调用渲染函数来生成html内容
                let html=compiled({users:users}); //我们在模板里取的是users的属性，所以不能简写成users，而是users：users
                res.end(html);
                
            }
        })
    }
});
 
server.listen(3000, '127.0.0.1', () => {
    console.log('Server is running at http://127.0.0.1:3000');
})

（4）结果显示

当我的用户数据已被注册时：

动态显示我的404.html页面

我完成用户注册时，我点击用户列表，显示结果如下：

综上所述，相比我的静态资源处理而言，我的动态资源处理就相对效率较高，对于不同的错误信息，我可以直接使用我的404.html模板，直接在我的运行代码中显示 res.end(render({msg:'错误内容'})); 并且我可以直接使用用户数据模板user.html使用<% %> 执行javascript代码。可以直接在我服务器端页面展示我的所有成功注册的用户数据。化繁为简。

五、知识补充

node.js 什么是模板引擎

在 Web 开发中，数据的呈现通常是基于 HTML 和 CSS 的，而数据的变化又是非常频繁的，需要根据数据动态生成 HTML 标记。手动拼接 HTML 标记显然是一种非常低效的方式，不仅容易出错，而且难以维护。使用，我们使用到了模板引擎来解决这一问题。

模板引擎概念

模板引擎是一种将数据和模板结合起来生成最终结果的工具。它将一个模板和一个数据对象转为输入，通过模板解析和渲染生成最终的结果。通俗来说，模板引擎就是用来生成html等标记的工具。可以分解为两部分：

1.模板：一个模子（结构）。依据不同数据套不同的逻辑

2.引擎：一个处理器（编译、运行），最后渲染出HTML代码

模板引擎作用

模板引擎在Web开发中扮演着重要角色，其主要作用包括：

（1）界面与数据分离

（2）业务代码与逻辑代码分离

（3）生成特定格式的文档

（4）支持逻辑控制语句

（5）模板继承

（6）提高开发效率

常用的模板引擎：

（1）underscore

（2）art-template

（3）ejs

（4）jade

下面，我们来具体介绍常用的underscore模板引擎：

underscore模板引擎：

（1）安装underscore

npm install underscore —save

（2）导入underscore

var_=require('underscore')

（3）补充：依赖项问题

如上述的安装underscore后面要接 —save，意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。

-g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置。

-save-dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。

（4）在underscore模板文件中制定渲染规则

<%= %> 插入数据

eg：

<%=name%>

<% %> 执行javascript代码（一定要遵循js语法规则）

eg：

<%
for(let i=0;;i<3;i++){...}
%>

（5）使用underscore渲染模板

获取渲染函数

var compiled=_.template(data)

注意 _是模板引擎的对象，data是模板文件内容

渲染数据生成html内容

var htmlstr=compiled(dataObj)

注意 dataObj是模板文件所需数据对象

到此这篇关于一文详解Node.js服务器动态资源处理的文章就介绍到这了,更多相关Node.js服务器动态资源处理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

nodejs结合socket.io实现websocket通信功能的方法
这篇文章主要介绍了nodejs结合socket.io实现websocket通信功能的方法,结合实例形式分析了nodejs结合socket.io实现websocket通信的具体步骤与相关操作技巧,需要的朋友可以参考下
2018-01-01
详解Node.js使用token进行认证的简单示例
这篇文章主要介绍了详解Node.js使用token进行认证的简单示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
基于node打包可执行文件工具_Pkg使用心得分享
下面小编就为大家分享一篇基于node打包可执行文件工具_Pkg使用心得分享，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-01-01
node.js正则表达式获取网页中所有链接的代码实例
这篇文章主要介绍了node.js正则表达式获取网页中所有链接的代码实例,使用正则表达式实现,需要的朋友可以参考下
2014-06-06
Node.js查找当前目录下文件夹实例代码
本篇文章主要介绍了Node.js查找当前目录下文件夹实例代码，具有一定的参考价值，有兴趣的可以了解一下。
2017-03-03
Express作者TJ告别Node.js奔向Go
TJ自我介绍： TJ Holowaychuk ，程序员兼艺术家，Koa、Co、Express、jade、mocha、node-canvas、commander.js等知名开源项目的创建和贡献者。
2014-07-07
参考 EventEmitter实现一个简单的订阅发布功能函数
这篇文章主要为大家介绍了参考 EventEmitter实现一个简单的订阅发布功能函数示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
Node.js中的异步生成器与异步迭代详解
这篇文章主要给大家介绍了关于Node.js中异步生成器与异步迭代的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
Node.js实现爬取网站图片的示例代码
本文将利用Node.js开发一个小示例—爬取某图片网站的图片，文中涉及的知识点有https模块、cheerio模块、fs模块和闭包，感兴趣的可以了解一下
2022-04-04
详解npm和cnpm混用的坑
有没有遇到过npm和cnpm一起用的时候出现奇奇怪怪的问题呢？有没有遇到过cnpm在支付宝小程序上面安装包无效？本文就详解一下npm和cnpm混用的坑，感兴趣的可以了解下
2021-07-07