快捷導(dǎo)航

Node.js實(shí)現(xiàn)解析post請(qǐng)求的方法詳解

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

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

前提

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

代碼難點(diǎn)：

解析post請(qǐng)求方法一的重點(diǎn)在于——注冊(cè)和登錄表單在處理查詢(xún)參數(shù)（query）時(shí)使用了不同的方法。這是因?yàn)檫@兩種表單的處理方式在HTTP請(qǐng)求的結(jié)構(gòu)上有所不同。注冊(cè)表單使用的是post請(qǐng)求，登錄表單使用的是get請(qǐng)求。

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

具體要求：

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

一、解析post請(qǐng)求方法一介紹

因?yàn)镹ode.js 沒(méi)有提供直接解析POST請(qǐng)求提交的數(shù)據(jù)的模塊；

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

二、資源配置

（1）頁(yè)面配置

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

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

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

regist.html頁(yè)面：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>注冊(cè)</title>
  <link rel="stylesheet" href="../public/css/main.css">
</head>
<body>
  <h1>注冊(cè)</h1>
  <img src="../public/images/01.png" alt=""><br>
  <form method="post" action="/doRegist"> 
    <input type="text" name="username" placeholder="用戶(hù)名"><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允許選擇多個(gè)文件 -->
    <input type="submit" value="注冊(cè)"><br> 
  </form>
</body>
</html>

users.html頁(yè)面：

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>用戶(hù)列表</title>
  <link rel="stylesheet" href="../public/css/main.css">
</head>
 
<body>
  <h1>用戶(hù)列表</h1>
  <img src="../public/images/01.png" alt=""><br>
  <table>
    <thead>
      <tr>
        <td>用戶(hù)名</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）在我的測(cè)試代碼的終端 npm install underscore -save安裝underscore渲染模板引擎、npm install querystring安裝querystring查詢(xún)模塊

三、代碼實(shí)現(xiàn)

（1）測(cè)試代碼serve.js如下：

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

重難點(diǎn)：

注意：解析post請(qǐng)求方法一的重點(diǎn)在于——注冊(cè)和登錄表單在處理查詢(xún)參數(shù)（query）時(shí)使用了不同的方法。這是因?yàn)檫@兩種表單的處理方式在HTTP請(qǐng)求的結(jié)構(gòu)上有所不同。

注冊(cè)表單（POST請(qǐng)求）：

當(dāng)您提交注冊(cè)表單時(shí)，通常使用POST請(qǐng)求，因?yàn)樗婕暗较蚍?wù)器發(fā)送數(shù)據(jù)（在這種情況下是注冊(cè)信息）。

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

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

登錄表單（GET請(qǐng)求）：

登錄表單通常使用GET請(qǐng)求，因?yàn)樗簧婕跋蚍?wù)器發(fā)送大量數(shù)據(jù)。相反，它可能只是請(qǐng)求用戶(hù)信息（如用戶(hù)名和密碼）來(lái)驗(yàn)證用戶(hù)身份。

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

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

總之，注冊(cè)和登錄表單在處理查詢(xún)參數(shù)時(shí)使用不同的方法，因?yàn)樗鼈兪褂昧瞬煌?lèi)型的HTTP請(qǐng)求（POST和GET），并且數(shù)據(jù)在請(qǐng)求中的位置不同。

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

（2）運(yùn)行結(jié)果如圖所示

到此這篇關(guān)于Node.js實(shí)現(xiàn)解析post請(qǐng)求的方法詳解的文章就介紹到這了,更多相關(guān)Node.js解析post請(qǐng)求內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: