关闭

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

1088人阅读 评论(0) 收藏 举报
分类:

实现前后端分离,用到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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:291227次
    • 积分:3623
    • 等级:
    • 排名:第9526名
    • 原创:81篇
    • 转载:118篇
    • 译文:0篇
    • 评论:49条
    最新评论