背景

在项目开发过程中时常会遇到这样一种情况，需求下来以后，前后端并行开发，后端写接口，前端写页面，那么就面对一个问题，前端页面中的数据来自后台，后端接口与前端一样都处于开发中，所以前后端约定好数据结构并行开发，对于前端而言，数据结构是死数据不能模拟真实情况，于是就有了 mock 服务

mock 服务的作用

前后端分离并行开发，模拟后端接口服务

构建 mock 服务

分为两部分讲解：

• Vue 搭建 mock 服务
• React 搭建 mock 服务

安装 mock-service-plugin 插件

无论 Vue 项目或是 React 项目第一步都需要安装 mock-service-plugin 插件

npm i mock-service-plugin --save-dev

Vue 构建 mock 服务

• 安装 （上面有）
• 配置 mock-service-plugin

  // vue.config.js 
  
  const MockServiceWbepack = require('mock-service-webpack');
  module.exports = {
  	configureWebpack: {
  		plugins: [
  			// 初始化插件
  	        new MockServiceWbepack({
  	          path: path.join(__dirname, './mocks'), // mock数据存放在 mocks 文件夹中
  	          port: 9090 // 服务端口号
  	        })
      	]	
      }
  }
  

• 项目根目录下创建 mock 数据文件夹 mocks
  
• 在mocks文件夹下创建一个data.json文件
  
• 添加如下数据
  @url 接口路径
  说明： www.example.com/getUser 以获取用户信息接口为例，我们通常会把www.example.com作为 baseUrl ,getUser作为接口名称，在data.json文件文件中的 /login就相当于getUser,
  头部注释中的 @url 字段是必须的，mock 服务会遍历mocks文件夹下所有的.json文件,当请求发送到 mock 服务上时就会根据 @url 中的字段匹配请求并返回数据

/**
 * @url /login
 */
{
	"code": 404,
	"data|5-10": [
		{
			"name": "@cname",
			"id": "@guid",
			"email": "@email"
		}
	],
	"message": "success"
}

• 添加好以上信息后重启项目 （注意控制台输出）
  
• 在浏览器中打开 http://localhost:9090
  
• 点击左侧列表中 /login
  
• 在项目中使用
  
• 在页面上测试下
  
• Vue项目的mock服务就搭建完成了