koa2入门_电商大屏版

koa2 是基于Nodejs 平台的后端开发框架!

koa2 是 express 原班人马打造的，解决express 回调地狱的问题!

洋葱模型: 就是从请求 到 响应的一个过程, 分别为每个中间件处理!

请求 由(1， 2， 3)层中间件处理，响应由（2，1）层中间件处理!

初始化koa

node版本 >= 7.6

检查node版本

node -v

初始化node项目

npm init -y

安装koa 包

npm install koa --save

新建app.js 并配置koa实例

const Koa = require("koa");
const app = new Koa();

// 配置koa中间件
app.use((ctx,next)=> {
  // 响应页面数据为 hello world!
  ctx.response.body = "hello world!";
  // 下一个中间件 输出响应结果
  next();
})

// 启动监听端口
app.listen(4000)

ctx 回调参数: 上下问对象，可以通过该对象来访问请求(request)对象，和响应(response)对象等!

next 回调参数，为下一个执行中间件，直到输出响应! (此处参考洋葱模型图，从请求到响应!)

启动app.js 服务

node app.js

访问http://localhost:4000/地址即可看到返回结果!

koa 中间件

特点

• koa 通过use 方法来加入一个中间件!

• 一个中间件就是一个函数!

• 中间件执行顺序符合洋葱模型!

• 内层中间件能否执行需要看外层中间件是否执行next函数!

const Koa = require('koa');
const app = new Koa();

// 第一层中间件
app.use((ctx, next)=> {
    ctx.response.body = "hello world!";
    console.log("第一层中间件...1!")
    next();
    console.log("第一层中间件...2!");
})

// 第二层中间件
app.use((ctx, next) => {
  console.log("第二层中间件...1!");
  next();
  console.log("第二层中间件...2!");
});

// 第三层中间件
app.use((ctx, next) => {
  console.log("第三层中间件...1!");
});

app.listen(4000);

输出结果

第一层中间件...1!
第二层中间件...1!
第三层中间件...1!
第二层中间件...2!
第一层中间件...2!
第一层中间件...1!
第二层中间件...1!
第三层中间件...1!
第二层中间件...2!
第一层中间件...2!

调用next 函数返回的是一个promise对象

// 第二层中间件
app.use(async (ctx, next) => {
  console.log("第二层中间件...1!");
  const str = await next();
  console.log(str); // i love the dog!
  console.log("第二层中间件...2!");
});

// 第三层中间件
app.use((ctx, next) => {
  console.log("第三层中间件...1!");
  return "i love the dog!"
});

大屏后台项目

项目目录结构

├── app.js
├── data
│   ├── budget.json # 预算开销
│   ├── hotproduct.json
│   ├── map.json # 商家分布
│   ├── rank.json
│   ├── seller.json # 商家销量
│   ├── stock.json # 库存信息
│   └── trend.json # 销量趋势
├── middleware
│   ├── koa_data.js
│   ├── koa_duration.js
│   └── koa_header.js
├── package-lock.json
├── package.json
└── utils

1. middleware 中间件，用来处理响应头，和响应时间，以及跨域和数据返回等操作!

2. data 存放前端获取数据的json数据

中间件配置

koa_duration.js

第一个中间件，获取响应时长！

// 设置相应头 响应时间
module.exports = async (ctx, next) => {
  const start = Date.now();
  await next();
  const end = Date.now();
  const duration = end - start;
  ctx.set("X-Response-Time", `${duration}ms`);
};

koa_header.js

第二个中间件，设置相应头，响应格式，以及跨域!

/* 
    设置相应头响应类型
    设置跨域请求头
*/
module.exports = async (ctx, next) => {
    ctx.set("Content-Type", "application/json; charset=utf-8");
    ctx.set("Access-Control-Allow-Origin", "*");
    ctx.set("Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, Accept, X-Requested-With");
    ctx.set("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    ctx.set("Access-Control-Allow-Credentials", "true");
    next();
}

koa_data.js

根据请求url路径获取data/ 下对应的json数据!

/* 
    根据前端请求路径获取 data/下所对应数据
*/
module.exports = (cxt, next) => {
  const url = cxt.request.url.split("/");
  const data_key = url[url.length - 1];
  if (data_key.indexOf(".") === -1) {
    try {
      const data = require(`../data/${data_key}.json`);
      cxt.response.body = { success: true, data: data };
    } catch (error) {
      cxt.response.body = {
        success: false,
        message: "data not found!",
        code: 500,
      };
    }
  }

  next();
};

在app.js中使用中间件!

const Koa = require('koa');
const app = new Koa();
const middlleWareDuration = require('./middleware/koa_duration.js');
const middlleWareHeader = require("./middleware/koa_header.js");
const middlleWareData = require("./middleware/koa_data.js");
// 第一层中间件
app.use(middlleWareDuration);

// 第二层中间件
app.use(middlleWareHeader);

// 第三层中间件
app.use(middlleWareData);

app.listen(4000);