ajax模拟返回数据,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

import UserService from '@/request/user/user'

export default {

name: 'AdminUserUser',

data () {

return {

users: []

}

},

methods: {

listUser () {

UserService.list().then(res => {

console.log(res)

})

}

}

}

测试

admin user page

效果

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

从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加入列表组件，展示数据

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 || [])

})

}

}

}

测试

:data="users"

border

style="width: 100%">

prop="name"

label="姓名"

width="180">

prop="age"

label="年龄"

width="120">

prop="phone"

label="电话"

width="180">

prop="address"

label="地址">

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

列表

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