使用mock进行数据拦截实战感悟

来源：互联网发布：软件测试的目的编辑：程序博客网时间：2024/04/27 07:20

实现前后端分离，用到mock，那么怎样使用。对于小白来说很难掌握其中的技巧，其实说白了很简单就是虚拟url的拦截。动手能力差，只有理论知识很费劲NA。
下面解析一下：
一、配置方面自己搞定，直接从mock-data.js文件说起
这个里面写的就是你的数据，你需要定义url，用于文件的请求。
示例如下：
const Mock = require(‘mockjs’)
const Random = Mock.Random
const orgTreeDaily = [{
label: ‘电影’,
children: [{
label: ‘喜剧片’,
children: [{
label: ‘三傻大闹宝莱坞’
}, {
label: ‘月光宝盒’
}]
}, {
label: ‘爱情剧’,
children: [{
label: ‘初恋那件小事’
}, {
label: ‘泰坦尼克号’
}, {
label: ‘一个陌生女人的来信’
}]
}, {
label: ‘动作片’,
children: [{
label: ‘威龙’
}, {
label: ‘黄飞鸿’
}, {
label: ‘笑傲江湖’
}]
}, {
label: ‘科幻片’
}]
}]

module.exports = [
{
url: ‘/org/tree/daily’,
method: ‘get’,
data: orgTreeDaily
}
]
二、在index.js文件中定义,引入你要使用mockurl的文件
import {
GET
// POST,
// PUT,
// DELET
} from ‘./util’

export default {
getTableIndex: () => GET(‘/system/plan/index’)
}
三、在util.js中
import Vue from ‘vue’

const TO_JSON = res => res.json()
const ERROR_HANDLE = res => console.error(‘ERROR: ‘, res.status, res.statusText)

const HTTP = (method, args) => Vue.http[method].apply(Vue.http, args).then(TO_JSON, ERROR_HANDLE)

export const GET = (…args) => HTTP(‘get’, args)
export const POST = (…args) => HTTP(‘post’, args)
export const PUT = (…args) => HTTP(‘put’, args)
export const DELETE = (…args) => HTTP(‘delete’, args)
四、在org.js中定义
import { GET, DELETE, POST, PUT } from ‘./util’
export default {
getOrgTreeDaily: () => GET(‘/org/tree/daily’),
deleteOrgTreeDaily: (orgid, uid) => DELETE(/org/user/delete/${orgid}/${uid}),
putOrgTreeDaily: (orgid, uid) => PUT(/org/user/put/${orgid}/${uid})
}
五、在文件中引用,api文件中含有index.js、org.js、util.js三个文件

0 0