Koa 框架常用知識點整理

来源:https://www.cnblogs.com/rope/archive/2019/03/29/10623678.html
-Advertisement-
Play Games

簡介 "Koa" 就是一種簡單好用的 Web 框架。它的特點是優雅、簡潔、表達力強、自由度高。本身代碼只有1000多行，所有功能都通過插件實現。 學前準備 檢查Nodejs版本 打開cmd命令行視窗 註意：Koa 必須使用 7.6 以上的版本。如果你的版本低於這個要求，就要先升級 Node。 "配套 ...


img

簡介

Koa 就是一種簡單好用的 Web 框架。它的特點是優雅、簡潔、表達力強、自由度高。本身代碼只有1000多行，所有功能都通過插件實現。

學前準備

檢查Nodejs版本

打開cmd命令行視窗node -v
註意：Koa 必須使用 7.6 以上的版本。如果你的版本低於這個要求，就要先升級 Node。
配套案例

一、基本用法

1.1 三行代碼架設HTTP服務

npm install koa

  const Koa = require('koa');
  const app = new Koa();
  app.listen(3000);

1.2 Context 對象

Koa 提供一個 Context 對象，表示一次對話的上下文（包括 HTTP 請求和 HTTP 回覆）。通過加工這個對象，就可以控制返回給用戶的內容。

Context 對象所包含的：

context

const Koa = require('koa')
const app = new Koa()

app.use((ctx, next) => {
    //ctx是整個應用的上下文，包含常用的request、response
    //ctx.response代表 HTTP Response。同樣地，ctx.request代表 HTTP Request。
    //ctx.response.body可以簡寫成ctx.body
    ctx.response.body = 'hello world'
})

app.listen(3000)

1.3 HTTP Response 的類型

Koa 預設的返回類型是text/plain （純文本的形式），如果想返回其他類型的內容，可以先用ctx.request.accepts判斷一下，客戶端希望接受什麼數據（根據 HTTP Request 的Accept欄位），然後使用ctx.response.type指定返回類型。

const Koa = require('koa')
const app = new Koa()
//聲明一個main中間件，如果你急於瞭解中間件可以跳轉到（三）
const main = (ctx,next) =>{
if (ctx.request.accepts('json')) {
    ctx.response.type = 'json';
    ctx.response.body = { data: 'Hello World' };
  } else if (ctx.request.accepts('html')) {
    ctx.response.type = 'html';
    ctx.response.body = '<p>Hello World</p>';
  } else if (ctx.request.accepts('xml')) {
    ctx.response.type = 'xml';
    ctx.response.body = '<data>Hello World</data>';
  } else{
    ctx.response.type = 'text';
    ctx.response.body = 'Hello World';
  };
}; //直接運行頁面中會顯示json格式，因為我們沒有設置請求頭，所以每一種格式都是ok的。   

app.use(main)//app.use()用來載入中間件。
app.listen(3000)

1.4 網頁模板

實際開發中，返回給用戶的網頁往往都寫成模板文件。我們可以讓 Koa 先讀取模板文件，然後將這個模板返回給用戶。

關於fs.createReadStream

const fs = require('fs');
const Koa = require('koa');
const app = new Koa();

const main = ctx => {
    ctx.response.type = 'html';
    ctx.response.body = fs.createReadStream('./data/index.html');
};

app.use(main);
app.listen(3000);

二、路由

2.1 原生路由

const Koa = require('koa')
const app = new Koa()
app.use((ctx, next) => {
    if (ctx.request.url == '/') {//通過ctx.request.url獲取用戶請求路徑
        ctx.body = '<h1>首頁</h1>'
    } else if (ctx.request.url == '/my') {
        ctx.body = '<h1>聯繫我們</h1>'
    } else {
        ctx.body = '<h1>404 not found</h1>'
    }
})
app.listen(3000)

2.2 koa-router 模塊路由

npm中的koa-route

npm install koa-router

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

const app = new Koa()
const router = new Router()

app.use(router.routes()).use(router.allowedMethods());
//routes()返迴路由器中間件，它調度與請求匹配的路由。
//allowedMethods()處理的業務是當所有路由中間件執行完成之後,若ctx.status為空或者404的時候,豐富response對象的header頭.

router.get('/',(ctx,next)=>{//.get就是發送的get請求
  ctx.response.body = '<h1>首頁</h1>'
})
router.get('/my',(ctx,next)=>{
  ctx.response.body = '<h1>聯繫我們</h1>'
})

app.listen(3000)

2.3 靜態資源

