Koa - 初體驗（寫個介面）

来源:https://www.cnblogs.com/chanwahfung/archive/2019/08/28/11415675.html
-Advertisement-
Play Games

前言 不會node.js的前端不是一個好前端！ 這幾年node.js確實是越來越火了，好多公司對node.js都開始有要求。雖說前端不一定要會後端，但想要成為一個優秀的前端，node.js是必經之路。 我對於node.js的第一印象，認為它是一門後端語言，只是前端學習起來成本會更低更好上手。慢慢經過 ...


前言

　　不會node.js的前端不是一個好前端！

　　這幾年node.js確實是越來越火了，好多公司對node.js都開始有要求。雖說前端不一定要會後端，但想要成為一個優秀的前端，node.js是必經之路。

　　我對於node.js的第一印象，認為它是一門後端語言，只是前端學習起來成本會更低更好上手。慢慢經過瞭解後，使用node.js寫介面對於前端來說很方便，但不僅限於寫介面。在一些大公司里，node.js並不是開發介面的首選目標，而是作為中間層來使用。我們都知道分工合作，讓專業的人做更專業的事，工作效率會大大提高。node.js作為中間層的存在，可以讓後端更專註於寫介面和管理數據。

　　試想一下，現在由於業務邏輯改變，後端需要對數據介面進行更改，是否會花費時間？如果你會node.js，那麼你就可以通過node.js來做數據聚合，從幾個介面中拼接數據供前端使用，而不需要為數據結構和數據內容煩惱，並且你不用擔心效率，因為node.js天生非同步。

　　包括我們常用的一些腳手架工具也是基於node.js環境搭建，你甚至還可以使用node.js來做數據挖掘，也就是我們所說的爬蟲，node.js的應用層面還有很多。以上都是我瞭解到的一些信息。

　　目前node.js比較主流框架分為express、koa、egg。koa作為新一代的框架，由開發express的原班人馬打造，支持ES7 async/await，拋棄回調函數，在寫法上更自然。koa沒有綁定任何中間件，關鍵的設計點是在其低級中間件層中提供高級“語法糖”，koa的體積也因此更小。（中間件在koa中是一個很重要的存在，在後面我會著重去學習它）

　　接下來，我要開始koa入坑之路。

 

koa初體驗

hello,koa！

安裝koa ，npm i koa

創建一個app.js，命令行執行 node app

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

app.context.msg = 'Hello Koa!' 
app.use(async ctx => {
  ctx.body = ctx.msg;
});

app.listen( 3000);

app.context 為執行上下文添加屬性和方法　　

app.use 將給定的中間件方法添加到應用程式中

該方法接收ctx和next作為參數，ctx 是執行上下文，裡面存儲了request和response等信息，還有ctx.body，我們可以通過它來返回數據，next作為函數調用，將執行權交給下一個中間件執行。

這裡我先安裝個nodemon，因為每次更改文件時，都需要重新執行命令以更新代碼，這種重覆性的工作就交給模塊來處理。

通過 npm i nodemon 安裝好後，命令行執行 nodemon app，這樣每次更改文件時，nodemon都自動刷新。

 

Koa-router 路由管理

為了代碼的可維護性，減少代碼量。使用路由管理顯得尤為重要，koa框架也有自己對應的路由管理模塊（koa-router），我們可以通過npm 下載使用。

var Koa = require('koa' );
var Router = require('koa-router' );
 
var app = new Koa();
var router = new Router();
 
router.get( '/', (ctx, next) => {
      ctx.body = 'hello'
});

//使用路由中間件
app
  .use(router.routes())
  .use(router.allowedMethods());

app.listen( 3000 )

routes 註冊使用路由

allowedMethods 處理的業務是當所有路由中間件執行完成之後，若 ctx.status 為空或者404的時候，豐富 response 對象的 header 頭，不加問題也不大，官方例子有加上，所以我這裡也加了

這時訪問3000埠就可以得到ctx.body 返回的內容

get請求

1. 獲取介面query參數

