快捷導(dǎo)航

Node.js實現(xiàn)解析post請求的方法詳解

更新時間：2024年04月26日 10:43:08 作者：想想aw

這篇文章主要為大家詳細介紹了Node.js實現(xiàn)解析post請求方法的相關(guān)知識,文中的示例代碼講解詳細,具有一定的學(xué)習(xí)價值,有需要的小伙伴可以了解下

前提

依舊以前面發(fā)的node.js服務(wù)器動態(tài)資源處理代碼具體見一文詳解Node.js服務(wù)器動態(tài)資源處理為模板，在這基礎(chǔ)上進行修改。與動態(tài)資源處理代碼不同的是，這次的用戶信息我們借用表單來實現(xiàn)。post請求解析來獲取和展示用戶表單填寫信息

代碼難點：

解析post請求方法一的重點在于——注冊和登錄表單在處理查詢參數(shù)（query）時使用了不同的方法。這是因為這兩種表單的處理方式在HTTP請求的結(jié)構(gòu)上有所不同。注冊表單使用的是post請求，登錄表單使用的是get請求。

在POST請求中，數(shù)據(jù)位于請求體中，而在GET請求中，數(shù)據(jù)位于URL的查詢字符串中。

具體要求：

完成注冊、登錄、已注冊的用戶表單展示功能（也就是表單填寫的用戶名、密碼、性別這三個信息。此處文件上傳功能方法一不能實現(xiàn)，如要實現(xiàn)文件上傳請見方法二）

一、解析post請求方法一介紹

因為Node.js 沒有提供直接解析POST請求提交的數(shù)據(jù)的模塊；

所以一般是通過request的data和end事件獲取請求報文中請求正文的內(nèi)容后再解析。

二、資源配置

（1）頁面配置

我們將首頁index.html、登錄login.html、注冊regist.html、用戶表單注冊信息users.html、錯誤提示模板頁面404.html這五個html頁面寫在views這個大文件夾下。樣式mian.css和圖片和表單提交的圖片分別放入public這個大文件夾下的css、images、head文件下。最后創(chuàng)建一個data大文件夾，data下面建一個user.json文件來專門存儲用戶數(shù)據(jù)。解析post請求方法一的服務(wù)器代碼我寫入serve.js下。后繼寫的解析post請求方法二的服務(wù)器代碼我將寫在serve2.js下。

用戶列表渲染功能index.html就是可以將我的user.json里面注冊成功的用戶表單數(shù)據(jù)渲染到我服務(wù)器用戶列表頁面

index.html頁面、login.html頁面、404.html頁面與我動態(tài)資源處理代碼里寫的一致，此處略寫。見一文詳解Node.js服務(wù)器動態(tài)資源處理

regist.html頁面：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>注冊</title>
  <link rel="stylesheet" href="../public/css/main.css">
</head>
<body>
  <h1>注冊</h1>
  <img src="../public/images/01.png" alt=""><br>
  <form method="post" action="/doRegist"> 
    <input type="text" name="username" placeholder="用戶名"><br>
    <input type="password" name="password" placeholder="密碼"><br>
    <input type="radio" name="gender" value="男" checked>男
    <input type="radio" name="gender" value="女">女<br>
    <input type="file" name="head" multiple><br>  
    <!-- multiple允許選擇多個文件 -->
    <input type="submit" value="注冊"><br> 
  </form>
</body>
</html>

users.html頁面：

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>用戶列表</title>
  <link rel="stylesheet" href="../public/css/main.css">
</head>
 
<body>
  <h1>用戶列表</h1>
  <img src="../public/images/01.png" alt=""><br>
  <table>
    <thead>
      <tr>
        <td>用戶名</td>
        <td>密碼</td>
        <td>性別</td>
        <td>頭像</td>
      </tr>
    </thead>
    <tbody>
      <!-- 遍歷json里的數(shù)組 -->
      <% for(var user of users){ %>
      <tr>
        <td><%= user.username %></td>
        <td><%= user.password %></td>
        <td><%= user.gender %></td>
        <td><img src="../public/head/<%= user.head %>" width="50"></td>
      </tr>
      <% } %>
    </tbody>
  </table>
