前端Vue使用封装Mock.js和api请求模拟数据

mock的使用改进，可参考上一篇文章mock的使用

1) mock.js

// mock.js 文件
import Mock from 'mockjs' // 引入mockjs
const Random = Mock.Random // Mock.Random 是一个工具类，用于生成各种随机数据
const dataList = [] // 用于接受生成数据的数组
for (let i = 0; i < 26; i++) {
    
     // 可自定义生成的个数
  const template = {
    
    
    'id': i, // id
    'Name': Random.name(), // 生成姓名
    'Address': Random.province() // 生成地址
  }
  dataList.push(template)
}
import axios from 'axios'
// 模拟分页
Mock.mock('http://localhost:8080/api/list', 'post', (params) => {
    
    
  var listQuery = JSON.parse(params.body)
  var pageIndex = (listQuery.page - 1) * listQuery.pageSize
  var [index, size, total] = [pageIndex, listQuery.pageSize, dataList.length]
  var newDataList = dataList.slice(index * size, (index + 1) * size)
  return {
    
    
    'code': '200',
    'message': 'success',
    'data': {
    
    
      'listQuery': listQuery,
      'tableData': newDataList,
      'tableHead': [{
    
     column: 'id', columen_comment: '用户id' }, {
    
     column: 'Name', columen_comment: '姓名' }, {
    
     column: 'Address', columen_comment: '地址' }],
      'total': total
    }
  }
})

export function list() {
    
    
  return axios.post('http://localhost:8080/api/list', {
    
     page: 1, pageSize: 30 })
}

2) test.vue

<script>
import {
    
     list } from './mock'
export default {
    
    
  mounted() {
    
    
    this.list()
  },
  methods: {
    
    
    list() {
    
    
      list().then(res => {
    
    
        console.log(res)
      })
    }
  }
}
</script>