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

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

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

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

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

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

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

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

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

（2）在服務器端來處理pathname從而判斷url是否是我們請求的路徑

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

Node.js 的 querystring 模塊：

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

querystring.parse(url)

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

querystring.stringify(urlObject)

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

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

四、執(zhí)行要求

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

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

五、執(zhí)行代碼

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

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

簡單寫一下首頁、注冊、登錄頁面的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" >注冊</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>

<!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）測試代碼：

創(chuàng)建一個服務器，使服務器做出響應的請求與響應（重點：對解析后的url的pathname來做出不同的if判斷處理）

const http = require('http');
const fs = require('fs');
const path = require('path');
const url = require('url');
// 聲明一個專門存放所有用戶的變量
var users;
// 導入查詢參數(shù)的模塊
const querystring = require('querystring')
//創(chuàng)建服務器
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)換為一個對象存到users里
    }
})
//服務器做出請求響應
// 設(shè)置服務器的監(jiān)聽器來響應'request'事件。當有人向服務器發(fā)送請求時，這個事件就會被觸發(fā)
server.on('request', (req, res) => {
    let objurl = url.parse(req.url); //將包含了客戶端請求的完整URL(req.url)轉(zhuǎn)為一個對象才能獲取到它的pathname
    let pathname = objurl.pathname;  //從解析后的URL對象objurl中提取出路徑名
    // 對pathname做處理
    if (pathname.startsWith('/public')) {
        // 找到當前項目文件夾，再將相對路徑轉(zhuǎn)為絕對路徑
        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); //將字符串參數(shù)解析成對象
        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對象轉(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('注冊失敗');
                } 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用戶列表是動態(tài)資源處理的內(nèi)容。見我的下一篇博客 
    }
});
//啟動服務器
server.listen(3000, '127.0.0.1', () => {
    console.log('Server is running at http://127.0.0.1:3000');
})

（3）結(jié)果顯示