koa-router，模塊化

1.koa-router模塊

1. 初始化
   npm init
2. 安裝模塊

npm i -S koa
npm i -S koa-router
複製代碼

3. 引入

const Koa = require("koa");
const Router = require("koa-router")
複製代碼

注意點: 相似Koa和Router等首字母大寫的，表示是一個類，須要new來實例化

demo1

//引入模塊
const Koa = require("koa");
const Router = require("koa-router");
//實例化
const koa = new Koa();
const router = new Router(); 

//對get請求作處理   限定必須是根路由
router.get("/", async (ctx, next) => {
    //中間件1
    console.log("接收-1");
    await next();
    console.log("響應-1");

}, async (ctx, next) => {
    //中間件2
    console.log("接收-2");
    await next();
    console.log("響應-2");
}, async (ctx, next) => {
    //中間件3
    console.log("接收-3");
    await next();
    console.log("響應-3");
}); 
//接下面的代碼
複製代碼

此處插入說明：在學習koa模塊時，是用koa.ues()註冊中間件的。當使用koa-router模塊時，上面整個route.get()做爲一箇中間件，以如下的方式註冊：

//接上面的代碼
koa.use(router.routes())
    .use(router.allowedMethods())
    .listen(3000, () => {
        console.log("開始監聽3000端口");
    });
複製代碼

運行文件，請求效果:

demo2

const Koa = require("koa");
const Router = require("koa-router");
const koa = new Koa();
const router = new Router(); 
//中間件1
router.get("/",async (ctx)=>{
    ctx.body = "從根路由過來的請求"
});
//中間件2
router.get("/html",async (ctx)=>{
    ctx.body = "從html過來的請求"
});
//中間件3
router.get("/sjl",async (ctx)=>{
    ctx.body = "從sjl過來的請求"
});
//註冊監聽
koa.use(router.routes())
    .use(router.allowedMethods())
    .listen(3000, () => {
        console.log("開始監聽3000端口");
    });
複製代碼

效果：

---

2. 模塊化開發

從上述例子發現，全部的模塊都寫在同一個文件裏，這樣是不穩當的。模塊化開發根據不用的功能放在不用的文件中。例如流水線，每個工人負責不用的功能。

簡單模塊化案例
建立三個文件: main.js，router.js，dispose.js

1.第一個文件main.js

//main.js做爲入口文件
const Koa = require("koa");
const router = require("./router"); //導入router.js

const koa = new Koa();

koa.use(router.routes())
    .use(router.allowedMethods())
    .listen(3000, () => {
        console.log("開始監聽3000端口");
    });
複製代碼

2. 第二個文件router.js

//router.js做爲路由功能的文件
const Router = require("koa-router");
const dispose = require("./dispose");

const router = new Router();

router.get("/", dispose.root);
router.get("/demo", dispose.demo);
router.get("/test", dispose.test);

module.exports = router; //將數據傳遞給main.js
複製代碼

3.第三個文件dispose.js

module.exports = {
    "root" : async (ctx) => {
        ctx.body = "從根路由過來的請求";
    },
    "demo" : async (ctx) => {
        ctx.body = "從demo過來的請求";
    },
    "test" : async (ctx) => {
        ctx.body = "從test過來的請求";
    }
}
複製代碼

---

3.koa一些模塊介紹

1. koa-static :管理靜態資源的模塊

   1. 安裝: npm i -S koa-static
   2. 引用:

      const Koa = requrie("koa");
      const static = require("koa-static");
      const {join} = reurire("path");
      
      const koa = new Koa();
      //指定加載靜態資源的根目錄,指定全部靜態文件的根目錄
      koa.use(static(join(__dirname, "static")));
      複製代碼

2. koa-body :解析post請求的模塊，監聽POST請求，將數據存入ctx.request.body中

   1. 安裝: npm i -S koa-body
   2. 引用:

      const Koa = requrie("koa");
      const koaBody = require("koa-body");
      
      const koa = new Koa();
      
      koa.use(koaBody());
      複製代碼

3. koa/cors :實現跨域模塊

   1. 安裝: npm i -S @koa/cors
   2. 引用:

      const Koa = requrie("koa");
      const cors = require("@koa/cors");
      
      const koa = new Koa();
      
      koa.use(cors());
      複製代碼

鏈式操做

koa
    .use(static(join(__dirname, "static")))
    .use(koaBody())
    .use(cors());  //容許跨域

//註冊中間件
koa.use(router.routes())
    .use(router.allowedMethods())
    .listen(3000, () => {
        console.log("開始監聽3000端口");
    });
複製代碼