vue-element-template 做后台（四）引用mock数据

在没有后端同学给我们Api接口时，常常用Mock来模拟数据。初次使用Mock可能会出错
Steps:

1. 使用mock.js模拟api返回数据，eg：root/mock/member.js

import Mock from 'mockjs'

const data = Mock.mock({
  'items|50': [ {id: '@id',username: '@name','type|1': ['normal', 'vip', 'admin']}]
})

export default [
  {
    url: '/vue-admin-template/member/list',
    type: 'get',
    response: config => {
      // something  return as api data
    }
   }
}

2. 在root/mock/index.js中注册新增的member
   ❤❤❤❤❤ 重要！！！少了这一步，就会返回404错误代码。

import Mock from 'mockjs'
import { param2Obj } from '../src/utils'

import member from './member'

const mocks = [
  ...member
]

3. 创建一个文件放置请求相关的方法，eg: root/src/api/member.js

import request from '@/utils/request'

export function fetchList(params) { 
  return request({
    url: '/vue-admin-template/member/list',
    method: 'get',
    params: params
  })
}

 // more methods

4. 在页面中愉快地渲染数据， eg:views/member/index.vue

import { fetchList, createCourse, updateCourse } from '@/api/course'
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

// something you can get from the sample of Vue-Element-Admin
// 在此省略1000字