Koa 是一個新的 web 框架，由 Express 幕後的原班人馬打造， 致力於成為 web 應用和 API 開發領域中的一個更小、更富有表現力、更健壯的基石。 通過利用 async 函式，Koa 幫你丟棄回撥函式，並有力地增強錯誤處理。 Koa 並沒有捆綁任何中介軟體， 而是提供了一套優雅的方法，幫助您快速而愉快地編寫服務端應用程式。
建立專案
- 新建一個node-koa檔案，初始化資料夾
npm init -y
複製程式碼- 安裝相應依賴包
npm install koa --save // 安裝koa
npm install koa-router --save // 安裝 koa-router 處理路由的中間鍵
複製程式碼- 在 node-koa 檔案下新建一個app.js檔案，處理我們的內容
const Koa = require('koa') // 匯入 koa 模組
// 輔助模組必須依賴與 koa 模組才能使用
const router = require("./router") // 將路由模組抽離成為一個單獨的模組
const static = require('koa-static') // 匯入管理靜態資源的包
const koaBody = require('koa-body') // 匯入解析post請求資料的包
const { join } = require('path') // 匯入路徑模組
const cors = require('koa-cors') // 匯入解決跨域的包
const app = new Koa() // 引入的koa是一個建構函式，需要例項
// 將輔助模組繫結到koa的例項上
app
.use(cors()) // 解決跨域問題
.use(koaBody()) // 解析post請求資料
.use(static(join(__dirname, 'static'))) // 指定靜態資源的引用路徑是從static目錄開始的
.use(router.routes()) // koa-router模組規定
.use(router.allowedMethods()) // koa-router模組規定
.listen(3000) // 監聽 3000 埠
複製程式碼- 將路由模組抽離出來方便管理，根目錄下新建一個router檔案，然後新建一個index.js放置內容
const Router = require('koa-router') // 匯入 koa 路由管理模組 koa-router
const fs = require('fs') // 匯入檔案模組
const path = require('path')
const router = new Router() // 引入的koa-router是一個建構函式，需要例項
/**
* 規定設定一下介面
* 埠號：3000
* “/” 目錄訪問home頁面
* get 請求根目錄
*/
// 在正式專案的時候會把路由管理抽離出去一個單獨的模組，方便管理
router.get("/", async (ctx, next) => {
// 注意： 這裡直接讀取home.html是讀取不到的，需要去找到當前檔案的絕對路徑
ctx.body = fs.readFileSync(path.resolve(__dirname, 'home.html'), "utf8")
})
// 訪問home路由返回home頁面
router.get("/user", async (ctx, next) => {
console.log(ctx.method);
ctx.body = "只會番茄炒蛋"
})
// post請求 利用koa-body解析獲取post傳送的資料
router.post("/postData", async (ctx, next) => {
console.log(ctx.request.body) // 檢視post請求傳送的資料
ctx.body = ctx.request.body // 將post傳送的資料返回回去
})
module.exports = router
複製程式碼當我們訪問 "/" 根路徑的時候會自動讀取 home 頁面的內容返回出出去，home 頁面中引用了靜態css樣式，這是我們會發現有一個報錯資訊。
home.html頁面內容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/home.css">
</head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src='/js/home.js'></script>
<body>
<h1>我是根路徑返回的頁面</h1>
</body>
</html>
複製程式碼報錯資訊
- 這時候需要一個對應的中間鍵去管理這些靜態資源
// 通常情況下，會把所有的靜態資源的檔案放在一個統一的資料夾下，一般在根目錄建立一個static資料夾。
複製程式碼- 安裝 koa-static 包去管理靜態資源的路徑
npm i koa-static --save // 配置請看app.js檔案
複製程式碼路由模組的post請求
如果要拿到post請求的資料，需要安裝另外一個模組 koa-body 可以解析post請求的資料，監聽所有的post請求過來的資料，把資料解析好以後放到 ctx.request.body 上。
router.post("/postData", async (ctx, next) => {
console.log(ctx.request.body) // 檢視post請求傳送的資料
ctx.body = ctx.request.body // 將post請求傳送的資料返回
})
複製程式碼在home.html頁面引用的home.js內容如下
$(function () {
$(document).click(() => {
$.post("http://localhost:3000/postData",
{
name: "fanqie",
age: "18"
},
function (data, status) {
console.log(data);
console.log(status);
}
)
})
})
複製程式碼結果如下：
如何解決跨域問題？
koa-cors模組解決跨域問題
npm install koa-cors --save
複製程式碼將解決跨域的中間鍵掛載到koa例項上，配置請看app.js檔案。