通過查詢 ctx.request.query 得到get參數， ctx.request.header 得到請求時的頭部信息，ctx.request.method 得到請求方法。這樣可以對應的來做一些判斷，例如請求的參數是否合法，請求方法是否合法。

router.get( '/get', (ctx, next) => {
      let id = ctx.request.query.id
      ctx.body = {
           id,
           code: 1
      }
});

 

2. 命名路由  獲取參數

router.get( '/get/:id', (ctx, next) => {
      let id = ctx.request.params.id
      ctx.body = {
           id,
           code: 1
      }
});

例如請求地址為 /get/123，通過 ctx.request.params 獲取參數

這寫法讓我想起了vue-router，設置params可以說是一樣了。

 

post請求

原生獲取post請求的參數，需要監聽ctx.req的data事件和end事件，分段拼接成完整的字元串，然後還需要切割轉碼。所以在獲取post參數時，我會藉助 koa-bodyparser 來減少不必要的操作。

在引入 koa-bodyparser 時，需要註意的是順序問題，使用 koa-bodyparser 需要放在使用路由之前，這是由於中間件執行順序的原因（暫且理解為 bodyparser 經過處理，把處理好的值轉交到路由）

var bodyParser = require('koa-bodyparser');

app.use(bodyParser());

app
    .use(passport.initialize())
    .use(passport.session())

 

藉助中間件koa-bodyparser，訪問 ctx.request.body 得到post參數

通過 ctx.set 設置返回頭，設置多個時可傳入對象

router.post('/post', ctx=>{
　　　//設置允許跨域
　　 ctx.set('Access-Control-Allow-Origin'，'*')
    ctx.body = {
        code:1,
        postParams:ctx.request.body
    }
})

 

路由模塊化管理

試想一下，現在文件中寫有多個介面，我們在開發和調試起來都會特別麻煩，浪費時間。為了更好的管理介面，現在需要把介面按照功能抽離出來，封裝到一個個的JS文件中，並存放到routes文件夾下。

例如，創建 user.js 來存放用戶相關的介面

const Router = require('koa-router')
const route = new Router()
const jwt = require('jsonwebtoken')

route.get('/getToken', async (ctx)=>{
    let {name,id} = ctx.query
    if(!name && !id){
        ctx.body = {
            msg:'不合法',
            code:0
        }
        return
    }
    //生成token
    let token = jwt.sign({name,id},'secret',{ expiresIn: '1h' })
    ctx.body = {
        token: token,
        code:1
    }
})

route.get('/getUser', async ctx=>{
    let id = ctx.query.id
    ctx.body = {
        user:ctx.payload,
        id,
        code:1
    }
})

route.get('/getAllUser', async ctx=>{
    let type = ctx.query.type
    if(type){
        ctx.body = {
            type,
            code:1
        }
    }else{
        ctx.body = {
            msg:'缺少參數type',
            code:0
        }
    }
})

module.exports = route

以上代碼，將寫好的介面暴露出去，供app.js註冊使用

 

app.js代碼（部分代碼省略）

let urls = fs.readdirSync(__dirname + '/routes')
urls.forEach((element) => {
    //routes里的js介面文件
    let module = require(__dirname + '/routes/' + element)
    //routes里的文件名作為 路由名
    router.use('/' + element.replace('.js', ''), module.routes())
})

//使用路由
app.use(router.routes()).use(router.allowedMethods())

app.listen(3000)

以上代碼，我大概講下流程

1. fs文件模塊讀取routes文件夾目錄內容（獲得的是一個文件名的數組）

2. 數組遍歷，引入介面文件，將文件名作為路由名，註冊使用路由

將 user.js 作為例子，user.js 內有一個 getUser 的介面，我訪問的api地址為 /user/getUser

 

頭部信息處理

在前後端交互中，頭部信息也是很關鍵的一步，通過對頭部信息的配置，可以對請求作出一些限制，或者是一些優化。

這裡我會使用 koa2-cors 為例子，來對跨域做cors處理（部分代碼省略）。

const cors = require('koa2-cors')

