node.js服务器动态资源处理

写过一篇  金牌会员 | 2024-7-27 07:57:08 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 827|帖子 827|积分 2481

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

静态与动态服务器重要区别于是否读取数据库，若然在数据库中的资料处理中将数据转换成可取用格式的结构，也就是说把对象转化为可传输的字节序列过程称为序列化，反之则为反序列化。
简单来说，它比起静态资源较复杂，由于它会随用户不同、响应内容不同而不停产生变化

二、什么是动态资源处理？

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

三、处理动态资源的方法？

将页面内容动态化。利用到第三方模块——>模板引擎  去动态将我的数据嵌入到我的网页中去。
什么是模板引擎？见 http://t.csdnimg.cn/KL2aA

四、代码示例。

（1）我们将首页、登录、注册三个html静态页面和用户列表users.html写在views这个大文件夹下。css样式和images图片放入public这个大文件夹下。创建一个data大文件夹，data下面建一个user.json文件来专门存储用户数据
简单写一下首页、注册、登录页面的html静态页面的样式。此处省略。详细见我上篇博客见http://t.csdnimg.cn/oG2jA


动态资源处理详细表现就是我的用户列表渲染功能（users.html）和我的不同错误提示功能（404.html）。
用户列表渲染功能可以将我的user.json内里注册成功的用户数据渲染到我的服务器用户列表页面
users.html 用户列表：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>用户列表</title>
  6.   <link rel="stylesheet" href="../public/css/main.css">
  7. </head>
  8. <body>
  9.   <h1>用户列表</h1>
  10.   <img src="../public/images/01.png" alt=""><br>
  11.   <ul>
  12.     <!-- 循环li -->
  13.     <% for(let username in users){ %>
  14.     <li>
  15.         <!-- 取出属性名和密码这个属性值，放入li里面 -->
  16.         <%=username %> : <%=users[username] %>
  17.     </li>
  18.     <% } %>
  19.   </ul>
  20. </body>
  21. </html>
复制代码
404.html  不同错误提示：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>404</title>
  6. </head>
  7. <style>
  8.   body {
  9.     background-color:pink;
  10.   }
  11. </style>
  12. <body>
  13.   <h1>
  14.     <!-- 定义模板 -->
  15.     <%= msg %>
  16.   </h1>
  17. </body>
  18. </html>
复制代码
（2）在我的测试代码的终端 npm install underscore -save安装underscore渲染模板引擎 、npm install querystring安装querystring查询模块


