快捷導(dǎo)航

詳解Node.js服務(wù)器靜態(tài)資源處理

更新時(shí)間：2024年04月25日 14:37:25 作者：想想aw

靜態(tài)資源服務(wù)器指的是不會(huì)被服務(wù)器的動(dòng)態(tài)運(yùn)行所改變或者生成的文件,本文主要為大家詳細(xì)介紹了Node.js服務(wù)器靜態(tài)資源處理的相關(guān)知識(shí),需要的可以了解下

一、什么是node.js服務(wù)器靜態(tài)資源

靜態(tài)資源服務(wù)器指的是不會(huì)被服務(wù)器的動(dòng)態(tài)運(yùn)行所改變或者生成的文件. 它最初在服務(wù)器運(yùn)行之前是什么樣子, 到服務(wù)器結(jié)束運(yùn)行時(shí), 它還是那個(gè)樣子. 比如平時(shí)寫的 js, css, html文件, 都可以算是靜態(tài)資源。

我的靜態(tài)服務(wù)器需要使用json文件作為數(shù)據(jù)存儲(chǔ)。并進(jìn)行json數(shù)據(jù)的讀取與寫入。

下面，我將以在服務(wù)器中實(shí)現(xiàn)注冊(cè)、登錄為例并將我已注冊(cè)的用戶數(shù)據(jù)寫到我的user.json中。

二、服務(wù)器處理靜態(tài)資源執(zhí)行思路

（1）將所有靜態(tài)資源統(tǒng)一放入一個(gè)文件夾中做統(tǒng)一處理

（2）在服務(wù)器端來處理pathname從而判斷url是否是我們請(qǐng)求的路徑

如何解析和格式化url查詢字符串？

Node.js 的 querystring 模塊：

1. 將字符串參數(shù)解析成對(duì)象

querystring.parse(url)

2. 將對(duì)象參數(shù)解析成字符串

querystring.stringify(urlObject)

三、靜態(tài)資源處理的判斷方法

startWith（以什么開頭）、indexOf、search、includes

四、執(zhí)行要求

靜態(tài)資源要求：完成注冊(cè)、登錄功能

動(dòng)態(tài)資源要求：完成注冊(cè)、登錄、已注冊(cè)的用戶列表展示功能

五、執(zhí)行代碼

node.js服務(wù)器靜態(tài)資源處理

（1）我們將首頁、登錄、注冊(cè)三個(gè)html靜態(tài)頁面和用戶列表users.html寫在views這個(gè)大文件夾下。css樣式和images圖片放入public這個(gè)大文件夾下。創(chuàng)建一個(gè)data大文件夾，data下面建一個(gè)users.json文件來專門存儲(chǔ)用戶數(shù)據(jù)

簡單寫一下首頁、注冊(cè)、登錄頁面的html靜態(tài)頁面的樣式。

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" >注冊(cè)</a>|<a href="/list" rel="external nofollow" >用戶列表</a>
</body>
</html>

regist.html 注冊(cè)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>注冊(cè)</title>
  <link rel="stylesheet" href="../public/css/main.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
</head>
<body>
  <h1>注冊(cè)</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="注冊(cè)"><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）測(cè)試代碼：

創(chuàng)建一個(gè)服務(wù)器，使服務(wù)器做出響應(yīng)的請(qǐng)求與響應(yīng)（重點(diǎn)：對(duì)解析后的url的pathname來做出不同的if判斷處理）

const http = require('http');
const fs = require('fs');
const path = require('path');
const url = require('url');
// 聲明一個(gè)專門存放所有用戶的變量
var users;
// 導(dǎo)入查詢參數(shù)的模塊
const querystring = require('querystring')
//創(chuàng)建服務(wù)器
const server = http.createServer();
//讀取文件。讀取user.json存放用戶數(shù)據(jù)的文件
fs.readFile(path.join(__dirname, 'data/users.json'), (err, data) => {
    if (err) {
        users = {};
    } else {
        users = JSON.parse(data.toString()); //如果讀取正確就將讀到的內(nèi)容轉(zhuǎn)換為一個(gè)對(duì)象存到users里
    }
})
//服務(wù)器做出請(qǐng)求響應(yīng)
// 設(shè)置服務(wù)器的監(jiān)聽器來響應(yīng)'request'事件。當(dāng)有人向服務(wù)器發(fā)送請(qǐng)求時(shí)，這個(gè)事件就會(huì)被觸發(fā)
server.on('request', (req, res) => {
    let objurl = url.parse(req.url); //將包含了客戶端請(qǐng)求的完整URL(req.url)轉(zhuǎn)為一個(gè)對(duì)象才能獲取到它的pathname
    let pathname = objurl.pathname;  //從解析后的URL對(duì)象objurl中提取出路徑名
    // 對(duì)pathname做處理
    if (pathname.startsWith('/public')) {
        // 找到當(dāng)前項(xiàng)目文件夾，再將相對(duì)路徑轉(zhuǎn)為絕對(duì)路徑
        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);
            }
        })
//已注冊(cè)或已登錄的情況：
    } else if (pathname == '/doRegist') {
        let query = querystring.parse(objurl.query); //將字符串參數(shù)解析成對(duì)象
        let username = query.username;
        let password = query.password;
        if (users[username]) {
            res.writeHead(500, { 'Content-Type': 'text/html;charset=utf-8' });
            res.end('用戶名已存在，不能注冊(cè)！');
        } else {
            //因?yàn)閡sers里面是一個(gè)對(duì)象。所以只能屬性名=值的形式。故用戶名 / 密碼 為屬性名 = 用戶名的值 / 密碼的值 為屬性值
            users[username] = password;
            //利用JSON.stringify(users)將users對(duì)象轉(zhuǎn)為字符串重新寫到文件里去
            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('注冊(cè)失敗');
                } else {
                    res.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8' });
                    res.end('注冊(cè)成功')
                }
            })
 
        }
 
    } 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('用戶名或密碼錯(cuò)誤，登錄失敗');
        }
    } else if (pathname == '/list') {
//顯示list用戶列表是動(dòng)態(tài)資源處理的內(nèi)容。見我的下一篇博客 
    }
});
//啟動(dòng)服務(wù)器
server.listen(3000, '127.0.0.1', () => {
    console.log('Server is running at http://127.0.0.1:3000');
})

（3）結(jié)果顯示