Koa & Mongoose & Vue實現先後端分離--04服務端註冊&登陸：用戶路由配置

上節回顧

• mongoose鏈接數據庫
• 數據存儲結構的定義

工做內容

• 後端：路由攔截
• Postman：測試接口

準備工做

• npm i -S @koa/router //安裝路由

路由攔截

基本用法

// 修改文件：/server/app.js
const koa = require('koa');
const Router = require('@koa/router');  //引入NPM包

const router = new Router()  // 建立實例
const app = new koa();

app.use((ctx, next) => {
  ctx.body = '測試測試測試'; //該中間件任什麼時候候都會走，GET請求'/'路徑時，返回被後續的返回覆蓋了，因此，沒有展現。
  next();
})

router.get('/', (ctx, next) => { //攔截GET訪問'/'路徑的請求
  ctx.body = `訪問路徑：${ctx.originalUrl}`
});

app
  .use(router.routes())
  .use(router.allowedMethods()); // 嵌入中間件

app.on('error', err => {
  log.error('server error', err)
});
module.exports = app;

以nodemon配置的launch.json運行

瀏覽器輸入localhost:3000和localhost:3000/any查看輸出結果。

優化代碼

這裏但願將全部的路由配置提取到/server/router文件中（注意還原/server/app.js）。

// 新建文件：/server/control/users.js————預約義處理路由處理函數
async function list (ctx) {
  ctx.body = 'list'
}
async function register (ctx) {
  ctx.body = 'register'
}
async function login (ctx) {
  ctx.body = 'login'
}
async function update (ctx) {
  ctx.body = 'update'
}
module.exports = {
  list,
  register,
  login,
  update
}

// 新建文件：/server/router/users.js
const Router = require('@koa/router');
const routerUtils = require('../utils/router');
const { list, register, login, update } = require('../control/users');

const router = new Router({
  prefix: '/users' //路由前綴，該文件下的路由路徑，追加'/users'爲前綴
});
// 配置路由
const routes = [
  {
    path: '/',
    method: 'GET',
    handle: list
  },
  {
    path: '/',
    method: 'POST',
    handle: login
  },
  {
    path: '/:id',
    method: 'PATCH',
    handle: update
  },
];

routerUtils.register.call(router, routes); // 註冊路由

module.exports = router; //導出User的路由實例

// 新建文件：/server/utils/router.js

function register(routes) {
  // 轉換爲'@koa/router'攔截路由的形式：router.get(<path>, <handle>)
  routes.forEach((route, idx) => {
    const { path, method, handle } = route;
    this[method.toLowerCase()](path, async (ctx, next) => {
      await handle(ctx);
    })
  })
}
module.exports = {
  register,
}

// 新建文件：/server/router/index.js
const userRouter = require('./users');

// 導出User路由相關的中間件，後續可追加其它的中間件
module.exports = [
  userRouter.routes(),
  userRouter.allowedMethods()
];

// 更新文件：/server/app.js
const koa = require('koa');
const routes = require('./router');

const app = new koa();

app.use((ctx, next) => {
  ctx.body = '測試測試測試';
  next();
})
//中間件： 路由 --> 不支持一次性註冊多箇中間件
// app.use(...router.routes).use(...router.allowedMethods);
routes.forEach(route => {
  app.use(route);
});

app.on('error', err => {
  log.error('server error', err)
});
module.exports = app;

Postman測試接口

• 能夠創建一個文件夾存放同系列的請求，也能夠直接新建一個請求

• 
• 測試Get請求/users接口
• 能夠經過斷點查看攔截請求

參考文檔

@koa/router