vue: mockjs模拟数据

mock模拟和node模拟接口都可以模拟接口，但是一定要根据接口文档来mock否则是做无用功

vue-cli3.0下根目录创建vue.config.js

module.exports = {
    // mock模拟数据
    devServer: {
        before: require('./mock/index.js')
    }
}

项目目录-mock-index.js (模拟数据)

var Mock = require('mockjs')

var data = [{
  id: Mock.mock('@id'),
  text: 'ִ执勤点一'
}, {
  id: Mock.mock('@id'),
  text: 'ִ执勤点二'
}]
var dataPage1 = []
let dataPage2 = []

for (var i = 0; i < 8; i++) {
  dataPage1.push({
    equiId: Mock.mock('@id'),
    equiName: Mock.mock('@ctitle'),
    useDate: Date.now(),
    equiManagerName: Mock.mock('@cname'),
    useDeadline: Date.now()
  })
}

for (var i = 0; i < 5; i++) {
  dataPage2.push({
    equiId: Mock.mock('@id'),
    equiName: Mock.mock('@ctitle'),
    useDate: Date.now(),
    equiManagerName: Mock.mock('@cname'),
    useDeadline: Date.now()
  })
}

module.exports = function (app) {
  app.post('/f/staff/securityStaff/dutySelect;JSESSIONID=undefined', function (req, res) {
    res.json(data)
  })

}

vue项目封装的api使用
项目-src-api-common.js

import axios from 'axios'
export function dutySelect(){
    return axios.post('/f/staff/securityStaff/dutySelect;JSESSIONID=undefined',{})
}

项目中调用该接口

//这里是页面，在调用接口

一：

当axios设置其它网站的baseurl时，就无法拦截接口（即网站和接口同一个网站时就可以拦截到）

—可以

module.exports = function (app) {
  // get console.log(req.query)
  // post console.log(req.body)
  // headers:{'Content-Type':'application/x-www-form-urlencoded'} 或 {headers:{'Content-Type':'application/x-www-form-urlencoded'}}

  // 登录
  // 1.Mock.mock和devServer下before都无法拦截接口
  // 2.匹配的是全路径还是请求的路径
  // 3.刷新问题 重新打开命令
  // 4. mock方式模拟，拦截到了netwoek没有接口信息

  app.post('/test', function (req, res) {
    res.json('test')
  })

}

–不可以