vue-admin-template使用mock获取数据

前言

使用mock获取假数据，方便前后端分离开发。
涉及到的几个目录
mock/
src/api/

步骤

例如前端需要获取后端的几个变量getFourNums

1.新建src/api/fournums.js

import request from '@/utils/request'

export function getFourNums() {
    return request({
        url: '/vue-admin-template/fournum/getFourNums',
        method: 'get'
    })
}

2.新建mock/fournums.js

module.exports = [
    //getFourNums
    {
        url: '/vue-admin-template/fournum/getFourNums',
        type: 'get',
        response: _ => {
            return{
                code: 20000,
                month_num:50,
                month_reply_num:45,
                total_num:130,
                total_reply_num:110
            }
        }
    }
]

3.修改mock/index.js

const fournums = require('./fournums')
const mocks = [
  ...user,
  ...fournums
]

4.前端vue页面调用

export default {
  data() {
    return {
      month_num: null,
      month_reply_num: null,
      total_num: null,
      total_reply_num: null,
      option: {},
    };
  },
  created() {
    getFourNums().then(response =>{
      this.month_num = response.month_num,
      this.month_reply_num = response.month_reply_num,
      this.total_num = response.total_num,
      this.total_reply_num = response.total_reply_num
    })
  },
}