vue合家福实例(7)：使用axios，mock.js实现ajax请求以及模拟服务器数据返回

Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

根据数据模板生成模拟数据
模拟 Ajax 请求，生成并返回模拟数据
基于 HTML 模板生成模拟数据

详细文档请查看官方文档，那里写得很详细。在这里旨在体验它的使用过程。
先安装mock到项目中

npm i mockjs -S

在src中创建文件夹mock(所有模拟数据都放在这里)

用mock模拟用户数据

在mock文件夹中创建user文件夹，创建users.js，先不返回实际数据，把流程先调通。再在各个环节补全业务。

import Mock from 'mockjs'

const users = {
  list: config => {
    console.log(config) // 查看一下，请求进来的参数是什么内容
    // 返回json数据
    return {
      code: 0,
      message: 'success',
      result: []
    }
  }
}

export default users

在mock文件夹中创建index.js文件

import Mock from 'mockjs'
import UserApi from './user/users'

// user
Mock.mock(/\/userapi\/user\/list/, 'get', UserApi.list)
Mock.mock(/\/userapi\/user\/list/, 'post', UserApi.list)

export default Mock

上面代码是mock暴露的接口地址，相当于服务器的/userapi/user/lise的post与get接口。请求这个url会调用src/mock/user/users.js中的list函数。模拟了服务器接口并返回数据。
mock初步完成，接下去是使用。

使用mock接口

在src/project/admin/main.js中加入“import '@/mock'”如果，请求实际服务器的api接口，只要注释了这行就行。其它代码都不需要改变就能切换请求服务器与mock。如下是main.js的完整代码

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/plugins/element.js'
import '@/assets/style.css'
import '@fortawesome/fontawesome-free/css/all.min.css'
import '@/mock'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

ajax请求使用axios。src/request文件夹中管理着ajax请的操作。下一篇再写vue使用axios。先上代码。
src/request/base.js

import _ from 'lodash'
import iaxios from './iaxios'

const defaultPagination = {
  current: 1,
  size: 10
}

const paginationBody = (body, pagination) => {
  let _body = _.cloneDeep(body || {})
  pagination = _.defaultsDeep(pagination, defaultPagination)
  let _pag = {
    sort: pagination.sort || null,
    order: pagination.order || null,
    pageOffset: pagination.pageOffset || pagination.current || 1,
    pageSize: pagination.pageSize || pagination.size || 10
  }
  return _.defaultsDeep(_body, _pag)
}

export default {
  defaultPagination,
  paginationBody,
  get (url, options) {
    return iaxios.get(url, options)
  },
  post (url, body, options) {
    return iaxios.post(url, body, options)
  }
}

src/request/user/user.js

import Service from '@/request/base'

export default {
  list (options) {
    return Service.post('/userapi/user/list', options) // 这里用post，这样可以传的参数多一些
  }
}

增加界面与路由，测试ajax请求

src/project/admin/user/User.vue

<script>
import UserService from '@/request/user/user'
export default {
  name: 'AdminUserUser',
  data () {
    return {
      users: []
    }
  },
  methods: {
    listUser () {
      UserService.list().then(res => {
        console.log(res)
      })
    }
  }
}
</script>

<template>
  <el-main>
    <el-button type="primary" @click="listUser">测试</el-button>
    admin user page
  </el-main>
</template>

效果

现在流程已经写完了。说下请求流程(其实就是上面贴出来的代码逆序往上走)：

从User.vue的界面中点击“测试”按钮调用listUser()函数
UserService.list()->base.js中的post (url, body, options)
src/mock/index.js中的Mock.mock(/\/userapi\/user\/list/, 'post', UserApi.list)
mock/user/users.js中的list: config => {}

界面

点击“测试”按钮

请求与响应的结果

说明这个流程已经走通。也看到上页面留下来问题，mock中users.js中的list: config=>{}中收到的config是包含url、type、body。

完成mock的list

接下来用mock生成数据返回。

这里使用了moment.js来处理时间。需要先安装moment才能正常运行。"npm i moment -S"安装

import Mock from 'mockjs'
import moment from 'moment'

const List = Mock.mock({
  'list|100': [{
    'id|+1': 1,
    'name': Mock.Random.cname(),
    'age|1-100': 100,
    'phone': /^1[385][1-9]\d{8}/,
    'address': Mock.mock('@county(true)'),
    'createTime': moment(Mock.Random.datetime()).valueOf(),
    'updateTime': moment(Mock.Random.datetime()).valueOf()
  }]
}).list

const users = {
  list: config => {
    console.log(config)
    return {
      code: 0,
      message: 'success',
      result: List
    }
  }
}

export default users

User.vue加入列表组件，展示数据

<script>
import _ from 'lodash'
import UserService from '@/request/user/user'
export default {
  name: 'AdminUserUser',
  data () {
    return {
      users: []
    }
  },
  methods: {
    listUser () {
      UserService.list().then(res => {
        this.users = _.clone(res.result || [])
      })
    }
  }
}
</script>

<template>
  <el-main>
    <el-button type="primary" @click="listUser">测试</el-button>
    <el-table
      :data="users"
      border
      style="width: 100%">
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="120">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </el-main>
</template>

点击测试按钮后展示如下：

列表

这里随机生成姓名貌似有bug，把mock版本回退一下应该就可以。这里就先不处理了。

vue合家福实例(7)：使用axios，mock.js实现ajax请求以及模拟服务器数据返回

用mock模拟用户数据

使用mock接口

增加界面与路由，测试ajax请求

效果

完成mock的list

推荐阅读更多精彩内容