如果網站提供靜態資源（圖片、字體、樣式表、腳本......），為它們一個個寫路由就很麻煩，也沒必要koa-static模塊封裝了這部分的請求。請看下麵的例子

npm中的koa-static

npm install koa-staic

const Koa = require('koa');
const app = new Koa();
const path = require('path');
const serve = require('koa-static');

const main = serve(path.join(__dirname));

app.use(main);
app.listen(3000);

訪問 http://localhost:3000/data/index.html，在瀏覽器里就可以看到這個文件的內容。

2.4 重定向跳轉

有些場合，伺服器需要重定向訪問請求。比如，用戶登陸以後，將他重定向到登陸前的頁面。ctx.response.redirect()方法可以發出一個跳轉，將用戶導向另一個路由。

const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const router = new Router()

app.use(router.routes()).use(router.allowedMethods());

router.get('/cdx',(ctx,next)=>{
  ctx.response.redirect('/');//發出一個跳轉，將用戶導向另一個路由。
})
router.get('/',(ctx,next)=>{
   ctx.body = 'Hello World';
})

app.listen(3000);

訪問 http://localhost:3000/cdx，瀏覽器會將用戶導向根路由。

三、中間件

3.1 Logger功能

Koa 的最大特色，也是最重要的一個設計，就是中間件。為了理解中間件，我們先看一下 Logger （列印日誌）功能的實現。

./logger/koa-logger.js

module.exports = (ctx, next) => {
    console.log(`${Date.now()} ${ctx.request.method} ${ctx.request.url}`);//自定義
}

./logger.js

const Koa = require('koa')
const koaLogger = require('./logger/koa-logger')
const app = new Koa();

app.use(koaLogger)
app.listen(3000)

列印結果logger

3.2中間件的概念

處在 HTTP Request 和 HTTP Response 中間，用來實現某種中間功能的函數，就叫做"中間件"。

基本上，Koa 所有的功能都是通過中間件實現的，前面例子裡面的main也是中間件。每個中間件預設接受兩個參數，第一個參數是 Context 對象，第二個參數是next函數。只要調用next函數，就可以把執行權轉交給下一個中間件。

多個中間件會形成一個棧結構，以"先進後出"的順序執行。

  1. 最外層的中間件首先執行。
  2. 調用next函數，把執行權交給下一個中間件。
  3. ...
  4. 最內層的中間件最後執行。
  5. 執行結束後，把執行權交回上一層的中間件。
  6. ...
  7. 最外層的中間件收回執行權之後，執行next函數後面的代碼。

例子：

const Koa = require('koa');
const app = new Koa();

app.use((ctx, next)=>{
  console.log('>> one');
  next();
  console.log('<< one');
})

app.use((ctx, next)=>{
  console.log('>> two');
  next(); 
  console.log('<< two');
})
app.use((ctx, next)=>{
  console.log('>> three');
  next();
  console.log('<< three');
})
app.listen(3000);

輸出結果：

中間件

如果中間件內部沒有調用next函數，那麼執行權就不會傳遞下去。

3.4 非同步中間件

迄今為止，所有例子的中間件都是同步的，不包含非同步操作。如果有非同步操作（比如讀取資料庫），中間件就必須寫成async 函數。

npm install fs.promised

npm中的fs.promised

const fs = require('fs.promised');
const Koa = require('koa');
const app = new Koa();

const main = async function (ctx, next) {
    ctx.response.type = 'html';
    ctx.response.body = await fs.readFile('./data/index.html', 'utf8');
};

app.use(main);
app.listen(3000);

上面代碼中，fs.readFile是一個非同步操作，必須寫成await fs.readFile()，然後中間件必須寫成 async 函數。

app.use(async(ctx, next)=>{
  ctx.body = '1'
  //延時2秒執行下一個中間件，這樣是沒用的，因為是非同步函數
  setTimeout(()=>{
      next()
  },2000)
  ctx.body += '2'
})

app.use(async(ctx, next)=>{
  ctx.body += '3'
  next()
  ctx.body += '4'
})


server.js正確做法
function delay(){
    return new Promise((reslove,reject)=>{
      setTimeout(()=>{
        reslove()
      },1000)
    })
}

app.use(async(ctx, next)=>{
  ctx.body = '1'
  await next()
  ctx.body += '2'
})

app.use(async(ctx, next)=>{
  ctx.body += '3'
  await delay()
await next()
  ctx.body += '4'
})

3.5 中間件的合成

koa-compose 模塊可以將多個中間件合成一個。

npm中的koa-compose

