一、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

十、查看博主更多文章