前端學習 node 快速入門 系列 —— 簡易版 Apache
阿新 • • 發佈：2021-03-15
>其他章節請看：
>
>[前端學習 node 快速入門 系列][1]
## 簡易版 Apache
我們用 node 來實現一個簡易版的 Apache：**提供靜態資源訪問的能力**。
### 實現
直接上程式碼。
```javascript
- demo
- static // 靜態資原始檔夾
- index.html // 主頁
- 1.jpg
- 1.css
- 1.js
- index.js // 入口檔案
```
index.html：
```javascript
```
1.js 和 1.css：
```javascript
document.querySelector('section').innerHTML = '我來自js' // js
body{color:red} // css
```
index.js（入口檔案）：
```javascript
const http = require('http')
const fs = require('fs')
const server = http.createServer()
const requestListener = (req, res) => {
const url = req.url
// 如果url是 '/'，則返回主頁
if(url === '/'){
fs.readFile('./static/index.html', (err, data) => {
if (err) throw err;
res.end(data)
});
return
}
// 如果url不是 '/'，則返回資源（找不到資源則報 404）
fs.readFile('./static/' + url, (err, data) => {
if (err) {
res.writeHead(404, {'Content-type':'text/html;charset=utf8'})
res.end('沒有找到對應的資源')
}
res.end(data)
})
}
server.on('request', requestListener)
server.listen('3000', () => {
console.log('伺服器已啟動')
})
```
啟動伺服器：
```javascript
$ node index
```
檢驗伺服器是否能提供靜態資源訪問的能力。
```javascript
1. 瀏覽器輸入 http://localhost:3000/1.css
頁面顯示：body{color:red}
2. 瀏覽器輸入 http://localhost:3000/1.js
頁面顯示：document.querySelector('section').innerHTML = '鎴戞潵鑷猨s'（未指定編碼，所以中文亂碼。不礙事）
3. 瀏覽器輸入 http://localhost:3000/1.jpg
頁面顯示：1.jpg（正常顯示圖片）
```
3 種靜態資源都能正常響應。
訪問主頁：
```javascript
瀏覽器輸入：http://localhost:3000/index.html 或 http://localhost:3000/
頁面顯示：
歡迎來到首頁
圖片
我來自js
```
主頁和其中的圖片、css 以及 js 配合的非常完美。
*注*：中文亂碼的問題沒有出現。因為我們在 html 頁面中 使用了 `` 來指定編碼。
通常訪問不存在的資源會返回 404。請看：
```javascript
瀏覽器輸入：http://localhost:3000/2.css
頁面顯示：
沒有找到對應的資源
```
### 擴充套件
至此，我們的簡易版 apache 其實已經大功告成。在此基礎之上，我們再擴充套件一下。
#### 我的伺服器我做主
理解這一點很重要：**這個伺服器完全由我們做主**。
現在所有的請求都會進入 requestListener() 方法，如果 url 是 '/'，伺服器就返回主頁（index.html），否則就去 static 資料夾中讀取相應的資源，如果沒有找到對應的資源，就做 404 的處理。假如 requestListener() 是一個空方法，則說明我們的伺服器不提供任何服務。
#### 所有的請求都是 url
不要把 `http://localhost:3000/1.css` 中的 1.css 當成檔案路徑，而要當成 url，因為所有的請求都是 url。請看示例：
```javascript
const requestListener = (req, res) => {
...
if(url.endsWith('.myCss')){
url = url.replace('.myCss', '.css') // url 得宣告成 let
}
fs.readFile('./static/' + url, (err, data) => { // {1}
...
})
}
```
在 index.js 的 `fs.readFile('./static/'`（行{1}） 上面增加三行程式碼。
```javascript
瀏覽器輸入 http://localhost:3000/1.myCss
頁面顯示：body{color:red}
```
現在給伺服器傳送請求 `http://localhost:3000/1.myCss`，伺服器也會返回 1.css 檔案的內容。有些網站的 url 設計的非常**優雅**。請看：
```javascript
http://product.dangdang.com/29200520.html
// 更優雅
https://www.douban.com/group/topic/214827461/
```
#### 重定向
未登入的狀態去訪問頁面，通常會被重定向到首頁。我們來模擬一下：
```javascript
if(url.endsWith('.myCss')){
url = url.replace('.myCss', '.css')
res.writeHead(302, {'Location':'/'}) // {1}
// 行{1} 等價於下面兩行
// res.statusCode = '302'
// res.setHeader('Location', '/')
}
```
在 index.js 中增加 `res.writeHead(302, {'Location':'/'})`（行{1}），瀏覽器輸入 `http://localhost:3000/1.myCss`，頁面會重定向到主頁。
*注*：沒有後端開發經驗的學習 node 會比較吃力。比如重定向，我們想到的可能是通過呼叫一個重定向的方法來實現，而 node 寫起來更底層。
302 是臨時重定向。301 是**永久重定向**。請看示例：
```javascript
// 臨時重定向
Request URL: http://localhost:3000/1.myCss
Request Method: GET
Status Code: 302 Found
Request URL: http://localhost:3000/1.myCss
Request Method: GET
Status Code: 302 Found
// 永久重定向
Request URL: http://localhost:3000/1.myCss
Request Method: GET
Status Code: 301 Moved Permanently
Request URL: http://localhost:3000/1.myCss
Request Method: GET
Status Code: 301 Moved Permanently (from disk cache) // {1}
```
臨時重定向，瀏覽器每次都會去伺服器那裡；而永久重定向，第二次就不會去伺服器那裡，而是直接在瀏覽器端重定向過去（行{1}）
#### 自動重啟服務
每次修改入口檔案，都需要重新啟動伺服器（執行 `node index`），非常麻煩。
可以通過 **nodemon** 來幫助我們自動重啟服務。
```javascript
// 全域性安裝 nodemon。
$ npm install --global nodemon
// 一定要全域性安裝 nodemon。否則執行 nodemon -v 會報錯。
$ nodemon -v
// 執行入口檔案。
$ nodemon index // {1}
```
使用 nodemon 非常簡單。通過 npm 全域性安裝後，用 nodemon 代替 node（行{1}）執行入口檔案即可。
*注*：筆者還嘗試了 supervisor，感覺沒有 nodemon 好用。比如我輸入 `let a = `（處在一個語法錯誤的狀態）然後儲存，supervisor 會退出服務，而 nodemon 只是報錯，仍會繼續監聽。
>其他章節請看：
>
>[前端學習 node 快速入門 系列][1]
[1]: https://www.cnblogs.com/pengjiali/p/14494587.html '前端學習 node 快速入門
歡迎來到首頁
```
1.js 和 1.css：
```javascript
document.querySelector('section').innerHTML = '我來自js' // js
body{color:red} // css
```
index.js（入口檔案）：
```javascript
const http = require('http')
const fs = require('fs')
const server = http.createServer()
const requestListener = (req, res) => {
const url = req.url
// 如果url是 '/'，則返回主頁
if(url === '/'){
fs.readFile('./static/index.html', (err, data) => {
if (err) throw err;
res.end(data)
});
return
}
// 如果url不是 '/'，則返回資源（找不到資源則報 404）
fs.readFile('./static/' + url, (err, data) => {
if (err) {
res.writeHead(404, {'Content-type':'text/html;charset=utf8'})
res.end('沒有找到對應的資源')
}
res.end(data)
})
}
server.on('request', requestListener)
server.listen('3000', () => {
console.log('伺服器已啟動')
})
```
啟動伺服器：
```javascript
$ node index
```
檢驗伺服器是否能提供靜態資源訪問的能力。
```javascript
1. 瀏覽器輸入 http://localhost:3000/1.css
頁面顯示：body{color:red}
2. 瀏覽器輸入 http://localhost:3000/1.js
頁面顯示：document.querySelector('section').innerHTML = '鎴戞潵鑷猨s'（未指定編碼，所以中文亂碼。不礙事）
3. 瀏覽器輸入 http://localhost:3000/1.jpg
頁面顯示：1.jpg（正常顯示圖片）
```
3 種靜態資源都能正常響應。
訪問主頁：
```javascript
瀏覽器輸入：http://localhost:3000/index.html 或 http://localhost:3000/
頁面顯示：
歡迎來到首頁
圖片
我來自js
```
主頁和其中的圖片、css 以及 js 配合的非常完美。
*注*：中文亂碼的問題沒有出現。因為我們在 html 頁面中 使用了 `` 來指定編碼。
通常訪問不存在的資源會返回 404。請看：
```javascript
瀏覽器輸入：http://localhost:3000/2.css
頁面顯示：
沒有找到對應的資源
```
### 擴充套件
至此，我們的簡易版 apache 其實已經大功告成。在此基礎之上，我們再擴充套件一下。
#### 我的伺服器我做主
理解這一點很重要：**這個伺服器完全由我們做主**。
現在所有的請求都會進入 requestListener() 方法，如果 url 是 '/'，伺服器就返回主頁（index.html），否則就去 static 資料夾中讀取相應的資源，如果沒有找到對應的資源，就做 404 的處理。假如 requestListener() 是一個空方法，則說明我們的伺服器不提供任何服務。
#### 所有的請求都是 url
不要把 `http://localhost:3000/1.css` 中的 1.css 當成檔案路徑，而要當成 url，因為所有的請求都是 url。請看示例：
```javascript
const requestListener = (req, res) => {
...
if(url.endsWith('.myCss')){
url = url.replace('.myCss', '.css') // url 得宣告成 let
}
fs.readFile('./static/' + url, (err, data) => { // {1}
...
})
}
```
在 index.js 的 `fs.readFile('./static/'`（行{1}） 上面增加三行程式碼。
```javascript
瀏覽器輸入 http://localhost:3000/1.myCss
頁面顯示：body{color:red}
```
現在給伺服器傳送請求 `http://localhost:3000/1.myCss`，伺服器也會返回 1.css 檔案的內容。有些網站的 url 設計的非常**優雅**。請看：
```javascript
http://product.dangdang.com/29200520.html
// 更優雅
https://www.douban.com/group/topic/214827461/
```
#### 重定向
未登入的狀態去訪問頁面，通常會被重定向到首頁。我們來模擬一下：
```javascript
if(url.endsWith('.myCss')){
url = url.replace('.myCss', '.css')
res.writeHead(302, {'Location':'/'}) // {1}
// 行{1} 等價於下面兩行
// res.statusCode = '302'
// res.setHeader('Location', '/')
}
```
在 index.js 中增加 `res.writeHead(302, {'Location':'/'})`（行{1}），瀏覽器輸入 `http://localhost:3000/1.myCss`，頁面會重定向到主頁。
*注*：沒有後端開發經驗的學習 node 會比較吃力。比如重定向，我們想到的可能是通過呼叫一個重定向的方法來實現，而 node 寫起來更底層。
302 是臨時重定向。301 是**永久重定向**。請看示例：
```javascript
// 臨時重定向
Request URL: http://localhost:3000/1.myCss
Request Method: GET
Status Code: 302 Found
Request URL: http://localhost:3000/1.myCss
Request Method: GET
Status Code: 302 Found
// 永久重定向
Request URL: http://localhost:3000/1.myCss
Request Method: GET
Status Code: 301 Moved Permanently
Request URL: http://localhost:3000/1.myCss
Request Method: GET
Status Code: 301 Moved Permanently (from disk cache) // {1}
```
臨時重定向，瀏覽器每次都會去伺服器那裡；而永久重定向，第二次就不會去伺服器那裡，而是直接在瀏覽器端重定向過去（行{1}）
#### 自動重啟服務
每次修改入口檔案，都需要重新啟動伺服器（執行 `node index`），非常麻煩。
可以通過 **nodemon** 來幫助我們自動重啟服務。
```javascript
// 全域性安裝 nodemon。
$ npm install --global nodemon
// 一定要全域性安裝 nodemon。否則執行 nodemon -v 會報錯。
$ nodemon -v
// 執行入口檔案。
$ nodemon index // {1}
```
使用 nodemon 非常簡單。通過 npm 全域性安裝後，用 nodemon 代替 node（行{1}）執行入口檔案即可。
*注*：筆者還嘗試了 supervisor，感覺沒有 nodemon 好用。比如我輸入 `let a = `（處在一個語法錯誤的狀態）然後儲存，supervisor 會退出服務，而 nodemon 只是報錯，仍會繼續監聽。
>其他章節請看：
>
>[前端學習 node 快速入門 系列][1]
[1]: https://www.cnblogs.com/pengjiali/p/14494587.html '前端學習 node 快速入門