前言

之前介紹過很多前端向後端介面傳送請求拿資料的例子，今天來介紹一下node為web提供的服務，提供介面給前端拿資料

http

建立服務

“Node HTTP”通常指的是在 Node.js 環境中用於處理 HTTP（超文字傳輸協議）相關操作的模組或功能。

Node.js 中的 http 模組提供了建立 HTTP 伺服器和處理 HTTP 請求與響應的能力。透過這個模組，可以編寫伺服器端的程式碼來監聽特定的埠，接收客戶端的請求，並返回相應的響應。

官方文件：首頁 | Node.js v22 文件 (nodejs.cn)

const http = require('http')
const server = http.createServer((req, res) => {
    
    res.end('hello node')
})

server.listen(3000,()=>{
    console.log('server is running at http://127.0.0.1:3000')
})

• 由於我們在npm init -y之後生成的專案描述檔案中，沒有更改type，預設模組化規則是commonJS，因此導包的方式還是require，如果type改成module，規則就是ES6之後的模組化方式import xxx

• 在上述程式碼中，建立了一個監聽在 3000 埠的伺服器，當有請求到達時，返回“hello node”的響應。

url

在 Node.js 中，url 模組用於處理和解析 URL 相關的操作。

它提供了一些方法和函式來提取 URL 的各個部分，例如協議、主機名、埠、路徑、查詢引數等。

例如，可以使用 url.parse() 方法來解析 URL 字串，並獲取其組成部分。

const http = require('http')
const url = require('url')
const server = http.createServer((req, res) => {
    const reqUrl = url.parse(req.url)
    if (reqUrl.pathname === '/') {
        res.end('hello world')
    } else {
        res.end('404 not found')
    }
})

server.listen(3000, () => {
    console.log('server is running at http://127.0.0.1:3000')
})

當我們列印一下reqUrl的結果時：

path和pathnanme的區別

path 包含了整個請求路徑，包括查詢字串部分。例如，對於 URL https://example.com/page?param=value ，path 的值為 /page?param=value 。

pathname 則僅包含路徑部分，不包含查詢字串。對於上述同樣的 URL，pathname 的值為 /page 。

總的來說，path 涵蓋的範圍更廣，包含了查詢部分；而 pathname 則只專注於路徑本身。

設定請求頭

思考：當瀏覽器返回響應是一個標籤呢？如何把標籤渲染到瀏覽器上？

const http = require('http')
const url = require('url')
const server = http.createServer((req, res) => {
    const reqUrl = url.parse(req.url)
    if (reqUrl.pathname === '/') {
        res.end('<h2>你好</h2>')
    } else {
        res.end('404 not found')
    }
})

server.listen(3000, () => {
    console.log('server is running at http://127.0.0.1:3000')
})

可以看見響應上還是一個字串xxxxx，說明瀏覽器還是把它當成普通字串來處理了，因此我們可以攜帶一個響應頭，告訴瀏覽器這是html標籤。

const http = require('http')
const url = require('url')
const server = http.createServer((req, res) => {
    const reqUrl = url.parse(req.url)
    if (reqUrl.pathname === '/') {
        res.writeHead(200, {
            'Content-Type': 'text/html;charset=utf8'
        })
        res.end('<h2>你好</h2>')
    } else {
        res.end('404 not found')
    }
})

server.listen(3000, () => {
    console.log('server is running at http://127.0.0.1:3000')
})

外掛/postman/apifox

思考：當我們訪問/user時，返回一個Json物件呢？

const http = require('http')
const url = require('url')
const server = http.createServer((req, res) => {
    const data = {
        name: '張三',
        age: 18,
        sex: '男'
    }
    const reqUrl = url.parse(req.url)
    if (reqUrl.pathname === '/') {
        res.writeHead(200, {
            'Content-Type': 'text/html;charset=utf8'
        })
        res.end('<h2>你好</h2>')
    } else if (reqUrl.pathname === '/user') {
        res.writeHead(200, {
            'Content-Type': 'application/json;charset=utf8'
        })
        res.end(JSON.stringify(data))
    } else {
        res.end('404')
    }
})

server.listen(3000, () => {
    console.log('server is running at http://127.0.0.1:3000')
})

• 如此一來，中文也能支援了，並且能以json物件的格式輸出

• 如果你想更加美觀，你也可以在谷歌擴充套件中安裝一些json外掛，比如jsonvue。

• 再或者，你也可以透過postman或者apifox軟體，對介面進行測試，看是否能拿到資料

跳轉至404頁面

思考：當訪問的路徑不存在，我們想跳轉到404頁面怎麼辦？

const http = require('http')
const url = require('url')
const fs = require('fs')
const path = require('path')

const server = http.createServer((req, res) => {
    const data = {
        name: '張三',
        age: 18,
        sex: '男'
    }
    const reqUrl = url.parse(req.url)
    if (reqUrl.pathname === '/') {
        res.writeHead(200, {
            'Content-Type': 'text/html;charset=utf8'
        })
        res.end('<h2>你好</h2>')
    } else if (reqUrl.pathname === '/user') {
        res.writeHead(200, {
            'Content-Type': 'application/json;charset=utf8'
        })
        res.end(JSON.stringify(data))
    } else if (req.method === 'POST' && reqUrl.pathname === '/login') {
        // 拿到前端傳遞的引數
        // 去資料庫校驗引數的合法性
        res.end('登入成功')
    } else {
        // res.end('404')
        const _path = path.resolve(__dirname, 'assets/404.html')
        const content = fs.readFileSync(_path, { encoding: 'utf8' })
        // console.log(content);
        res.writeHead(404, {
            'Content-Type': 'text/html;charset=utf8'
        })
        res.end(content)
    }
})

server.listen(3000, () => {
    console.log('server is running at http://127.0.0.1:3000')
})

• __dirname讀取當前檔案的根目錄

• path.resolve(xxx,xxx)做字串拼接。

koa

當有一百個介面，難道我們寫一百個if else嗎？因此接下來我們引入一個輕量級的Web應用框架。它致力於提供一個更小、更富有表現力、更健壯的 Web 應用和 API 開發體驗。

Koa 利用了 async/await 語法，使得非同步程式碼的編寫更加清晰和簡潔。與傳統的回撥函式方式相比，大大提高了程式碼的可讀性和可維護性。

其主要特點包括：

1. 輕量級：核心模組非常簡潔，只提供了最基本的功能，開發者可以根據需求選擇和新增中介軟體。

2. 中介軟體機制：透過一系列中介軟體來處理請求和響應，中介軟體的執行順序按照新增的順序依次進行。

3. 錯誤處理：提供了更優雅和方便的錯誤處理方式。

Koa 廣泛應用於構建各種型別的 Web 應用，包括但不限於網站、API 服務等。

安裝

npm i koa 
npm i koa-router

建立app.js,建立router資料夾下建立user.js做路由

app.js

const Koa = require('koa');
const app = new Koa();
const router = require('./router/user.js')

app.use(router.routes())



app.listen(3001, () => {
    console.log('app is running on 3001 port');
});

user.js

const router = require('koa-router')()

router.get('/user', (ctx) => {
    ctx.body = {
        name: 'user',
        age: 18
    }
})

module.exports = router

如果還有其他的介面，就繼續建立其他的路由，最後將這個router丟擲，然後在app.js中use掉router的routes的呼叫