Node基礎入門（三）：數據交互

時間 2020-04-19

標籤 node 基礎入門數據交互简体版

原文原文鏈接

上一篇《Node基礎入門（二）：模塊》html

數據是以報文爲載體在瀏覽器與服務器之間傳輸的，報文（message）是網絡中交換與傳輸的數據單元，即站點一次性要發送的數據塊，它由三個部分組成：node

起始行：報文的第一行就是起始行。請求報文的起始行描述服務器應該執行的操做和HTTP的版本，響應報文的起始行承載了狀態信息和操做產生的結果數據；
首部：起始行後面有零個或多個首部字段。每一個首部字段都包含一個名值對，首部以一個空行結束；
主體：空行以後就是可選的報文主體，其中包含了全部類型的數據。請求主體中包括了要發送給Web服務器的數據；響應主體中裝載了要返回給客戶端的數據。起始行和首部都是文本形式且都是結構化的，而主體則不一樣，主體中能夠包含任意的二進制數據（好比圖片、視頻、音頻、軟件程序）。固然，主體中也能夠包含文本。

下面分別用GET請求和POST請求實現一個登陸功能，先新建http文件夾，內部新建index.js、login.html兩個文件。數據庫

1、GET請求

只能傳輸少許數據（<32K，經過報文頭傳輸）。json

index.js：segmentfault

let http = require('http')

http.createServer((req, res) => {
  // 咱們先打印一下req.url，看看是什麼
  console.log(req.url)
}).listen(8080)

login.html：數組

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登陸</title>
</head>
<body>
<!--action：主機+端口+被訪頁面的名稱，method：get-->
<form action="http://localhost:8080/login" method="get">
  帳戶：<input type="text" name="username"><br>
  密碼：<input type="password" name="password"><br>
  <!--type爲submit，點擊後就會觸發上面的action-->
  <input type="submit" value="登陸">
</form>
</body>
</html>

雙擊login.html訪問該頁面，帳戶輸入zhangsan，密碼輸入123，點擊登陸，命令行打印：/login?username=zhangsan&password=123，說明GET請求下，表單數據經過報文頭傳輸。瀏覽器

url模塊

如何獲取問號後面字符串（即query）中的各項數據呢？若是經過字符串的split方法進行分割取值的話感受很麻煩，有沒有更好的辦法？其實Node提供了一個url模塊，index.js引入url：服務器

let http = require('http')
let url = require('url')

http.createServer((req, res) => {
  // 調用url的parse方法，傳入req.url
  console.log(url.parse(req.url))
}).listen(8080)

執行node index.js，login.html頁面輸入內容點擊登陸後，命令行打印：網絡

Url {
  protocol: null,
  slashes: null,
  auth: null,
  host: null,
  port: null,
  hostname: null,
  hash: null,
  search: '?username=zhangsan&password=123',
  query: 'username=zhangsan&password=123', // 注意query這一行
  pathname: '/login',
  path: '/login?username=zhangsan&password=123',
  href: '/login?username=zhangsan&password=123' }

index.js代碼作一個小改動：console.log(url.parse(req.url, true))，即在url.parse方法中添加一個參數true（表示將query字符串處理成對象形式），接着重複上面的步驟再執行一次，看命令行結果：函數

Url {
  ...
  query:
   [Object: null prototype] { username: 'zhangsan', password: '123' }, // 注意，這一行變了
  ...  
}

如今，能夠獲取到咱們須要的pathname和query了（以後再去數據庫裏匹配數據，該部分類容省略）

let {pathname, query} = url.parse(req.url, true)
console.log(pathname, query)

執行以後打印：

/login [Object: null prototype] { username: 'zhangsan', password: '123' }

2、POST請求

既能接收數據，又能提交數據（<2G，經過報文體傳輸）。採用POST請求傳輸的數據可能很大，因此Node是讓這些數據分段傳輸的，服務器接收到多個數據片斷後再拼接起來使用。

index.js:

let http = require('http')```
// 將post的數據從字符串類型轉化爲咱們須要的json類型
let querystring = require('querystring')

http.createServer((req, res) => {
  // Node提供的on方法表示事件監聽，'data'表示傳輸的每一個數據片斷，每傳輸一段就會執行一遍on('data')方法；
  // post請求發送的數據不只侷限於字符串，還有圖片或文件，因此回調函數以buffer這種二進制格式做爲參數；
  // 由於例子中傳輸的數據長度很小，只需一個片斷，可是實際生產中片斷不少，因此用數組result去承載全部的數據片斷
  let result = []
  req.on('data', buffer => {
    console.log(buffer) // No.1
    console.log(buffer.toString()) // No.2
    result.push(buffer)
  })
  // on('end')方法監聽傳輸完成，利用Bufer提供的concat方法把全部零碎片斷拼接起來
  req.on('end', () => {
    console.log(result) // No.3
    let data = Buffer.concat(result)
    console.log(data) // No.4
    console.log(data.toString()) // No.5
    console.log(querystring.parse(data.toString())) // No.6
  })
}).listen(8080)

login.html和上面的基本相同，只是將form標籤的method的值改成post。

啓動Node服務，登陸頁面輸入zhangsan和123點擊登陸，命令行打印：