前端工程化研究之数据mock化

禅思院
762 阅读6分钟

前端工程化研究之数据mock化

相信大家都知道，前后端分离最的好处就是各司其职，效率更高。我们都知道，在早些年，也就是”三剑客“时代，往往等待后端开发完成之后，前端才能完全介入开发工作，有冲淡测试数据的角色。前端的眼里越来越大，往往项目的延期，推到前端的角色上，大部分的项目开发，往往都是前期很轻松，等到快上测试的时候，就是各种加班，更有甚者通宵，这又是谁的过呢？前端、后端？各种责任的推卸。开发的周期后端和前端不是同步进行的，造成开发的周期扩大，成本的增加；前后端的分离开发，按照规范执行，事半功倍，效率、成本、周期等显著提升，各个周期更容易控制，前后相互独立而又相互依赖，每个工程师做好相应的角色，前端和后端可以同步执行，节约项目的研发时间，后期维护成本减少。通过下面2图的对比，明显可以看出

以往的方式 在这里插入图片描述

现代的方式 在这里插入图片描述

前后端分离开发，前端又如何进行快速跟后端链接呢？我们都知道，在分离式开发中，前端是充当客户的角色，后端提供你需要的数据，所以只要后端按照规范进行开发就行拉！然而在我们前后端同步开发的过程中，前端的数据从何而来，如何模拟正确的数据，才能避免后期对接的时候代价最小! mock！ mock！ mock！ mock！ mock！ mock！

什么是mock呢？

单元测试当中，我们只关注被测的单元，而不关心其他依赖的内容。Mock让我们有了一套仿真的环境，不用担心在检查单元内的内部流转的过程时还会因为环境的关系导致验证过程失败。由于外部环境的多样性，单元测试应该设计一些异常场景使得代码能够捕获该异常。

mock 的意思是模拟，也就是模拟接口返回的信息，用已有的信息替换它需要返回的信息,在这里就是前端对接口数据的模拟，替代后端生成数据。

市面上的又哪些mock 工具

我们都知道，前端的mock 只是为了模拟后端接口而返回的一种数据，也就是说接口级别的mock工具完成的主要功能是对一个用户的请求，模拟server返回一个接口的响应数据。

目前，这类的主流mock工具主要有以下几种：

(1) Wiremock: 特点

  • 支持Http响应头,匹配URL,heade和body内容模式
  • 请求验证
  • 可以作为一个独立的进程或者WAR app在单元测试中运行
  • 可以通过Java API，Json文件和JSON over HTTP配置
  • 有记录/回放功能
  • Fault injection
  • 可以作为请求检查和替换的浏览器代理
  • 有状态的行为模拟
  • 可配置响应延迟

(2) RAP: 特点

  • Web接口管理工具，接口自动化，MOCK数据自动生成，自动化测试
  • 能够通过分析接口结构自动生成Mock数据、校验真实接口的正确性
  • 阿里产品，功能完善、结合了文档、Mock.js、可视化、Rest、接口过渡、文档修改提醒、支持本地部署。

(3) Mockserver: 特点

  • 能够mock HTTP或者HTTPS 的server或者服务
  • 当一个请求匹配 expectation时能够返回一个mock response
  • 当一个请求匹配 expectation时能够forward 一个请求
  • 当一个请求匹配 expectation时能够执行一个回调（callback），允许动态地创建response
  • 支持Request验证

(4) Moco: 特点

  • an easy setup stub framework.
  • 支持HTTP、HTTPS、SOCKS
  • 支持单元测试

(5) Easy-Mock: 特点

  • 支持接口代理
  • 支持快捷键操作
  • 支持协同编辑
  • 支持团队项目
  • 支持 RESTful
  • 支持 Swagger | OpenAPI Specification (1.2 & 2.0 & 3.0)
    • 基于 Swagger 快速创建项目
    • 支持显示接口入参与返回值
    • 支持显示实体类
  • 支持灵活性与扩展性更高的响应式数据开发
  • 支持自定义响应配置（例：status/headers/cookies）
  • 支持 Mock.js 语法
  • 支持 restc 方式的接口预览

mock的选型

其实mock 只是一种工具，各有千秋，没有好坏之分，只要能提高开发的效率，就是好的。其实我的团队选择2种，一种是自己简单的搭建一个mock server，也就是每个项目中都有一个静态的mock serve 的服务，这样可以完全独立出来，无学习成本，只不过，接口数据比较固定化；另外一个我选择了easy-mock 比较灵活，数据完全模拟，有一点学习成本【挺简单的】，不过easy-mock 没有选在线的，现在县的网络真是不可恭维，常常连不上，这里我是搭建在我团队的服务器上。

mock搭建之 mock serve 静态服务

简单的mock serve 我们是搭建在每个项目的工程中的，也就说，每次项目启动，相应的启动一个mock serve 通过代理的方式进行处理,是基于nodejs 来实现的。

mock serve 静态服务选型： koa,koa-router，nodemon
搭建流程
  • 在项目中安装依赖，安装到开发依赖中，
