mock数据升级版 umi-plugin-server

介绍一款比较好用的umi-plugin，这款插件可以模拟http请求，和ws服务，这是对umi-mock的一次升级，模板采用sqlite数据库，使得前端能自成一体。

开始

yarn add umi-plugin-socket
然后再umi的config配置项中增加一下配置

export default {
  server: { 
    port: 3333, //监听端口号
    watch: []  //监听的文件进行重新加载
  }
}

命令行下载服务端模板

npx umi s g server ----服务端模板
npx umi s g service -----客户端对umi-request 的二次封装

模板代码

index 入口文件

import api from './api';
import ws from './ws';
export default function (wss: any, app: any) {
//wss为服务端ws的二次封装
//app为实例化的express，可以app.use自定义使用中间件
  return {
    ws: ws(wss),
    api,
  };
}

api/index http服务模块

export default {
  //登陆接口
  '/api/login': (req: any, res: any) => {
    console.log(req.body)
    console.log(req.query)
    res.json({data:req.body})
  }
};

ws/index ws服务模块

import db from '../database';
export default function(wss: any) {
  let onlinePeople = [];
  return {
    msg(info: any) {
      wss.clients.forEach(item => {
        console.log(item.uid);
      });
      return info;
    },
    connect(info: any) {
      console.log(info.fromUid + ' connected');
      onlinePeople.push(info.uid);
      return info;
    },
    close(this: any) {
      console.log(this.uid + ' disconnected');
      onlinePeople.splice(onlinePeople.indexOf(this.uid), 1);
    },
  };
}

点击查看源代码