前后端分离-搭建本地 mock 服务-蒲公英云

小编推荐：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语法。

项目目录预览

介绍

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
}

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'

}
}

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'
}

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

![Image 1][]

运行预览

![Image 1][]

如何运行？

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][]

项目启动

项目地址

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

![Image 1][]

你可能感兴趣的

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

[Image 1]:

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

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

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

EasyMock

JsonServer+Gulp+MockJs

NodeMock(node+express+嗯？…)

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关前后端分离技术mock

相关搭建 VUE + SpringBoot 前后端分离项目

相关 nginx搭建前后端分离工程

相关 django前后端分离开发（二）——前端搭建

相关 django前后端分离开发（一）——后端搭建

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

相关前后端分离-前端搭建（vue）

相关前后端分离-前端搭建（Vue）（1）

相关 vue+mock.js实现前后端分离

相关 mock.js模拟数据实现前后端分离

随便看看

Openshift入门：应用数据持久化（PV及PVC）

SpringSecurity认证流程分析

Shell脚本运行

SQL，什么时候用自身连接????

Linux文件基本属性

Flutter学习记录——20.动画的使用

教程文章

热评文章

1江湖小白之一起学Python （二）爬取数据的保存

2Java Shiro：简化身份验证和授权的安全框架

3Java中try()catch{}的使用方法

4Swagger注解-@ApiModel 和 @ApiModelProperty

5windows下强制杀死tomcat进程

6uni-app 条形码(一维码)/二维码生成实现

标签列表