npm install koa-compose

const Koa = require('koa');
const compose = require('koa-compose');
const app = new Koa();

const logger = (ctx, next) => {
  console.log(`${Date.now()} ${ctx.request.method} ${ctx.request.url}`);
  next();
}

const main = ctx => {
  ctx.response.body = 'Hello World';
};

const middlewares = compose([logger, main]);//合成中間件

app.use(middlewares);//載入中間件
app.listen(3000);

輸出結果：先列印日誌，再在頁面中顯示Hello World

四、處理錯誤

4.1 500錯誤

如果代碼運行過程中發生錯誤，我們需要把錯誤信息返回給用戶。HTTP 協定約定這時要返回500狀態碼。Koa 提供了ctx.throw()方法，用來拋出錯誤，ctx.throw(500)就是拋出500錯誤。

const Koa = require('koa');
const app = new Koa();

const main = ctx => {
  ctx.throw(500);//這個時候你訪問首頁會報一個500的錯誤(內部伺服器錯誤)伺服器會報錯
};

app.use(main);
app.listen(3000);

500

4.2 404錯誤

如果將ctx.response.status設置成404，就相當於ctx.throw(404)，返回404錯誤。

const Koa = require('koa');
const app = new Koa();

const main = ctx => {
  ctx.response.status = 404;//response返回的狀態碼就是404
  ctx.response.body = 'Page Not Found';//讓頁面中顯示該內容，伺服器不不報錯
};

app.use(main);
app.listen(3000);

404

4.3 處理錯誤的中間件

為了方便處理錯誤，最好使用try...catch將其捕獲。但是，為每個中間件都寫try...catch太麻煩，我們可以讓最外層的中間件，負責所有中間件的錯誤處理。

const Koa = require('koa');
const app = new Koa();

const handler = async (ctx, next) => {
  try {
    await next();//執行下個中間件
  } catch (err) {
     //如果main中間件是有問題的會走這裡
    ctx.response.status = err.statusCode || err.status || 500;
    ctx.response.body = {
      message: err.message//把錯誤信息返回到頁面
    };
  }
};

const main = ctx => {
  ctx.throw(500);//如果這裡是沒有問題的就正常執行，如果有問題會走catach
};

app.use(handler);
app.use(main);
app.listen(3000);

解決錯誤

4.4 errors事件監聽

運行過程中一旦出錯，Koa 會觸發一個error事件。監聽這個事件，也可以處理錯誤。

const Koa = require('koa');
const app = new Koa();

const main = ctx => {
  ctx.throw(500);
};
app.on('error', (err, ctx) => {
   //如果有報錯的話會走這裡
  console.error('server error', err);//err是錯誤源頭
});

app.use(main);
app.listen(3000);

錯誤監聽

4.5 釋放error事件

需要註意的是，如果錯誤被try...catch捕獲，就不會觸發error事件。這時，必須調用ctx.app.emit()，手動釋放error事件，才能讓監聽函數生效。

const Koa = require('koa');
const app = new Koa();

const handler = async (ctx, next) => {
    try {
        await next();
    } catch (err) {
        ctx.response.status = err.statusCode || err.status || 500;
        ctx.response.type = 'html';
        ctx.response.body = '<p>有問題，請與管理員聯繫</p>';
        ctx.app.emit('error', err, ctx);//釋放error事件
    }
};

const main = ctx => {
    ctx.throw(500);
};

app.on('error', function (err) {
    //釋放error事件後這裡的監聽函數才可生效
    console.log('錯誤', err.message);
    console.log(err);
});

app.use(handler);
app.use(main);
app.listen(3000);

上面代碼main函數拋出錯誤，被handler函數捕獲。catch代碼塊裡面使用ctx.app.emit()手動釋放error事件，才能讓監聽函數監聽到。

五、Web App的功能

ctx.cookies用來讀寫 Cookie。

const Koa = require('koa');
const app = new Koa();

const main = function(ctx) {
                    //讀取cookie//沒有返回0
  const n = Number(ctx.cookies.get('view') || 0) + 1;
  ctx.cookies.set('view', n);//設置cookie
  ctx.response.body = n + ' views';//顯示cookie
}

app.use(main);
app.listen(3000);

5.2 表單

Web 應用離不開處理表單。本質上，表單就是 POST 方法發送到伺服器的鍵值對。koa-body模塊可以用來從 POST 請求的數據體裡面提取鍵值對。

npm中的koa-body

npm install koa-body

const Koa = require('koa');
const koaBody = require('koa-body');
const app = new Koa();

