用koa搭建企業級服務架構（進階版）

瞭解koa

之前有寫過一次用koa去搭建http服務。現在覺得我當時搭建的那個服務是真的垃圾，koa的靈魂東西沒有用上。

首先，創建一個文件夾，打開命令行輸入 npm init 生成一個package.json文件，從事前端人員都應該曉得這個是幹嘛用的
然後創建一個app.js文件，這個文件是我們的主入口。

爲什麼說我之前寫的是個垃圾呢？我個人感覺我之前沒有把koa的生態圈插件和next方法玩轉，尤其是next()方法。用過後才知道是真的好用。創建後目錄如下：

接下來需要安裝幾個包

koa、koa-router、koa-bodyparser、nodemon
安裝koa如：npm i koa

{
  "name": "gyc",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon app.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "koa": "^2.12.1",
    "koa-body": "^4.2.0",
    "koa-bodyparser": "^4.3.0",
    "koa-router": "^9.0.1",
    "moment": "^2.26.0",
    "nodemon": "^2.0.4"
  }
}

把scripts 的start 改成用nodemon啓動app.js

nodemon是一個熱更新插件，意思就是修改文件後自動重啓服務
接下來開始寫app.js裏面的東西

const Koa = require('koa')
const bodyParser = require('koa-bodyparser')
const koaBody = require('koa-body') // 解析文件
const app = new Koa()
app.proxy = true

app.use(koaBody({
    multipart: true // 啓用文件傳輸
  }))
  
  // 配置中間件
  app.use(bodyParser())
  
  app.use(async (ctx, next) => { // 初始接口記錄日誌
    ctx.status = 200
    ctx.body = 'hello koa'
  })
  
  
  app.on('error', (err, ctx) => {
    console.error('server error', err, ctx)
  })
  
  app.listen(8011)

這個時候 使用npm run start 命令進行啓動服務

我這邊端口開的是8011 項目啓動後 在瀏覽器上輸入http://127.0.0.1:8011/地址

將會出現我們寫的返回值 ‘hello koa’當頁面返回正確後就表明我們這個服務已經搭成一個基礎的案例了；

在這個例子中，我們只用輸入http://127.0.0.1:8011就會有響應 如果想變成 http://127.0.0.1:8011/login就需要加上路由，路由就是剛纔下載過的koa-router接下來就可以看他的用法

首先，先引入router，註冊一個請求爲get的路由用router.get 參數1接收一個路徑，參數2接收一個函數。注意看我第二個參數的函數 是不是和之前
app.use(async (ctx, next) => { // 初始接口記錄日誌 ctx.status = 200 ctx.body = 'hello koa' })
這個傳入的一樣。
然後我們用app.use()註冊一下router 要不然路由寫好了沒有掛載到koa上也沒用 對吧，怎麼掛載呢直接就 app.use(router.routes())

router.allowedMethods() //若ctx.status爲空或者404的時候,豐富response對象的header頭.

接下來我們請求一下 http://127.0.0.1:8011/login

如果我們還有很多很多二級路徑該咋整呢，比如 /index 、/app、/del之類的總不能都寫在app.js裏面吧
那接下來就進行整改,整改完的目錄如下
先看demo-app.js文件

這個應該不用詳細講解了，接下來看Index.js

這個router.use是在註冊一級路由現在的路徑變成了 http://127.0.0.1:8011/demo-app/login，這樣的分層級有利於項目的擴展，一般的話是一個功能一個文件，一個文件下面會有很多的api 比如 一個功能模塊的增刪改查，註冊 ，登錄 ，刪除之類的。。。
在index.js中註冊 完成後 我們去看app.js

這個時候引入的就不在是router模塊了 而是我們剛纔自己配置的router文件夾中的Index.js文件，index.js相當於一級路由 所有的子路由都需要在他那裏註冊

比如我現在新加了一個web模塊，那我就創建一個demo-web.js的文件

然後再去index.js註冊一下

就可以訪問http://127.0.0.1:8011/demo-web/web-login

這個時候有沒有發現代碼還可以再繼續優化下，我們先單看demo-app.js這個文件

好像可以把

async(ctx,next)=>{
    ctx.status = 200
    ctx.body = 'hello koa'
  }

統一放在一個地方集中管理

先建一個controllers文件夾裏面建一個demo-app.js文件，目錄如下

把剛纔router裏面的邏輯代碼放在demo-app.js裏面

在routes裏面的demo-app.js進行引入

ok 直接重啓服務

接下來詳細講解下next()的用法

創建一個文件夾mimiddleware裏面創建一個resultHandle文件

加上next()

再進行引入

再次請求

從第一個中間件開始執行，遇到next進入下一個中間件，如果沒有了則回到原來的地方。

按照目前這個項目http://127.0.0.1:8011/demo-app/login來理解，
先加載demo-app.js裏面的方法 遇見了next() 加載 resultHandle裏面的方法，如果沒有了則回到dem-app.js裏面繼續運行，由於我的next()是在最下面進行調用的所以體會不出來，想要看效果則可以 在next()下面加個console然後在resultHandle裏面加一個console就可以看出來了

tip:router.get('/login',DemoAppApi.demo_app,resultHandle) 後面可以跟無數個 resultHandle.
假如 router.get('/login',DemoAppApi.demo_app,resultHandle，a，b，c)順序則是

demo_app->resultHandle->a->b->c->demo_app

可以自己試試玩玩