详解Node.js服务器静态资源处理
更新时间：2024年04月25日 14:37:25 作者：想想aw
静态资源服务器指的是不会被服务器的动态运行所改变或者生成的文件,本文主要为大家详细介绍了Node.js服务器静态资源处理的相关知识,需要的可以了解下
前言：
node.js服务器动态资源处理见 一文详解Node.js服务器动态资源处理
一、什么是node.js服务器静态资源
静态资源服务器指的是不会被服务器的动态运行所改变或者生成的文件. 它最初在服务器运行之前是什么样子, 到服务器结束运行时, 它还是那个样子. 比如平时写的 js, css, html文件, 都可以算是静态资源。
我的静态服务器需要使用json文件作为数据存储。并进行json数据的读取与写入。
下面，我将以在服务器中实现注册、登录为例并将我已注册的用户数据写到我的user.json中。
二、服务器处理静态资源执行思路
（1）将所有静态资源统一放入一个文件夹中做统一处理
（2）在服务器端来处理pathname从而判断url是否是我们请求的路径
如何解析和格式化url查询字符串？
Node.js 的 querystring 模块：
1. 将字符串参数解析成对象
querystring.parse(url)
2. 将对象参数解析成字符串
querystring.stringify(urlObject)
三、静态资源处理的判断方法
startWith（以什么开头）、indexOf、search、includes
四、执行要求
静态资源要求：完成注册、登录功能
动态资源要求：完成注册、登录、已注册的用户列表展示功能
五、执行代码
node.js服务器静态资源处理
（1）我们将首页、登录、注册三个html静态页面和用户列表users.html写在views这个大文件夹下。css样式和images图片放入public这个大文件夹下。创建一个data大文件夹，data下面建一个users.json文件来专门存储用户数据
简单写一下首页、注册、登录页面的html静态页面的样式。
index.html 首页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> <link rel="stylesheet" href="../public/css/main.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <h1>首页</h1> <img src="../public/images/01.png" alt=""><br> <a href="/login" rel="external nofollow" >登录</a>|<a href="/regist" rel="external nofollow" >注册</a>|<a href="/list" rel="external nofollow" >用户列表</a> </body> </html>
regist.html 注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<link rel="stylesheet" href="../public/css/main.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
<h1>注册</h1>
<img src="../public/images/01.png" alt=""><br>
<form method="get" action="/doRegist">
<input type="text" name="username" placeholder="用户名"><br>
<input type="password" name="password" placeholder="密码"><br>
<input type="submit" value="注册"><br>
</form>
</body>
</html>login.html 登录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="../public/css/main.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
<h1>登录</h1>
<img src="../public/images/01.png" alt=""><br>
<form method="get" action="/doLogin">
<input type="text" name="username" placeholder="用户名"><br>
<input type="password" name="password" placeholder="密码"><br>
<input type="submit" value="登录"><br>
</form>
</body>
</html>index.html 首页显示如下：
（2）测试代码：
创建一个服务器，使服务器做出响应的请求与响应（重点：对解析后的url的pathname来做出不同的if判断处理）
const http = require('http');
const fs = require('fs');
const path = require('path');
const url = require('url');
// 声明一个专门存放所有用户的变量
var users;
// 导入查询参数的模块
const querystring = require('querystring')
//创建服务器
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里
}
})
//服务器做出请求响应
// 设置服务器的监听器来响应'request'事件。当有人向服务器发送请求时，这个事件就会被触发
server.on('request', (req, res) => {
let objurl = url.parse(req.url); //将包含了客户端请求的完整URL(req.url)转为一个对象才能获取到它的pathname
let pathname = objurl.pathname; //从解析后的URL对象objurl中提取出路径名
// 对pathname做处理
if (pathname.startsWith('/public')) {
// 找到当前项目文件夹，再将相对路径转为绝对路径
let p = path.join(__dirname, pathname);
fs.readFile(p, (err, data) => {
if (err) {
res.writeHead(404, { 'Content-Type': 'text/html;charset=utf-8' });
res.end('404 Not Found');
} 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.writeHead(404, { 'Content-Type': 'text/html;charset=utf-8' });
res.end('404 Not Found');
} else {
res.end(data);
}
})
} else if (pathname == '/regist') {
let p = path.join(__dirname, 'views/regist.html');
fs.readFile(p, (err, data) => {
if (err) {
res.writeHead(404, { 'Content-Type': 'text/html;charset=utf-8' });
res.end('404 Not Found');
} else {
res.end(data);
}
})
} else if (pathname == '/login') {
let p = path.join(__dirname, 'views/login.html');
fs.readFile(p, (err, data) => {
if (err) {
res.writeHead(404, { 'Content-Type': 'text/html;charset=utf-8' });
res.end('404 Not Found');
} else {
res.end(data);
}
})
//已注册或已登录的情况：
} else if (pathname == '/doRegist') {
let query = querystring.parse(objurl.query); //将字符串参数解析成对象
let username = query.username;
let password = query.password;
if (users[username]) {
res.writeHead(500, { 'Content-Type': 'text/html;charset=utf-8' });
res.end('用户名已存在，不能注册！');
} else {
//因为users里面是一个对象。所以只能属性名=值的形式。故用户名 / 密码 为属性名 = 用户名的值 / 密码的值 为属性值
users[username] = password;
//利用JSON.stringify(users)将users对象转为字符串重新写到文件里去
fs.writeFile(path.join(__dirname, 'data/users.json'), JSON.stringify(users), (err) => {
if (err) {
res.writeHead(502, { 'Content-Type': 'text/html;charset=utf-8' });
res.end('注册失败');
} else {
res.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8' });
res.end('注册成功')
}
})
}
} 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('登录成功');
} else {
res.writeHead(502, { 'Content-Type': 'text/html;charset=utf-8' });
res.end('用户名或密码错误，登录失败');
}
} else if (pathname == '/list') {
//显示list用户列表是动态资源处理的内容。见我的下一篇博客
}
});
//启动服务器
server.listen(3000, '127.0.0.1', () => {
console.log('Server is running at http://127.0.0.1:3000');
})（3）结果显示
此时我的用户数据就显示在了我的data文件夹下的user.json上了
以上就是详解Node.js服务器静态资源处理的详细内容，更多关于Node.js服务器静态资源处理的资料请关注脚本之家其它相关文章！
相关文章
我们经常在卸载软件的时候会遇到有残留，这样就很难去重新下载，本篇文章就来介绍mac下彻底卸载node和npm及重新安装的方法，有需要的朋友可以借鉴参考下2021-09-09
下面小编就为大家带来一篇nodejs 搭建简易服务器的图文教程(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了node中实现删除目录的几种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
这篇文章主要为大家详细介绍了如何使用node.js实现对数据库进行CRUD（增删改查）操作,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下2024-12-12
Redis数据库采用极简的设计思想，最新版的源码包还不到2Mb。其在使用上也有别于一般的数据库。下面这篇文章就来给大家介绍了node.js利用redis数据库缓存数据的方法，需要的朋友可以参考借鉴，下面来一起看看吧。2017-03-03
安全是不容忽视的，每个开发者都知道它非常重要，真正严肃对待它的却没有几人。下面这篇文章主要给大家介绍了关于Node.js中不安全跳转如何防御的相关资料，文中通过示例代码介绍的非常详细。需要的朋友可以参考下2018-10-10
npm是 Nodejs 下的包管理器,在下载Node.js后自动安装,这篇文章主要介绍了node.js+npm安装配置的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2025-06-06
这篇文章主要介绍了node.js文件系统模块和两个重要模块，nodejs是JavaScript的后端运行环境，并对node.js的fs文件系统模块做了简单的介绍，需要的小伙伴可以参考一下2022-06-06
Yarn 就是一个类似于 npm 的包管理工具，它是由 facebook 推出并开源，与 npm 相比，yarn 有着众多的优势，主要的优势在于：速度快、离线模式、版本控制，这篇文章主要介绍了yarn的安装及使用教程,需要的朋友可以参考下2022-08-08
正如Node.js在官方说明文档中所言，插件是以动态方式进行链接的共享式对象，能够将JavaScript代码与C/C++库接驳起来。这意味着我们可以引用任何来自C/C++库中的内容，并通过创建插件的方式将其纳入到Node.js当中。2014-08-08
最新评论