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

原创 2017年01月03日 17:36:22

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



版权声明:本文为博主原创文章,未经博主允许不得转载。

Mock.js -- 生成随机数据,拦截 Ajax 请求,让前端攻城师独立于后端进行开发

需求在Web的开发中,我遇到了这样的问题:前端写好的Ajax请求,在没有服务器返回数据的情况下,感觉就一直在进行一个黑箱操作。即使照着定好的接口文档来编写代码,也会出现这样那样不经意的Bug. 于是我...

前端数据模拟---mock.js 使用教程

数据模板 #查看模板生成的数据 var data = Mock.mock({ //list|1-10 数组元素个数随机范围, id|+2 属性值递增, age|20-30数值随机范围 ...
  • zgrkaka
  • zgrkaka
  • 2017年04月25日 17:50
  • 3451

mock.js实例,构建相应的模拟假数据

在做微信小程序的时候,后台接口一直出不出来,导致没有数据进行下一步操作,所以去学了Mock.js来实现模拟假数据,一开始也是觉得不会,但是参照着http://mockjs.com/examples.h...

Fetch的用法以及数据Mock

fetch是一种可代替 ajax 获取/提交数据的技术,有些高级浏览器已经可以window.fetch使用了。相比于使用 jQuery.ajax 它轻量(只做这一件事),而且它原生支持 promise...

fiddler实现后端接口 mock(不需要修改开发代码)

步骤 1.  获取 接口 定义(接口返回的json串) 2.  json串放入本地txt文件中 例如, test.txt: {"retCode": "200","Msg": "ok","ret...

网络五层协议与OSI七层协议

如果大学的计算机基础不错,这应该都是计算机网络教材里面的内容。之前在面试的时候面试官有问过类似的通信知识,瞬间石乐志。于是在自己原有的理解上重新学习一遍,记下此篇。...

最全免费CDN公共库——网站提速

转载自 http://blog.赵阳.cn/cdnjs.html I. 开源静态文件 CDN 我们的目标是提供这样一个仓库,让它尽可能全面收录优秀的开源库,并免费为之提供 CDN 加速服务,使之有...

如何整合SpringMVC和Swagger2,并且使用Mock数据进行联调

在开发中,我们经常会需要对接口进行联调沟通,然而这是在整个开发周期中最占用时间的一块。尤其最近在接手一个项目中,采用前后端分离开发的模式,写前端的同学完全不懂后台代码(对,我们之前都是一个人写前后端所...

iOS开发mock接口数据(三)之实战教程

接上篇文章,我对一些匹配的方法进行了介绍,这篇文章主要为大家说说实际操作的步骤。plist文件如何配置  plist文件的配置对于APIMock的至关重要,直接关系到能否运用AOP编程思想实现JKAP...

EasyMock 新版本用法和实战经验总结和mock.js 使用的用法

easy-mock 新版本用法和实战经验总结,mock.js 使用的用法。
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用mock进行数据拦截实战感悟
举报原因:
原因补充:

(最多只允许输入30个字)