前后端分离-搭建本地 mock 服务

我不是女神ヾ 2022-03-01 00:07 405阅读 0赞

> **小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。**

### 搭建本地 mock 服务器 ---为了更好的前端开发 ###

> 工作中，有时候前端的很多工作需要后端的支持，但是可能后端的接口还没有开发完，或者有些时候在联调阶段，修复某个 bug 的时候，环境挂了。。。 那么这个时候，我们的很多工作无法顺利的进行下去。于是萌生了搭建本地服务器的想法。

首先粗略的说一下它的好处

*  前端更加独立，在开发阶段对于后端的依赖性大大降低。
 *  联调和开发截断，对于新增加的接口，只需要后端提供接口文档就好，不需要等到他们真正的开发完成，前端就可以自己进入联调。
 *  修复和定位 bug 更加便捷，自测阶段中对于某些极端的边界条件，我们自己就可以实现构造数据，模拟边界条件。

### mock 数据的方式（这里我提供了三种，可自行选择） ###

在线 mock 网址： [Easy mock][] （缺点: 当需要修改大量数据和新增很多 api 的时候，比较繁琐）

jsonserver+gulp 实现（ 缺点：大部分需求都能满足，但是对于需要动态解析参数的接口，支持的不够完美 ）

node+express 实现 （ 可实现几乎所有接口的情况，但是配置起来比第二种麻烦 ）

### EasyMock ###

> 官网提供详细的文档和说明，上手比较快，但是对于保密性比较强的公司，建议舍弃这种方式。

![Image 1][]

### JsonServer+Gulp+MockJs ###

> 技术选型

*  JsonSever 开启端口，提供服务。
 *  Gulp 实现监听文件和热更新的功能。
 *  MockJs 一个成熟的 mock 数据平台，通过其提供的 api，可以快速的生成大量测试数据。
 *  babel 配置 es6语法。

项目目录预览

介绍

1.  api 为数据文件夹，配置不同的项目所需要的不同接口以及其返回值，在 index中进行继承 然后暴露给 mock/db 下 最后暴露给 server。（这个可以自行更改，只要最后暴露出去就可以  
    api/project.projectOne

let projectOne = {
      'getList': {
        code: '0',
        data: [{
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
          tags: ['nice', 'developer']
        }, {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
          tags: ['loser']
        }, {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
          tags: ['cool', 'teacher']
        }]
      },
      getInfo: {
        error_no: 0,
        errMessage: '',
        data: {
          info: {
            'name': 'BeJson',
            'url': 'http://www.bejson.com',
            'page': 88,
            'isNonProfit': true,
            'address': {
              'street': '科技园路.',
              'city': '江苏苏州',
              'country': '中国'
            },
            'links': [{
              'name': 'Google',
              'url': 'http://www.google.com'
            },
            {
              'name': 'Baidu',
              'url': 'http://www.baidu.com'
            },
            {
              'name': 'SoSo',
              'url': 'http://www.SoSo.com'
            }
            ]
          }
        }
      }
    }
    
    module.exports = {
      ...projectOne
    }

api/index (支持 es5 和 es6共存写法)

const test = require('./test/test.js')
    import projectOne from './project/projectOne'
    
    module.exports = {
      ...test,
      ...projectOne
    }

1.  mock 文件夹 集中 mock 平台，我们想要通过 mock  
    平台生成的接口放在这个文件夹。  
    mock/db.js

// var Mock = require('mockjs')
    import Mock from 'mockjs'
    var api = require('../api')
    
    module.exports = {
      ...api,
      getComment: Mock.mock({
        'error': 0,
        'message': 'success',
        'result|40': [{
          'author': '@name',
          'comment': '@cparagraph',
          'date': '@datetime'
        }]
      }),
      addComment: Mock.mock({
        'error': 0,
        'message': 'success',
        'result|5': [{
          'comment': '@cparagraph'
        }]
      }),
      // post/1 和post/2 返回不同的内容
      'posts': [{
          'id': 1,
          'title': 'json-server',
          'author': 'typicode'
        },
        {
          'id': 2,
          'title': 'json-server',
          'author': 'typicode'
        }
      ],
      'comments': [{
        'id': 1,
        'body': 'some comment',
        'postId': 1
      }],
      'profile': {
        'name': 'typicode'
      }
    }

1.  router文件夹 大致结构和 api 文件夹相似，暴露路由（支持 es6 和 es5 的写法共存）

import test from './test/test'
    const projectOne = require('./project/projectOne')
    
    module.exports = {
      ...test,
      ...projectOne
    }

router/project/projectOne

module.exports = {
      '/localMock/*': '/$1',
      '/localMock/getList': '/getList',
      '/localMock/getInfo': '/getInfo',
      /*
        如果没有'/localMock/*': '/$1',
        下面接口连接无法访问到
      */
      '/localMock/getInfo?123456+.2345.3434': '/getInfo'
    }

