vue本地开发mock数据.md

Posted 2020-11-21 vipinchan

目录

• 一、为什么要mock数据？
• 二、如何mock数据？
• 三、webpack本地代理配置
• 四、mockjs使用
• 五、easymock使用

一、为什么要mock数据？

VUE项目开发过程中，前后端是完全分离，后端负责提供数据，前端负责数据展示，因此就会存在这种情况：前端需要用到数据接口的时候，后端还没开发出来，此时前端就要挂起吗？当然不是了，我们要解决的就是如何给前端模拟数据？从而实现前后端完全独立开发。

二、如何mock数据？

在团队协作过程中，在人员角色分工明确的情况下，我们可以先根据产品功能文档，定义好一份前后端交互的api文档，开发人员可根据api文档独立编码；后端比较简单，按api文档实现相应的接口，并为接口编写单元测试，mock前端请求参数即可；而前端可以引入第三者，mock接口返回结果。

如何搭建Mock API:

• 本地json文件
  这是最原始的方法了，直接将接口返回的结果，写死在本地文本文件中，如user.json，这种方式也是可以，只是会污染到我们的代码，到了项目上线的，需要修改代码请求接口；
• 本地mock api或远程mock api
  本地用mockjs，远程用easymock，这两种都可以，可以非常灵活的模拟真实api请求交互，如：http://mockapi/user模拟http://restapi/user，前后端开发完成后，可以通过修改api host一键切换至我们的api。

三、webpack本地代理配置

我们在本地开发的时候，调用远程api，存在ajax跨域请求的问题，此时可通过webpack proxy配置，实现本地请求转发至远程，解决跨域问题。
找到config/index.js修改proxyTable，如下：

    proxyTable: {
      ‘/refundApi‘: {
        target: ‘https://easy-mock.com/mock/5af0f80305d45458a763bc65‘, // 接口的域名
        // secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
          ‘^/refundApi‘: ‘‘
        }
      }
    },

假如vue的启动端口是8081，即http://localhost:8081，此时请求http://localhost:8081/refundApi/user会转发至https://easy-mock.com/mock/5af0f80305d45458a763bc65/user。

四、mockjs使用

Mock.js is a simulation data generator to help the front-end to develop and prototype separate from the back-end progress and reduce some monotony particularly while writing automated tests.
The official site: http://mockjs.com

• vue安装mockjs

npm install mockjs

• vue中使用mockjs
  示例：http://mockjs.com/examples.html

数据模板格式:

‘name|rule‘: value
属性名|生成规则: 属性值

定义mock api：

// mock/user.js
import Mock from ‘mockjs‘;//es6语法引入mock模块
Mock.mock(‘/test/‘, {
    // 属性 list 的值是一个数组，其中含有5个元素
    ‘list|5‘: [{
        ‘url‘: ‘@url‘
    }]
});

调用mock api：

// use in test.vue
import axios from ‘axios‘
import data from ‘../mock/user.js‘

axios.get(‘/test/‘).then(function(res){
   var data = res.data;
   console.log(JSON.stringify(data));
}).catch(function(err){
  console.log(err);
});

请求成功，输出结果：

{
    "list": [
        {
            "url": "http://pqibpj.gt/tqreffku"
        },
        {
            "url": "tn3270://huqptk.tv/wejcc"
        },
        {
            "url": "mid://kncn.bt/hpjutggpn"
        }
    ]
}

五、easymock使用

mockjs确实可以满足我的需求，不过在无意间发现了easymock，就喜欢上这个工具了，easymock其实就是一个在线的mockjs，提供可视化管理界面，能快速配置api地址，生成模拟数据，而其实接触mockjs那会我就有想基于mockjs自己搭建一个专门的mock api服务，没想到早就有人这么干了。

并且easymock还基于GPL3.0开放了源码，企业或个人可下载源码进行私有化部署。
github地址：https://github.com/easy-mock/easy-mock
在线服务：https://easy-mock.com