</body>
 
</html>

（2）在我的測試代碼的終端 npm install underscore -save安裝underscore渲染模板引擎、npm install querystring安裝querystring查詢模塊

三、代碼實現(xiàn)

（1）測試代碼serve.js如下：

//serve.js 解析post請求 法一
// 通過request的data和end事件獲取請求報文中請求正文的內(nèi)容后再解析
const http = require('http');
const fs = require('fs');
const path = require('path');
const url = require('url');
// 導(dǎo)入查詢參數(shù)的模塊
const querystring = require('querystring');
// 聲明一個專門存放所有用戶的變量
var users;
// 導(dǎo)入underscore渲染模板
const _ = require('underscore');
//使用underscore渲染模板
function render(data){
  //讀取模板內(nèi)容
  let temp=fs.readFileSync(path.join(__dirname,'views/404.html'));
  // 獲取渲染函數(shù)
  let compiled=_.template(temp.toString());
  //渲染模板
  return compiled(data);
}
//讀取文件。讀取users.json存放的用戶數(shù)據(jù)文件
fs.readFile(path.join(__dirname,'data/users.json'),(err,data)=>{
  if(err){
     return;
  }else{
     //如果讀取正確就將讀到的內(nèi)容轉(zhuǎn)換為一個對象存到users里
     users=JSON.parse(data.toString());
  }
})
//創(chuàng)建服務(wù)器
const server=http.createSever();
//服務(wù)器做出請求響應(yīng)
server.on('request',(req,res)=>{
  //將url轉(zhuǎn)為一個對象才能獲取到它的pathname
  let objurl=url.parse(req.url);
  let pathname = objurl.pathname;
       // 對pathname做處理
       // 首先解決靜態(tài)資源處理  （判斷方法：startWith、indexOf、search、includes）
       // startsWith方法  以什么開頭
  if (pathname.startsWith('/public')) {
        // 找到當(dāng)前項目文件夾，再將相對路徑轉(zhuǎn)為絕對路徑
        let p = path.join(__dirname, pathname);
        fs.readFile(p, (err, data) => {
            if (err) {
                //可以使用中文，因為現(xiàn)在是html頁面去顯示的
                res.end(render({ msg: '訪問的文件不存在' })); 
            } 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'){
        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 == '/doLogin'){ //登錄表單
        let query = querystring.parse(objurl.query); //登錄表單通常使用GET請求。處理get請求方法一借助querystring模塊。querystring.parse（req.url.query) 將字符串參數(shù)解析成對象
        let username = query.username;
        let password = query.password;
        // 聲明一個變量result代表我的判斷結(jié)果
        let result = false;
        for (let user of users) {
            if (user.username == username && user.password == password) {
                result = true;
                break;
            }
        }
        if (result) {
            res.end(render({ msg: '登錄成功' }));
        } else {
            res.end(render({ msg: '用戶名或密碼錯誤，登錄失敗' }));
        }
    }else if(pathname == '/doRegist' && req.method.toLowerCase() == 'post'){ //注冊表單 此處為post請求解析過程。最重要。注意
        let chunk = '';  //chunk是一個字符串對象，是為了收集或緩存從請求中傳入的數(shù)據(jù)
        req.on('data', (data) => { //事件監(jiān)聽器，它監(jiān)聽req上的data事件。當(dāng)HTTP請求體中有數(shù)據(jù)可讀時，這個事件就會被觸發(fā)
            chunk += data; //當(dāng)data事件被觸發(fā)時，它會執(zhí)行這個函數(shù)。函數(shù)內(nèi)部，它將傳入的數(shù)據(jù)data追加到churk字符串上。這意味著，隨著數(shù)據(jù)逐漸流入，churk將積累所有的數(shù)據(jù)。
        });
        req.on('end', () => {
            // 上面讀取完畢開始注冊操作
            let query=querystring.parse(chunk); // //使用POST請求時，請求體（req.body）包含要發(fā)送到服務(wù)器的數(shù)據(jù),而不是URL的查詢字符串（req.url）. 因此，我們需要監(jiān)聽data和end事件來收集從請求體中傳入的數(shù)據(jù)。在data事件中，我將傳入的數(shù)據(jù)片段添加到chunk變量中，然后在end事件中，解析這個chunk（通常是一個Buffer或字符串），以獲取查詢參數(shù)
            let username=query.username;
            let password=query.password;
            let gender=query.gender;
            let user={
                username:username,
                password:password,
                gender:gender,
                head:''
            }
            users.push(user);
            fs.writeFile(path.join(__dirname,'data/users.json'),JSON.stringify(users),(err)=>{
                if(err){
                    res.end(render({msg:'注冊失敗'}));
                }else{
                    // 注冊成功
                    // 重定向(服務(wù)器端主動發(fā)起一個請求)到登錄頁面
                    res.writeHead(302,{'Location':'/login'});
                    res.end();
                }
            })
 
        });
    }else if(pathname == '/list'){
let p = path.join(__dirname, 'views/users.html');
        fs.readFile(p, (err, data) => {
            if (err) {
                res.end(render({ msg: '訪問的文件不存在' }));
            } else {
                //獲得渲染函數(shù) 
                let compiled = _.template(data.toString());
                // 調(diào)用渲染函數(shù)來生成html內(nèi)容
                let html = compiled({ users: users }); //我們在模板里取的是users的屬性， 
                所以不能簡寫成users，而是users：users
                res.end(html);
 
            }
        })
    }
});
 
//啟動監(jiān)聽
server.listen(3000, '127.0.0.1', () => {
    console.log('Server is running at http://127.0.0.1:3000');
})

重難點：

注意：解析post請求方法一的重點在于——注冊和登錄表單在處理查詢參數(shù)（query）時使用了不同的方法。這是因為這兩種表單的處理方式在HTTP請求的結(jié)構(gòu)上有所不同。

注冊表單（POST請求）：

當(dāng)您提交注冊表單時，通常使用POST請求，因為它涉及到向服務(wù)器發(fā)送數(shù)據(jù)（在這種情況下是注冊信息）。

當(dāng)您使用POST請求時，請求體（req.body）包含要發(fā)送到服務(wù)器的數(shù)據(jù)，而不是URL的查詢字符串（req.url）。

因此，您需要監(jiān)聽data和end事件來收集從請求體中傳入的數(shù)據(jù)。在data事件中，您將傳入的數(shù)據(jù)片段添加到chunk變量中，然后在end事件中，您解析這個chunk（通常是一個Buffer或字符串），以獲取查詢參數(shù)。

登錄表單（GET請求）：

登錄表單通常使用GET請求，因為它不涉及向服務(wù)器發(fā)送大量數(shù)據(jù)。相反，它可能只是請求用戶信息（如用戶名和密碼）來驗證用戶身份。

在GET請求中，請求參數(shù)被附加到URL的末尾，并作為查詢字符串出現(xiàn)。

由于查詢字符串是URL的一部分，您可以直接從req.url中獲取它，并使用querystring.parse()來解析它。您使用的url.parse(req.url)方法會返回一個對象，其中包含URL的不同部分，包括查詢字符串，然后您可以使用querystring.parse()來解析查詢字符串。

總之，注冊和登錄表單在處理查詢參數(shù)時使用不同的方法，因為它們使用了不同類型的HTTP請求（POST和GET），并且數(shù)據(jù)在請求中的位置不同。

在POST請求中，數(shù)據(jù)位于請求體中，而在GET請求中，數(shù)據(jù)位于URL的查詢字符串中。