1.  gulpfile 提供监听文件和接口热更新的功能
2.  main.js 中 提供babel 配置 es6 的写法
3.  server.js 中 启动端口，配置路由和接口返回值。

![Image 1][]

运行预览

![Image 1][]

如何运行？

[localMock项目地址][localMock]

git clone https://github.com/majunchang/localMock.git
        cd localMock
        npm i 
        npm dev | npm run start | npm run mock (都可以启动)
        npm run gulp ( 启动并且可以热更新 )

> 在查询了关于jsonserver 的 router 配置方式以后，总感觉对于动态执行参数的接口支持的不太好，于是就有了 nodemock（什么分页，什么查询等，处理起来就是一把梭！ 复制粘贴 就是刚！）

### NodeMock(node+express+嗯？...) ###

项目目录

*  api 配置接口以及接口返回值（类似与上面的 localmock 的配置）

api/projectOne

import Mock from 'mockjs'
    
    let projectOne = {
      getme: {
        name: 'xiaohong',
        age: 21,
        gender: '男',
        xuexi: 'cha11'
      },
      getshe: Mock.mock({
        'error': 0,
        'message': 'success',
        'result|1': [{
          'author': '@name',
          'comment': '@cparagraph',
          'date': '@datetime'
        }]
      }),
      liyitong: Mock.mock({
        'error': 0,
        'message': 'success',
        'result|3': [{
          'author': '@name',
          'comment': '@cparagraph',
          'date': '@datetime'
        }]
      })
    }
    
    export default projectOne

*  controller 配置动态查询参数的请求 示例中给出了 get 和 post 的两种情况

controller/project.js

import Mock from 'mockjs'
    
    export function test(req, res) {
      var arr = Mock.mock({
        'error': 0,
        'message': 'success',
        'result|10': [{
          'author': '@name',
          'comment': '@cparagraph',
          'date': '@datetime'
        }]
      })
      res.json({
        arr
      })
    }
    
    export function geturl(req, res) {
      //  对于接口中的 get 参数  我们使用 query 获取即可
      const {
        num
      } = req.query
      res.json({
        name: 111,
        age: 11,
        message: req.originalUrl,
        num: `get 请求中的接口 num 为${num}`,
      })
    }
    
    
    export function postUrl(req, res) {
      //   针对普通的 post 请求 如果是表单格式的需要单独配置一下
      res.json({
        name: `post 请求的接口中，post参数为${req.body}`,
        age: 11,
        message: req.originalUrl,
      })
    }

*  router 中为路由配置
 *  app.js 启动端口服务，接受路由和接口配置
 *  main.js babel 配置es6 语法

![Image 1][]

运行预览

> 这个项目，没有预览所有接口的功能。感兴趣的读者可以自己添加(当访问指定链接时，获取router 中的信息 进行展示出来，解决方法不唯一，可以查文档 自己添加)。

![Image 1][]

项目启动

[项目地址][Link 1]

git clone https://github.com/majunchang/node-mock
    
    cd node-mock
    npm i 
    npm run dev

![Image 1][]

**你可能感兴趣的**

*  [黑科技！Fundebug支持网页录屏!][Fundebug 1]
 *  [Async/Await替代Promise的6个理由][Async_Await_Promise_6]
 *  [30个极大提高开发效率的VS Code插件][30_VS Code]
 *  [10个JavaScript难点][10_JavaScript]
 *  [2018前端工程师成长路线图][2018]
 *  [Source Map入门教程][Source Map]
 *  [2018年最值得关注的30个Vue开源项目][2018_30_Vue]
 *  [10个最佳ES6特性][10_ES6]
 *  [重新思考单元测试][Link 2]
 *  [不要争了！技术选择没那么重要][Link 3]

[Fundebug]: https://www.fundebug.com/
[Easy mock]: https://easy-mock.com/login
[Image 1]: 
[localMock]: https://github.com/majunchang/localMock.git
[Link 1]: https://github.com/majunchang/node-mock
[Fundebug 1]: https://blog.fundebug.com/2018/05/21/fundebug_release_black_tech_replay/
[Async_Await_Promise_6]: https://blog.fundebug.com/2017/04/04/nodejs-async-await/
[30_VS Code]: https://blog.fundebug.com/2018/07/24/vs-extensions/
[10_JavaScript]: https://blog.fundebug.com/2017/07/17/10-javascript-difficulties/
[2018]: https://blog.fundebug.com/2018/09/04/2018-frontend-roadmap/
[Source Map]: https://blog.fundebug.com/2017/03/13/sourcemap-tutorial/
[2018_30_Vue]: https://blog.fundebug.com/2018/05/29/30-amazing-vuejs-open-source/
[10_ES6]: https://blog.fundebug.com/2017/08/21/10-best-es6-feature/
[Link 2]: https://blog.fundebug.com/2017/12/20/rethinking-unit-test/
[Link 3]: https://blog.fundebug.com/2018/07/19/technology-selection-is-not-critical/