const main = async function (ctx) {
    const body = ctx.request.body;
    if (!body.name){
        ctx.throw(400, '.name required')
    };
    ctx.body = { name: body.name };
};

app.use(koaBody());
app.use(main);
app.listen(3000);

模擬post

上面代碼使用 POST 方法向伺服器發送一個鍵值對，會被正確解析。如果發送的數據不正確，就會收到錯誤提示。

5.3 文件上傳

koa-body模塊還可以用來處理文件上傳。

./demo/文件上傳.js

const Koa = require('koa');
const koaBody = require('koa-body');
const Router = require('koa-router');
const fs = require('fs');
const path = require('path');
const router = new Router()
const app = new Koa();

app.use(koaBody({
    multipart: true,//解析多部分主體，預設false
    formidable: {
        maxFileSize: 200 * 1024 * 1024    // 設置上傳文件大小最大限制，預設2M
    }
}));

app.use(router.routes()).use(router.allowedMethods());

router.post('/uploadfile', (ctx, next) => {
    // 上傳單個文件
    const file = ctx.request.files.file; // 獲取上傳文件
    // 創建可讀流
    const reader = fs.createReadStream(file.path);
    let filePath = path.join(__dirname, 'data/') + `/${file.name}`;
    // 創建可寫流
    const upStream = fs.createWriteStream(filePath);
    // 可讀流通過管道寫入可寫流
    reader.pipe(upStream);
    return ctx.body = "上傳成功！";
});

app.listen(3000)

./demo/web/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="http://127.0.0.1:3000/uploadfile" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="file" value="" multiple="multiple" />
    <input type="submit" value="提交"/>
</form>
</body>
</html>

nodejs中的fs文件系統模塊，可以幫你讀文件寫文件，但是不會幫你創建文件夾。

本文思路來源http://www.ruanyifeng.com/blog/2017/08/koa.html

​


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • [20190328]簡單探究sql語句相關mutexes.txt
    [20190328]簡單探究sql語句相關mutexes.txt--//摘要:http://www.askmaclean.com/archives/understanding-oracle-mutex.html雖然Mutex中文翻譯為互斥鎖，但為了和OS mutex充分的區別，所以我們在本文里稱Or ...
  • HDFS上傳數據的流程
    1.當客戶端輸入一條指令：hdfs dfs -put text.txt /text時，這條命令會給到DistributeFileSystem。 2.通過DistributeFileSystem簡稱DFS會創建DFSClient。 3.DFSClient會與hdfs伺服器建立RPC通訊，此時客戶端就可 ...
  • 【Android】用Cubism 2製作自己的Live2D——來製作動態壁紙吧！
    前言- Andorid SDK下載 baidu雲 提取碼：19jm 這次我們就來研究一下官方的例子之一的liveWallPaper，也就是開發Android的動態壁紙 先來看看這個例子運行的結果： 還是蠻可愛的嘛，那麼開始吧！ 項目的目錄- framework中是live2d要用的必須的類 libs ...
  • 一個IOS自動化打包的腳本
    網上找了一個腳本，在其中進行了修改，只需要一條命令就可以了 支持自動導入配置文件 支持自動安裝p12證書 支持自動修改版本號和build版本號 支持自動修改app顯示名稱 支持自動修改bundle identifier 支持自動生成ipa文件到指定目錄 圖標和閃圖更換隻是一個簡單的拷貝工作，目前的腳 ...
  • Android使用google breakpad捕獲分析native cash
    Android 開發高手課 課後練習（1） 一、Chapter01 崩潰 https://time.geekbang.org/column/article/70602 https://github.com/AndroidAdvanceWithGeektime/Chapter01 1、遇到native ...
  • 程式員50題（JS版本）（八）
    程式36:有n個人圍成一圈，順序排號。從第一個人開始報數(從1到3報數)，凡報到3的人推出圈子，問最後留下的是原來第幾號的那位 var n=20; var arr=[]; for(var i=0;i<n;i++){ arr.push(1); } for(var j=1,least=n;;j++){ ...
  • 關於socket.io的使用
    這段時間學習了 socket.io ，用它寫了小項目，在此總結下它的基本使用方式和一些要點。 socket.io 是基於 Node.js 和 WebSocket 協議的實時通信開源框架，它包括客戶端的JavaScript和伺服器端的Node.js。 服務端 這裡後端使用的框架是 koa2 ， soc ...
  • fetch
    fetch("/") .then(response => response.json()) .then(json => { this.restaurants = json; console.log(this.restaurants.length) }) ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類