$ npm install -D koa koa-router nodemon
  • 在项目的跟目录新建一个mock 的文件夹
  • 在mock的文件里新建一个serve.js 文件
  • 在mock/serve.js 中编写代码
  const path = require('path')
  const fs = require('fs')
  const Koa = require('koa')
  const Router = require('koa-router')
  let jsonfile = require('jsonfile')
  jsonfile.spaces = 4

  const app = new Koa()
  const router = new Router()

  // 运行跨域
  router.use('*', function (ctx, next) {
    ctx.set('Cache-Control', 'no-cache')
    ctx.set('Access-Control-Allow-Origin', '*')
    ctx.set('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
    next()
  })

  app.use(async (ctx) => {
    .....
    if (fs.existsSync(filePath)) {
      try {
        data = await jsonfile.readFileSync(filePath)
      } catch (err) {
        console.error('http: ' + url + ' fail!!!')
      }
    } else {
      console.warn('http: ' + url + ' not exist!!!!')
    }
    ctx.set('Content-Type', 'application/json')
    // 延迟一秒发送，为了loading
    await new Promise(resolve => {
      setTimeout(() => {
        resolve()
      }, 1000)
    })
    ctx.body = data
  })

  app.listen(ports.api, () => {
    console.log(`'http://localhost:2001 listen!!!`)
  })

TIPS: 如果需要socket的话 在上面的代码中加入

const webSocket = require('koa-websocket')
....
const webSocketApp = webSocket(new Koa())
....

/* 实现简单的接发消息 */
webSocketApp.ws.use(async (ctx, next) => {
  ctx.websocket.on('message', (message) => {
    ....
  })
  ctx.websocket.on('close', (message) => {
    /* 连接关闭时, 清理 上下文数组, 防止报错 */
  })
  next()
})

webSocketApp.listen(ports.socket, () => {
console.log(`'ws://localhost:1002 listen!!!`)
})

完成目录如下 在这里插入图片描述 启动mock serve

$ yarn run mock

在这里插入图片描述 访问 http://localhost:8446/api/pageTable

在这里插入图片描述 在这里插入图片描述 到这里简单的mock api 就完成拉，只要把json 放到影响的路径下就可以拉！！！

mock搭建之 easy-mock

Easy-mock 搭建说简单也简单，说复杂也很复杂，一般按照步骤一步一步的去装，不会出现问题的，就算出现问题，现在网上也能找打解决的方法的。

在搭建Easy-mock之前需要安装两个数据库：MongoDB 和 redis

安装 MongoDB

  • 打开官网： www.mongodb.com/download-ce…

  • 选择要下载的版本，我这边是要在linux 服务器上安装，下载的是linux版本的（mongodb-linux-x86_64-3.6.13.tgz） 在这里插入图片描述

  • 通过远程管理工具，将压缩包拷贝到Linux服务器中，执行解压操作

  • 放到服务器上/opt目录下

  • 解压到/usr/local/目录下

    $ tar zxvf mongodb-linux-x86_64-3.6.13.tgz
$ mv mongodb-linux-x86_64-3.6.13 /usr/local/mongodb

  • 创建数据存放目录

    $ mkdir -p  /usr/local/mongodb/data

  • 创建数据日志存放目录

    $ mkdir -p  /usr/local/mongodb/logs

  • 修改配置文件/usr/local/mongodb/bin/mongodb.conf

    $ cd /usr/local/mongodb/bin
$ vi mongodb.conf
- dbpath = /usr/local/mongodb/data/db #数据文件存放目录
- logpath = /usr/local/mongodb/logs/mongodb.log #日志文件存放目录
$ :wq

在这里插入图片描述

  • 启动mongodb

    $ ./mongod --config mongodb.conf
查看MongoDB是否启动
```shell
$ netstat -lanp | grep "27017"
```

在这里插入图片描述

进入MongoDB数据库控制台
```shell
$ ./mongo
```

在这里插入图片描述

进入admin数据库
```shell
$ use admin
```

在这里插入图片描述 到这里 MongoDB已经安装成功

安装 redis

  • 打开官网：redis.io/ 在这里插入图片描述

  • 我这边下载的是4.6的版本： redis-4.0.6.tar.gz

  • 通过远程管理工具，将压缩包拷贝到Linux服务器中，执行解压操作

  • 放到服务器上/opt目录下

  • 解压到/usr/local/目录下

    $ tar zxvf redis-4.0.6.tar.gz
$ mv redis-4.0.6.tar.gz /usr/local/
```![在这里插入图片描述](https://img-blog.csdnimg.cn/20200907165951534.png#pic_center)

  • 编译redis

    $ cd /usr/local/redis-4.0.6
$ mv redis-4.0.6.tar.gz /usr/local/

    在这里插入图片描述 在这里插入图片描述

  • 编译成功后，进入src文件夹，执行make install进行Redis安装 在这里插入图片描述

  • 执行redis-server 启动redis

$ ./redis-server /usr/local/redis-4.0.6/redis.conf # ./redis-server

在这里插入图片描述

  • 查看是否启动成功
$ ps -aux | grep redis

在这里插入图片描述 到这里redis 安装成功拉

下载Easy-mock代码到服务器

$ cd /opt/www
$ git clone https://github.com/easy-mock/easy-mock.git
$ cd easy-mock
$ npm install
$ npm run dev #本地运行

在这里插入图片描述

因为这是在服务器上，关闭远程工具，会自动断开，所以我们还要装个pm2

$ npm install -g pm2
$ NODE_ENV=production pm2 start app.js

在这里插入图片描述

TIPS： 安装easy-mock 有环境要求啊，否侧就安装失败！Node.js（v8.x, 不支持 v10.x）& MongoDB（>= v3.4）& Redis（>= v4.0）

avatar
文章
阅读
粉丝