koa2 路由

安装与使用

npm i koa-router

app.js

const Koa = require("koa2");
const Router = require("koa-router");
const app = new Koa();
const router = new Router();
const port = 9000;

router.get("/", async (ctx) => {
  ctx.body = "根路径";
});

router.get("/manage", async (ctx) => {
  ctx.body = "管理系统";
});

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

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

路由拆分

TIP

当项目较大，路由较多时，我们需要划分模块。此时，就需要对路由进行拆分。我的项目的后端要服务于 Web 官网和后台管理系统，因此将路由划分成两个模块：web 与 manage。

创建router文件夹，并在其中创建：

• index.js （路由总入口文件）
• manage/index.js （manage 模块路由入口文件）
• web/index.js （web 模块路由入口文件）

app.js

const Koa = require("koa2");
const router = require("./router");
const app = new Koa();
const port = 9000;

// 调用router中间件
app.use(router.routes(), router.allowedMethods());

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

index.js

const Router = require("koa-router");
const manage = require("./manage");
const web = require("./web");
const router = new Router();

router.get("/", async (ctx) => {
  ctx.body = "根路径";
});

router.use("/manage", manage.routes(), manage.allowedMethods());
router.use("/web", web.routes(), web.allowedMethods());

module.exports = router;

manage/index.js

const Router = require("koa-router");
const router = new Router();

router.get("/", async (ctx) => {
  ctx.body = "管理系统";
});

module.exports = router;

web/index.js

const Router = require("koa-router");
const router = new Router();

router.get("/", async (ctx) => {
  ctx.body = "官网";
});

module.exports = router;

404 无效路由

INFO

如果被访问到无效路由，那么我们可以统一返回 404 页面

router/errorPage.js

const Router = require("koa-router");
const errorPage = new Router();

errorPage.get("/", async (ctx) => {
  ctx.body = "访问页面不存在";
});

module.exports = errorPage;

router/index.js

const errorPage = require("./errorPage");

// 404页面路由
router.use("/404", errorPage.routes(), errorPage.allowedMethods());

app.js

// 匹配不到页面的全部跳转去404
app.use(async (ctx, next) => {
  await next();
  if (parseInt(ctx.status) === 404) {
    ctx.response.redirect("/404");
  }
});
app.use(router.routes(), router.allowedMethods());

后端允许跨域

npm i koa2-cors

// 引入koa2-cors中间件
const cors = require("koa2-cors");
// 这里cors中间件一定要写在路由之前
app.use(cors());

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

读取静态资源文件

yarn add koa-static

然后在项目的根目录下创建 assets 后，将图片资源（图片自己随便找一张）文件夹 images 放到其中。我们假定 404 页面需要返回一张错误警告图，可以在 app.js 中执行以下操作：

// 引入
const path = require('path')
const static = require('koa-static')

// 获取静态资源文件夹
app.use(static(path.join(__dirname, '/assets')));
...
app.use(router.routes(), router.allowedMethods())

假设其中有一张图片叫做 404.gif，那么我们打开浏览器，访问：http://localhost:9000/images/404.gif 即可得到图片

如果我们希望打开404页面就显示这张图，就需要做如下步骤：

$ npm i mime-types

errorPage.js

const Router = require("koa-router")
const router = new Router();
const fs = require("fs")
const path = require("path")
const mime = require("mime-types")

router.get('/', async ctx=>{
    const filePath = path.join(__dirname, "../assets/images/404.gif");
    const file = fs.readFileSync(filePath); // 读取文件
    const mimeType = mime.lookup(filePath)  // 读取文件类型
    ctx.set("content-type", mimeType);  // 设置返回类型（这一步很重要）
    ctx.body = file;    // 返回图片
})

module.exports = router;