（3） 测试代码如下：

  1. const http = require('http');
  2. const fs = require('fs');
  3. const path = require('path');
  4. const url = require('url');
  5. // 声明一个专门存放所有用户的变量
  6. var users;
  7. // 导入查询参数的模块
  8. const querystring = require('querystring');
  9. // 导入underscore渲染模板
  10. const _ =require('underscore');
  11. //使用underscore渲染模板
  12. function render(data){
  13.     // 读取模板内容
  14.     let temp=fs.readFileSync(path.join(__dirname,'views/404.html'));
  15.     // 获取渲染函数
  16.     let compiled=_.template(temp.toString());
  17.     // 渲染模板
  18.     return compiled(data);
  19. }
  20. //创建服务器
  21. const server = http.createServer();
  22. //读取文件。读取user.json存放用户数据的文件
  23. fs.readFile(path.join(__dirname, 'data/users.json'), (err, data) => {
  24.     if (err) {
  25.         users = {};
  26.     } else {
  27.         users = JSON.parse(data.toString()); //如果读取正确就将读到的内容转换为一个对象存到users里
  28.     }
  29. })
  30. //服务器做出请求响应
  31. server.on('request', (req, res) => {
  32.     let objurl = url.parse(req.url); //将url转为一个对象才能获取到它的pathname
  33.     let pathname = objurl.pathname;
  34.     // 对pathname做处理
  35.     if (pathname.startsWith('/public')) {
  36.         // 找到当前项目文件夹，再将相对路径转为绝对路径
  37.         let p = path.join(__dirname, pathname);
  38.         fs.readFile(p, (err, data) => {
  39.             if (err) {
  40.                 res.end(render({msg:'访问的文件不存在'})); //可以使用中文，因为现在是html页面去显示的
  41.             } else {
  42.                 res.end(data);
  43.             }
  44.         })
  45.     } else if (pathname == '/' || pathname == '/home') {
  46.         let p = path.join(__dirname, 'views/index.html');
  47.         fs.readFile(p, (err, data) => {
  48.             if (err) {
  49.                 res.end(render({msg:'访问的文件不存在'}));
  50.             } else {
  51.                 res.end(data);
  52.             }
  53.         })
  54.     } else if (pathname == '/regist') { //建一个文件夹data专门来储存数据 里面建一个users.json的文件
  55.         let p = path.join(__dirname, 'views/regist.html');
  56.         fs.readFile(p, (err, data) => {
  57.             if (err) {
  58.                 res.end(render({msg:'访问的文件不存在'}));
  59.             } else {
  60.                 res.end(data);
  61.             }
  62.         })
  64.     } else if (pathname == '/login') {
  65.         let p = path.join(__dirname, 'views/login.html');
  66.         fs.readFile(p, (err, data) => {
  67.             if (err) {
  68.                 res.end(render({msg:'访问的文件不存在'}));
  69.             } else {
  70.                 res.end(data);
  71.             }
  72.         })
  73.     } else if (pathname == '/doRegist') {
  74.         // Node.js 的 querystring 模块用于解析和格式化 URL 查询字符串：
  75.         // 1. 将字符串参数解析成对象
  76.         // querystring.parse(url)
  77.         // 2. 将对象参数解析成字符串
  78.         // querystring.stringify(urlObject)
  79.         let query = querystring.parse(objurl.query);
  80.         let username = query.username;
  81.         let password = query.password;
  82.         if (users[username]) {
  83.             res.end(render({msg:'用户名已存在，不能注册！'}));
  84.         } else {
  85.             //因为users里面是一个对象。所以只能属性名=值的形式。故属性名 = 密码（密码相当于这个属性名对应的属性值）
  86.             users[username] = password;
  87.             //利用JSON.stringify(users)将users对象转为字符串重新写到文件里去
  88.             fs.writeFile(path.join(__dirname, 'data/users.json'), JSON.stringify(users), (err) => {
  89.                 if (err) {
  90.                     res.end(render({msg:'注册失败'}));
  91.                 } else {
  92.                     res.end(render({msg:'注册成功'}));
  93.                 }
  94.             })
  96.         }
  98.     } else if (pathname == '/doLogin') {
  99.         let query = querystring.parse(objurl.query);
  100.         let username = query.username;
  101.         let password = query.password;
  102.         // 判断users的用户名和密码有无
  103.         if (users[username] && users[username] == password) { //用户名 && 密码
  104.             res.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8' });
  105.             res.end(render({msg:'登录成功'}));
  106.         } else {
  107.             res.writeHead(502, { 'Content-Type': 'text/html;charset=utf-8' });
  108.             res.end(render({msg:'用户名或密码错误，登录失败'}));
  109.         }
  110.     } else if (pathname == '/list') {
  111.         let p=path.join(__dirname,'views/users.html');
  112.         fs.readFile(p,(err,data)=>{
  113.             if(err){
  114.                 res.end(render({msg:'访问的文件不存在'}));
  115.             }else{
  116.                 //获得渲染函数
  117.                 let compiled=_.template(data.toString());
  118.                 // 调用渲染函数来生成html内容
  119.                 let html=compiled({users:users}); //我们在模板里取的是users的属性，所以不能简写成users，而是users：users
  120.                 res.end(html);
  121.                
  122.             }
  123.         })
  124.     }
  125. });
  127. server.listen(3000, '127.0.0.1', () => {
  128.     console.log('Server is running at http://127.0.0.1:3000');
  129. })
复制代码
（4）结果显示

4-1》当我的用户数据已被注册时：

动态显示我的404.html页面

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

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


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

写过一篇

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

存储 挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表