基于koa搭建一个属于自己的mock服务器

1.初衷的由来。

mock可以让你在没有后端程序的情况下能真实地在线模拟 ajax 请求，实现前后端分离。大大提高前端开发的效率。目前线上有免费提供mock的平台https://www.fastmock.site/#/，但是在真实的项目开发中，涉及的敏感数据就不太方便在该平台上使用了。

那怎么办吧？阿里开源的前端框架umi，线上地址https://umijs.org/zh-CN就集成了mock的能力，个人觉得在使用的时候。项目本身就很大，加上大量的mock集成看起来很冗余。为此想着搞上一个属于自己的mock服务器。简单易上手。

2.项目的完整demo,下载就可以使用的那种。

https://github.com/wangchun123/myLocalMock

3.项目的目录结构

4.让我进入代码的讲解中

1.我们整一个文件夹叫myLocalMock。npm init --yes

2.现在可以装依赖了,对应的依赖含义可以自行在https://www.npmjs.com/官网上查下对应的用法。cnpm i @koa/cors  glob  koa  koa-logger  koa-router --save

3.还要下载一个依赖,cnpm i -g nodemon 我们在启动服务的时候要用到nodemon。先装上。

4.我们把项目目录结构完善下，按照上图的目录结构来就行。api文件、config文件、app.js必须有，其他的是辅助项目上传的可以不需要。

5.在api文件下建立v1和v2文件。v1和v2分别建立one.json和two.json内容自由发挥就很好，只要是json格式。

6.关键的config的文件，建立mockConfig.js代码如下。如果防止敲代码出错，直接复制也行。

const mock = (config, prefix = "api") => {
  const Koa = require("koa");
  const Router = require("koa-router");
  const glob = require("glob");
  const fs = require("fs");
  const logger = require("koa-logger");
  const cors = require("@koa/cors");
  const { resolve } = require("path");

  const app = new Koa();
  const router = new Router({ prefix: `/${prefix}` });

  /***
   * @url 请求的路径
   * @method  请求的方式
   * @defaultJson 默认显示的json数据
   * @callback 回调函数目的是，动态处理不同条件展示的json数据
   */
  const mockConfig = (url, method, defaultJson, callback) => {
    glob.sync(resolve(`./${prefix}`, `${url}.json`)).forEach((item, i) => {
      let apiJsonPath = item && item.split(`/${prefix}`)[1];
      let apiPath = apiJsonPath.replace(".json", "");
      router[method || "get"](apiPath, (ctx, next) => {
        try {
          let finallJson = callback && callback(ctx);
          let changeFileUrl =
            finallJson && item && item.replace(defaultJson, finallJson);
          let jsonStr = fs.readFileSync(changeFileUrl || item).toString();
          ctx.body = {
            data: JSON.parse(jsonStr),
            state: 200,
            type: "success",
          };
        } catch (err) {
          ctx.throw("服务器错误", 500);
        }
      });
    });
  };

  // 注册路由
  config.forEach((item) => {
    mockConfig(item.url, item.method, item.defaultJson, item.callback);
  });

  app
    .use(cors())
    .use(router.routes())
    .use(router.allowedMethods())
    .use(logger());
  app.listen(3000);
};

module.exports = {
  mock,
};

7.来到app.js文件中代码如下。如果防止敲代码出错，直接复制也行。

const { mock } = require("./config/mockConfig");

mock([
  {
    url: "v1/one",
    method: "get",
    defaultJson: "one.json",
    callback: (ctx) => {
      const query = ctx.query;
      if (query.age == 2) {
        return "two.json";
      }
    },
  },
  {
    url: "v2/one",
    method: "post",
    defaultJson: "one.json",
    callback: (ctx) => {
      const query = ctx.query;
      if (query.name == "小米") {
        return "two.json";
      }
    },
  },
]);

8.我们已经准备就绪，在项目终端下输入：nodemon app.js  启动完毕直接访问就可以看到你准备的json数据了 127.0.0.1:3000/api/v1/one

5.最终的效果如下图

1.简单的get请求,post同理

 

2.带参数的get请求，post同理

6.温馨提示

1.具体使用注意事项可以访问，https://github.com/wangchun123/myLocalMock/blob/master/README.md

2.我们可以直接使用axios请求到数据，例如axios.get('/api/v1/one').then(res=>console.log(res))

3.我们在真实的开发项目中，调用接口会有跨域的问题，可以配置一下proxy，代码如下

proxy:{
    '/api':{
        target:'http://127.0.0.1:3000/',
        changeOrigin:true,
    }
}

这样后端真实的接口开发好了之后，我们只要把proxy->target指向后端提供的服务地址。前端几乎是不需要多大的改动。真正体现了mock的好处。

4.具备node.js的和express框架认知的同学，上手理解会非常快。koa就是在express基础上的完善和优化。没有此类技能的同学，仅仅使用此mock功能。也是没有影响的。