mock的使用及取消，node模仿本地请求：为了解决前后端分离，用户后台没写完接口的情况下

借鉴：https://www.jianshu.com/p/dd23a6547114

1、说到这里还有一种是配置node模拟本地请求

    （1）node模拟本地请求： 补充一下

【1】首先在根目录下建一个data.json，用来存放一些返回数据，名字随便取好了
[2]在webpack.dev.conf.js文件里
    在这个const portfinder = require('portfinder')的下面
  
 1、  //模拟后台请求
const express = require('express')
const app = express()
var appData = require('../data.json')//加载本地数据文件
var seller = appData.seller//获取对应的本地数据
var goods = appData.goods
var ratings = appData.ratings//这里获取导数据的变量名自己看着定义好了
var mine = appData.mine
var apiRoutes = express.Router()
app.use('/api', apiRoutes)
//第一部分结束-----------------

2、第二部分，在devServer对象里面加
before(app){
          //模拟后台请求第二部分
            app.get('/api/seller', (req, res) => {
                res.json({
                  errno: 0,
                  data: seller
                })//接口返回json数据，上面配置的数据seller就赋值给data请求后调用
            }),
            app.get('/api/goods', (req, res) => {
              res.json({
                errno: 0,
                data: goods
              })
            }),
            app.get('/api/ratings', (req, res) => {
              res.json({
                errno: 0,
                data: ratings
              })
            }),
            app.get('/api/mine', (req, res) => {
              res.json({
                errno: 0,
                data: mine
              })
            })
      }


3、然后前端页面正常请求就好了
var url = 'http://localhost:8081/api/mine';
                var data = '';
                      this.$http.get(url).then((response) => {
                          var result = JSON.parse(response.bodyText).data.content;
                    this.tqzData = result.tqz.loops;
                    this.myOrder = result.myOrder;
                    this.tools = result.tools;
                    
                    this.$nextTick(function(){
                         that.setBgImg();//用setTimeout 200也可以获取到
                    })

                })

2、mock自己简单的使用

import Mock from 'mockjs'
import navlist from './navlist'
import login from './login'
import echarts from './echarts'
import table from './table'
import groupList from './groupList'
import getToken from './getToken'

let data = [].concat(navlist, login, echarts, table, groupList, getToken)

data.forEach(function(res){
    Mock.mock(res.path, res.data)
})

export default Mock


例如 login.js
var data = {
    'login': '@boolean',
    'captcha': "@image('100x40', '#FFFFFF', '@word')",
    'message': '这里是登录提交后错误提示信息@increment',
    'uid': '@id',
    'name': '@cname',
    'token': '@guid'
}

export default [{
    path: '/login',
    data: data
}]


页面调用这个接口
     axios({
                url: '/login',
                method: 'post',
                data: {
                    param:''
                }
            }).then(res => {
                if(res.login){// 把token和用户名存到  cookie里
                    commit('setToken', res.token)
                    commit('user/setName', res.name, { root: true })
                }
                resolve(res)
            })

 

3、查了下资料，mock的功能是拦截ajax的请求，模仿后台的接口返回数据，下面是看到别人文章觉得介绍很详细，摘录一下

（1）mock的使用  ****
// 使用 Mock
let Mock = require('mockjs');
Mock.mock('http://1.json','get',{
    // 属性 list 的值是一个数组，其中含有 1 到 3 个元素
    'list|1-3': [{
        // 属性 sid 是一个自增数，起始值为 1，每次增 1
        'sid|+1': 1,
        // 属性 userId 是一个5位的随机码
        'userId|5': '',
        // 属性 sex 是一个bool值
        "sex|1-2": true,
        // 属性 city对象 是对象值中2-4个的值
        "city|2-4": {
            "110000": "北京市",
            "120000": "天津市",
            "130000": "河北省",
            "140000": "山西省"
        },
        //属性 grade 是数组当中的一个值
        "grade|1": [
            "1年级",
            "2年级",
            "3年级"
        ],
        //属性 guid 是唯一机器码
        'guid': '@guid',
        //属性 id 是随机id
        'id': '@id',
        //属性 title 是一个随机长度的标题
        'title': '@title()',
        //属性 paragraph 是一个随机长度的段落
        'paragraph': '@cparagraph',
        //属性 image 是一个随机图片 参数分别为size, background, text
        'image': "@image('200x100', '#4A7BF7', 'Hello')",
        //属性 address 是一个随机地址
        'address': '@county(true)',
        //属性 date 是一个yyyy-MM-dd 的随机日期
        'date': '@date("yyyy-MM-dd")',
        //属性 time 是一个 size, background, text 的随机时间
        'time': '@time("HH:mm:ss")',
        //属性 url 是一个随机的url
        'url': '@url',
        //属性 email 是一个随机email
        'email': '@email',
        //属性 ip 是一个随机ip
        'ip': '@ip',
        //属性 regexp 是一个正则表达式匹配到的值 如aA1
        'regexp': /[a-z][A-Z][0-9]/,
    }]
})

2、如何拦截ajax请求
Mock.mock( rurl, rtype, template )
 
如 Mock.mock('1.json','get',{
   'sid|+1': 1,
} )
记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，
将根据数据模板 template 生成模拟数据，并作为响应数据返回。

3、如何在后端接口完成的时候,取消mock数据
new webpack.DefinePlugin({
       'process.env': {
            NODE_ENV: '"mock"'
       }
}),
process.env.NODE_ENV=='mock' && require('./mock/1.js');
process.env.NODE_ENV=='mock' && require('./mock/2.js');

根据webpack环境,在需要mock的时候,配置环境为mock,
在不需要mock的时候,只需要修改node_env 环境就可以了
无需注释代码,就可以完美解决后端接口还没完成的情况