一、koa與express的認識

• 1、他們都是node-web開發的框架
• 2、koa分兩個版本,一個是1.*的使用Generator來寫的,另外一個版本是使用async來寫的
• 3、koa的官網比較簡單傳送門

二、開始使用koa

• 1、kao官網也介紹了,node的版本要大於7.6才可以使用async否則就要配置外掛

• 2、使用官方案例跑一個hello word

  const Koa = require("koa");
  const app = new Koa();
  app.use(async (ctx) => {
    ctx.body = 'Hello World';
  })
  
  app.
   
  listen(3000, () => {
    console.log(`伺服器已經啟動:localhost:3000`);
  });
  

三、koa官網如此的簡單就是因為跟之前的express完全不一樣,把我們常用的路由,靜態檔案等都單獨出去了

四、使用路由

• 1、安裝包

  npm install koa-router --save
  

• 2、使用

  **router檔案**
  const Router = require('koa-router');
  const router = new Router();
  
  router.get('/', async (ctx) => {
    ctx.body =
   
   `<h1>你好</h1>`;
  })
  
  module.exports = router.routes();
  
  

• 3、在主檔案中使用

  app.use(require('./routers/user'));
  

• 4、配置子路由

  const Router = require("koa-router");
  const router = new Router();
  
  router
    .get("/", async ctx => {
      ctx.body = `
        <ul>
          <li><a href="/hello">helloworld</a></li>
          <li><a href="/about">about</a></li>
        </ul>
      `
   
  ;
    })
    .get("/hello", async ctx => {
      ctx.body = "helloworld";
    })
    .get("/about", async ctx => {
      ctx.body = "about";
    });
  
  module.exports = router.routes();
  

五、使用靜態檔案

• 1、安裝包

  npm install koa-static --save
  

• 2、使用

  **主檔案中**
  const static = require('koa-static');
  const path = require('path');
  // 靜態存放地址
  const staticPath = './static';
  
  app.use(static(
    path.join(__dirname, staticPath)
  ))
  
  

六、get請求資料的獲取

• 1、get請求傳送json到前端

  const Router = require("koa-router");
  const router = new Router();
  
  router.get("/query", async ctx => {
    // 獲取url 
    const url = ctx.url;
    // 獲取客戶端的引數
    const query = ctx.query;
    // 獲取?後面全部的引數
    const querystring = ctx.querystring;
    ctx.body = {
      url,
      query,
      querystring
    };
  });
  
  module.exports = router.routes();
  

七、post提交資料

• 安裝包

  npm install koa-bodyparser --save
  

• 2、主檔案配置koa-bodyparser中介軟體

  **主檔案中**
  const bodyParser = require('koa-bodyparser');
  // 使用koa-bodyparser中介軟體
  app.use(bodyParser());
  

• 3、配置路由

  router.post("/create", async ctx => {
    console.log(ctx.request.body);
    ctx.body = {
      name: ctx.request.body.name
    };
  });
  

八、koa配置跨域訪問

• 1、在主檔案中配置中介軟體

  npm install --save koa2-cors
  var koa = require('koa');
  var cors = require('koa2-cors');
  
  var app = koa();
  app.use(cors({
    origin: function(ctx) {
      if (ctx.url === '/test') {
        return false;
      }
      return '*';
    },
    exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
    maxAge: 5,
    credentials: true,
    allowMethods: ['GET', 'POST', 'DELETE'],
    allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
  }));
  

九、使用ejs模板引擎(現在流行前後端分開開發,不怎麼用了)

• 1、安裝koa-views檢視包

  npm install koa-views --save
  

• 2、安裝ejs模擬引擎

  npm install ejs --save
  

• 3、主檔案中配置使用的模板引擎

  const path = require('path')
  const views = require('koa-views');
  // 載入模板引擎
  app.use(views(path.join(__dirname, './view'), {
    extension: 'ejs'
  }))
  
  // 渲染模板
  app.use(async ctx => {
    let title = "Koa2";
    // 渲染模板及返回引數
    await ctx.render("index", {
      title
    });
  });
  

歡迎加入群聊，我們一起探討前端技術棧

群號:560285778