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 環境就可以了
無需注釋代碼,就可以完美解決后端接口還沒完成的情況