app.use(cors({
    origin: function(ctx) {
      return 'http://127.0.0.1:5500';//cors
    },
    exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
    maxAge: 5,
    credentials: true,
    allowMethods: ['GET', 'POST'],
    allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
}))

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

app.listen(3000)

origin ： 接受字元串和函數，這裡配置的就是允許跨域的功能變數名稱，如果允許所有功能變數名稱跨域可傳入 *

allowMethods ： 允許請求的方式

allowHeaders ： 允許接受的頭部信息

其他的配置選項可以在npm上查看：https://www.npmjs.com/package/koa2-cors

 

寫在最後

本文通過路由中間件簡單實現介面，模塊化管理介面文件，還對介面進行跨域處理。

主要還是玩模塊，通過模塊可以組合出適合自己業務的系統。


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

-Advertisement-
Play Games
更多相關文章
  • iOS 視圖渲染數據轉CVPixelBuffer
    void *pxdata = CVPixelBufferGetBaseAddress(pxbuffer);然後在創建上下文以pxdata 所指向的記憶體作為上下文數據存貯的容器, 最後 渲染 上下文[self.webView.layer renderInContext:context];這樣就將 we ...
  • 數據存儲與訪問之——SharedPreferences
    使用SharedPreferences(保存用戶偏好參數)保存數據， 當我們的應用想要保存用戶的一些偏好參數，比如是否自動登陸，是否記住賬號密碼,是否在Wifi下才能 聯網等相關信息,如果使用資料庫的話,顯得有點大材小用了！我們把上面這些配置信息稱為用戶的偏好 設置，就是用戶偏好的設置，而這些配置信 ...
  • stdc++.6.0.9動態庫缺失
    問題 問題 ld: library not found for -lstdc++.6.0.9 clang: error: linker command failed with exit code 1 (use -v to see invocation) 官方解釋 官方解釋 Xcode更新後沒有這個庫 ...
  • Android四大組件之Service
    前言 Hi，大家好，上一期我們講瞭如何使用BroadcastReceiver，這一期我們講解Android四大組件之Service相關知識。每天一篇技術乾貨，每天我們一起進步。 耐心專註不僅僅是美德，更是一筆財富。 1.簡介與定義 Service是一個可以在後臺執行長時間運行操作而不提供用戶界面的應 ...
  • Android四大組件之BroadcastReceiver
    前言 Hi，大家好，又雙見面啦，上一期我們講瞭如何使用Activity，肯定有不少小伙伴已經創建了屬於自己的FirstActivity，那麼這一期我們主要為大家介紹第二個重要組件BroadcastReceiver（廣播接收器）。作為Android的四大組件之二，其應用場景非常多。下麵，就詳細介紹下 ...
  • Android四大組件之Activity
    前言 Hi，大家好，又見面啦，上一期我們講瞭如何安裝AS，是不是已經有小伙伴迫不及待的創建了自己的項目並開始嘗試了呢？那麼這一期我們主要為大家介紹Activity。作為Android的四大組件之一，Activity占據著非常重要的作用。本文將圍繞Android的生命周期、啟動模式、基本配置等方面進行 ...
  • 親，麻煩給個五星好評！—RatingBar
    引言 上一篇的CheckBox已經讓大家越來越接近實戰演練了，本章我們繼續分享乾貨給大家，今天介紹一個實用的UI控制項RatingBar(星級評分條)，對於使用過電商APP（某東，某寶等）的小伙伴們來說，應該不會陌生。在對商品進行評價時，經常會出現五星好評的評分樣式，這個五星評分樣式就是今天的主角Ra ...
  • jQuery 源碼分析(五) map函數 $.map和$.fn.map函數 詳解
    $.map() 函數用於使用指定函數處理數組中的每個元素(或對象的每個屬性)，並將處理結果封裝為新的數組返回,該函數有三個參數，如下: elems Array/Object類型 指定的需要處理的數組或對象。 callback 遍歷時執行的回調函數 arg 參數，執行回調函數時傳入的參數 callba ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類