VUE2.X 使用 Mock 模拟接口

目录

1. 安装插件

2. 接口模拟

---

1. 安装插件

npm install mockjs --save-dev

2. 接口模拟

1. 在src目录下创建 mocker/mockData/index.js，内容为 mock 数据：

// 静态数据
const resultList = [
  {
    id: '8a58c6736f452c10016f4604c6ce0687',
    resourceType: '0',
    deptName: '研发中心',
    isDefault: '0'
  },
  {
    id: '40283f8172a6f8590172a7ff0bb50b7d',
    resourceType: '0',
    deptName: '运行管理中心',
    isDefault: '1'
  }
]

// mock一组动态随机数据
const produceNewsData = function () {
  let articles = []
  for (let i = 0; i < 100; i++) {
    let newArticleObject = {
      title: Random.csentence(5, 30), //  Random.csentence( min, max )
      thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
      author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
      date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
    }
    articles.push(newArticleObject)
  }
  return {
    data: articles
  }
}

const configDesign = Object.assign(
  {},
  {
    'POST /api/appsys/getDeptList/v1': (req, res) => {
      return res.json({
        id: req.id,
        list: resultList,
        errorDesc: null,
        retCode: '200',
        message: null
      })
      
    },
    'GET /api/appsys/getArticleList/v1': {
      produceNewsData
    },
  }
)
module.exports = configDesign

2. 在src目录下创建 mocker/index.js ，内容为：

const mockData = require('./mockData')
const proxy = Object.assign(
  {}, // proxy自身，不要动
  mockData
);
module.exports = proxy;

3. 在 vue.config.js 文件中添加以下内容：

let apiMocker = require('mocker-api');
const mocker = path.resolve(__dirname, 'mocker/index.js');

module.exports = {
  port: 3000,
  devServer: {
    proxy: {
      '/api/bpm': {
         target: 'http://127.0.0.1:8080',
         ws: false,
         changeOrigin: true
     },
     ...
    },
    before(app) {
      // 如需mock才要开启，本地java服务模式请关闭
      apiMocker(app, mocker, {
        changeHost: true
      });
    }
  }
}

4. 在需要使用的组件中使用：

export default {
   data () {
     return {
       articleData: [],
       deptData: []
     }
   },
   methods: {
     requestArticleData () {
       this.$axios.get('/api/appsys/getArticleList/v1')
         .then(e => {
           let data = e.data
           if (data.data && Array.isArray(data.data)) {
             this.articleData= data.data
           }
           console.log(this.articleData)
         })
         .catch(err => {
           console.log(err)
         })
    },
    requestDeptData () {
      this.$axios.post('/api/appsys/getDeptList/v1', {id: 'dfafgrgegbhc'})
        .then(res => {
          if(res.data.list.length){
               this.deptData = res.data.list;
          }
        })
        .catch(err => this.$message.error(err));
    }
  },
  created () {
    this.requestArticleData();
    this.requestDeptData();
  }
}