其他章節請看：
前端學習 node 快速入門 系列
初步認識 node
node 是什么
node（或者稱node.js）是 javaScript（以下簡稱js） 運行時的一個環境，不是一門語言，
以前 js 只能運行在瀏覽器中，瀏覽器中的 js 包含：bom（例如 window）、dom（例如 document）、ecmascript、js 引擎；現在 js 也可以運行在 node 中，node 中的 js 包含：ecmascript（服務端不操作頁面，所以不需要 bom 和 dom）和 js 引擎，
我們撰寫的 js 只是一些字串文本，只有 js 引擎才能識別和處理它們；js 引擎有很多種，chrome v8引擎是目前最好的，而且開源；node 的作者就是基于 chrome v8開發了一個 js 運行時環境，
node 能做什么
- 寫 web 服務器后臺（java，php 能做的，node也能做）
- 做專案構建工具，例如 webpack、vue-cli 都是用 node 寫的
- 做命令列工具，例如 hexo（一款快速、簡潔且高效的博客框架）就是用 node 寫的
- 用于桌面開發
安裝 node
進入 node 官網，來到下載頁面，下載對應平臺的 node 即可，我的是 windows 平臺，下載后傻瓜式（一路 next）安裝即可，安裝成功后配置一下環境變數（將 nodejs 的安裝目錄配置到 path 中），接著打開命令列工具，輸入 node --version，如果能輸出 node 的版本說明安裝成功，
node 有當前發布版本和長期支持版，前者包含最新特性，可用于學習，后者更穩定，下載頁面也有node 以往的版本的入口，可以從中下載特定版本的 node，
hello-world
創建一個 js 檔案，內容輸入 console.log('hello world')，保存檔案后，在命令列中輸入 node file-name 就運行了我們的第一個程式，
$ node 1.js
hello world
我們在瀏覽器中，通常會通過 F12 打開開發者工具，輸入一些測驗陳述句，例如 Array.isArray(1)，node 也有類似的環境，在命令列中輸入 node 回車，即可進入，請看示例（我的終端是Git Bash）：
$ node
Welcome to Node.js v12.18.1.
Type ".help" for more information.
> console.log(1+1)
2
undefined
> Math.max(1,3,5,7,-1)
7
> Array.isArray(1)
false
> window
Uncaught ReferenceError: window is not defined
> document
Uncaught ReferenceError: document is not defined
> typeof fs
'object'
> typeof http
'object'
>
如果需要退出控制臺，按 Ctrl + c 即可，
最簡單的讀寫檔案
需求：讀取某個檔案的內容并輸出到控制臺；將一段代碼寫入某檔案
這里我們只需要使用 node 的內置模塊 fs（檔案系統）中的兩個方法 readFile() 和 writeFile() 方法，
先實作讀取檔案，打開 readFile() 的 api，復制里面的代碼，微調，保存在 2.js 中：
// 匯入內置模塊 fs
const fs = require('fs')
// 讀取 1.js
// 1.js 中的內容是：console.log('hello world')
fs.readFile('1.js', (err, data) => {
if (err) throw err;
console.log(data.toString()); // {1}
});
在命令列中運行該檔案：
$ node 2
console.log('hello world')
如果不呼叫 toString() 方法（行{1}），則輸出的是十六進制 <Buffer 63 6f 6e 73 6f 6c 65 2e 6c 6f 67 28 27 68 65 6c 6c 6f 20 77 6f 72 6c 64 27 29>，
也可以指定編碼來讓它正常輸出，就像這樣：
...
fs.readFile('1.js', 'utf8', (err, data) => {
if (err) throw err;
console.log(data);
});
// 輸出：console.log('hello world')
寫檔案就很簡單了，找到 writeFile() 對應的api，微調，代碼如下：
const fs = require('fs')
const data = 'https://www.cnblogs.com/pengjiali/archive/2021/03/07/console.log(1+2)'
fs.writeFile('1.js', data, (err) => {
if (err) throw err;
console.log('The file has been saved!');
});
再次運行 $ node 2，然后驗證 1.js 檔案的內容是否已改成 console.log(1+2)
注：本系列教程只講大概5個內置核心模塊，不會詳細講解 node 的 API，API 是講不完的，在node 以往的版本中有每個版本對應的API檔案，本系列教程選用的API檔案是node 12.18.1，
最簡單的服務器
需求：啟動一個服務器，通過瀏覽器訪問能顯示 Hello-World
將以下代碼保存在一個 js 檔案中，用 node 運行后會啟動一個服務器，
const http = require('http')
const listenCallback = () => {
console.log('服務啟動成功')
}
const requestCallback = () => {
console.log('已接到您的請求...')
}
const server = http.createServer() // {1}
server.listen('3000', listenCallback) // {2}
server.on('request', requestCallback) // {3}
瀏覽器輸入 http://localhost:3000/ 即可訪問這個服務器，服務器接收到請求，會觸發 requestCallback 回呼，這個簡單的服務器由于沒有實作回應請求的功能，所以我們會看到瀏覽器會一直轉圈圈，等待服務器的回傳，
$ node 3.js
服務啟動成功
// 瀏覽器訪問服務器后輸出
已接到您的請求...
Tip:服務器就是一臺 24 小時不斷電的電腦，服務器上可能有多個應用，所以需要埠號來定位具體的應用；我們的瀏覽器與服務器通信時，瀏覽器也會開啟一個埠；我們測驗可以使用 3000、5000 這些沒被占用的埠號，
首先通過 http.createServer（行{1}）創建一個服務器，接著通過行 server.listen（行{2}）啟動 HTTP 服務器以偵聽連接，最后通過 server.on（行{3}）給服務器注冊 request 事件的回呼，
注：初次接觸 Node 的 api 可能會不太適應，筆者就有這種感受，首先 http.createServer() 方法沒有示例，只說回傳的是 http.Server 的實體；其次 server.listen() 的語法是從 http.Server 的父類 net.Server 中才找到 server.listen([port[, host[, backlog]]][, callback])；最后 .on() 到底是誰的方法？最初只在 http.Server 中找到 Event: 'request'，是告訴我 server 這個物件支持哪些事件嗎，最終在原始碼（我用的編輯器是vscode，直接點進去，就可以看到對應的原始碼，原始碼是用 typescript 寫的）中發現了下面的線索：
// createServer() 方法回傳 Server
function createServer(requestListener?: RequestListener): Server; // {1}
// Server 中有 addListener() 和 on()
class Server extends events.EventEmitter {
...
addListener(event: string, listener: (...args: any[]) => void): this; // {2}
...
on(event: string, listener: (...args: any[]) => void): this; // {3}
...
}
createServer() 方法回傳 Server，在 class Server 中 定義了 on() 方法，
此外，addListener()（行{2}）和 on()（行{3}）好像只是方法名不同，用 node 的控制臺做如下測驗，發現 on() 應該是 addListener() 的別名，
D:\>node
Welcome to Node.js v12.18.1.
> http.createServer().on === http.createServer().addListener
true
>
現在只差最后一步：給瀏覽器回傳資料，需要用到下面兩個方法：
response.write(chunk[, encoding][, callback])
- 這發送了回應主體的一部分，可以多次呼叫此方法以提供身體的連續部分
response.end([data[, encoding]][, callback])
- 此方法向服務器發出信號，指示所有回應頭和主體已發送，該服務器應認為此訊息已完成，必須在每個回應上呼叫方法response.end（）
接著添加服務器回應功能，將 Hello World 輸出到瀏覽器頁面，需要改動的代碼只有 requestCallback() 方法，請看示例：
...
const requestCallback = (req, res) => {
res.write('Hello World')
res.end()
}
...
到此，這個需求就做完了，
我們在此基礎上稍微擴展一下，
后端傳給前端的通常是 json 資料，模擬如下：
...
const requestCallback = (req, res) => {
const data = https://www.cnblogs.com/pengjiali/archive/2021/03/07/{
status: 200,
message:'成功',
data: {}
}
res.write(data)
res.end()
}
...
瀏覽器訪問后，發現 node 控制臺報錯，提示只能傳 String 或 Buffer 型別的資料，再次修改為 res.write(JSON.stringify(data))，重啟 node（每次修改完 node 代碼都需要重新重啟 node，后續不在重復說明），瀏覽器訪問頁面顯示 {"status":200,"message":"鎴愬姛","data":{}}，中文亂碼了，
雖然 write() 方法中默認編碼是 utf8，但瀏覽器的編碼默認是根據作業系統來，在中文作業系統中瀏覽器的編碼是 gbk，服務器和客戶端編碼格式不同，于是亂碼了，
既然瀏覽器的編碼是 gbk，那我將服務器這邊編碼指定為 gbk 是否就不會亂碼？修改代碼為 res.write(JSON.stringify(data), 'gbk')，結果瀏覽器頁面出不來了，瀏覽器控制臺輸出了一個錯誤資訊：net::ERR_INVALID_CHUNKED_ENCODING，
網上說 node 不支持 gbk，再次修改代碼為 res.write(JSON.stringify(data), 'base64')，訪問頁面，沒有了錯誤資訊，直接觸發了一個下載，
node 到底支持哪些編碼，又在哪里宣告的？
突然想到檔案中說 write() 方法只支持 String 和 Buffer兩種資料，于是在 Buffer 中看到 Buffer.isEncoding() 方法，作用是：如果 encoding 是支持的字符編碼的名稱，則回傳true；否則回傳false，
$ Buffer.isEncoding('utf-8')
true
$ Buffer.isEncoding('gbk')
false
$ Buffer.isEncoding('base64')
true
$
在 Buffer 原始碼中找到了支持的字符編碼，請看：
// Buffer class
type BufferEncoding = "ascii" | "utf8" | "utf-8" | "utf16le" | "ucs2" | "ucs-2" | "base64" | "latin1" | "binary" | "hex";
既然不能把 node 的編碼改為 gbk，那么我們就把瀏覽器的編碼改成 node 的編碼 utf8，請看代碼：
...
const requestCallback = (req, res) => {
...
/*
Content-type，決定瀏覽器以什么形式，什么編碼讀取這個檔案
格式：Content-Type：type/subtype;parameter
type：主型別，任意的字串，如text，如果是*號代表所有；
subtype：子型別，任意的字串，如html，如果是*號代表所有，用“/”與主型別隔開；
parameter：可選引數，如charset，boundary等，
檔案擴展名與 Content-type 對應關系可以在 w3school 中查閱
*/
res.setHeader('Content-type', 'text/html;charset=utf8') // {1}
res.write(data)
...
}
...
新增 res.setHeader()（行{1}），通過設定 Content-type 決定瀏覽器用什么編碼讀取這個檔案，若只輸入 charset=utf8，經測驗，仍舊亂碼，
如果給瀏覽器回傳一段 html 字串，瀏覽器會有什么表現？請看下面測驗：
// 提示：end() 如果指定了data，則等效于呼叫 write(data)，然后呼叫 end()
// test1：瀏覽器輸出：hello world 浣犲ソ
res.end('<h1>hello world 你好</h1>')
// test2：瀏覽器輸出：hello world 你好
res.setHeader('Content-type', 'text/html;charset=utf8')
res.end('<h1>hello world 你好</h1>')
// test3：瀏覽器輸出：<h1>hello world 你好</h1>
res.setHeader('Content-type', 'text/plain;charset=utf8')
res.end('<h1>hello world 你好</h1>')
test1 表明，node 不顯式宣告 Content-type，如果給瀏覽器回傳 html 字串，瀏覽器也能自動識別并渲染出來，效果與 test2 相同，
其他章節請看：
前端學習 node 快速入門 系列
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/267300.html
標籤：其他