前端借助工具根据接口文档mock数据

      对于前后端分离开发，必须要写接口文档。前端根据接口文档开发前端功能，后端根据接口文档，提供正确的数据，只有这样，前后端在工作上也能做到低耦合。否则前后端的开发高度耦合，敢想象吗？

     有了接口文档后，前端可以利用mock.js等工具，进行数据模拟（一定严格按照接口文档进行模拟，如果确实在实际开发中，发现接口文档写的有问题，及时与后端沟通，保证接口文档，前后端是同步更新的）。这样的话，前端开发功能不会受后端开发进度和问题的影响。这样就能分离开发。
前端功能开发完毕（或者阶段性）后，可以跟后端进行联调。在联调前，最好，用接口测试工具(例如：ApiDebug)先测试后端的接口有没有问题。如果没有问题，再进行联调。

     今天主要来说一下mock.js如何模拟数据：

• 像vue-cli这样的项目可以使用npm 安装mock.js，具体可以参考官网来实现。

在此主要强调一下如何引入mock.js，先说明一下，我使用的框架是uniapp

首先创建一个mock.js文件，然后copy代码到该文件中并保存,在main.js中引入mock.js并书写“接口”

import Vue from 'vue'
import App from './App'

import request from './common/request.js'
import api from './api/index.js'
import url from './common/config.js'
import {publick} from "./api/public.js"

Vue.config.productionTip = false
Vue.prototype.$request = request
Vue.prototype.$api = api
Vue.prototype.$url = url
Vue.prototype.publick = publick

var Mock = require("./api/mock.js");

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

//
Mock.mock('https://xxx.com/user/data',{
        "code":400,
        "data|1-20":[
            {
                "name":function() {
                  return Mock.Random.cname()
                },
                "lastLogin":function() {
                  return Mock.Random.datetime()
                }
            }
        ],
		"msg": "Token is"
 })

在文件中调用该接口

mounted() {
			this.$api.travel({mobile: this.mobile}).then(res => {
			   // 获得数据 
			   console.log(res) 
			}).catch(res => {
			　　// 失败进行的操作
			})
		}