关闭

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

1789人阅读 评论(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
查看评论

单元测试mock框架——jmockit实战

JMockit是google code上面的一个java单元测试mock项目,她很方便地让你对单元测试中的final类,静态方法,构造方法进行mock,功能强大。项目地址在:http://jmockit.org/。详细用法可以在上面找到答案。 JMockit的测试方式可以通过下面2个途径实现 一.根...
  • UltraNi
  • UltraNi
  • 2013-05-30 20:18
  • 43046

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

需求在Web的开发中,我遇到了这样的问题:前端写好的Ajax请求,在没有服务器返回数据的情况下,感觉就一直在进行一个黑箱操作。即使照着定好的接口文档来编写代码,也会出现这样那样不经意的Bug. 于是我发现了Mock.js这个能够让前端“独立于”后端进行开发的一个工具。特点 前后端分离: 让前端攻城师...
  • qq_35056292
  • qq_35056292
  • 2017-05-22 22:03
  • 1918

Charles抓包和Mock数据的方法

1.安装软件 百度搜索charles,第一个地址官方链接了:https://www.charlesproxy.com 如果没安装java环境,首次进入charles会提示需要安装java包,下一个java包就可以了。 安装后,长这样的。 打开软件。 2、设置网络 a、查询电脑...
  • alice_tl
  • alice_tl
  • 2017-07-23 21:07
  • 780

mock页面中的WebSocket

在前端页面开发中,可以通过Charles、Fiddler等工具mock页面中的http请求,但是对于websocket请求的mock确无能为力。本文展示一个工具可以拦截页面中的websocket请求,向被拦截的websocket发送自定义数据。 第一步:在调试对话框中新建一个调试会话。如下图,新建...
  • tsxuehu
  • tsxuehu
  • 2017-03-24 21:56
  • 537

Fetch的用法以及数据Mock

fetch是一种可代替 ajax 获取/提交数据的技术,有些高级浏览器已经可以window.fetch使用了。相比于使用 jQuery.ajax 它轻量(只做这一件事),而且它原生支持 promise ,更加符合现在编程习惯。安装npm install whatwg-fetch --save,即可安...
  • ZhangYaBo_Code
  • ZhangYaBo_Code
  • 2017-06-20 12:15
  • 1609

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

数据模板 #查看模板生成的数据 var data = Mock.mock({ //list|1-10 数组元素个数随机范围, id|+2 属性值递增, age|20-30数值随机范围 // test|3.2-5 3.xx-3.xxxxx 整数位3,小数位位数范围为2-5 /...
  • zgrkaka
  • zgrkaka
  • 2017-04-25 17:50
  • 5089

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

在做微信小程序的时候,后台接口一直出不出来,导致没有数据进行下一步操作,所以去学了Mock.js来实现模拟假数据,一开始也是觉得不会,但是参照着http://mockjs.com/examples.html#Random 来做还是相对简单的。 首先,先定义一个DEBUG,如果有虚拟数据则DEBUG...
  • sinat_33337475
  • sinat_33337475
  • 2017-06-07 16:32
  • 1394

Mock,前端mock数据的神器

相信有很多小伙伴在开发的时候遇到过这样的问题:静态页面写好了,就等后端给数据了!WTF?我刚写好代码你告诉我后端的接口又变了!什么破网啊根本访问不到服务器啊…这个时候就需要前端神器Mock.js了(妈妈再也不怕我和后端撕逼了)安装$npm install mock.js模拟数据Mock.mock(t...
  • StayHungry_
  • StayHungry_
  • 2016-08-10 18:20
  • 7761

数据模拟-mock.js

mock.js 数据模拟工作中,前端免不了需要和各种后台数据打交道。如果后端接口迟迟没提供,而又需要数据做展示或测试。而这时候,前端往往需要自己手动去模拟数据
  • linfenpan
  • linfenpan
  • 2015-07-16 11:32
  • 3037

前端mock数据

作为前端经常需要模拟后台数据,我们称之为mock。通常的方式为自己搭建一个服务器,返回我们想要的数据。 项目中遇到的请求链接是类似这样子的:www.abc.com/user/login,而不是请求某个文件,如果采用PHP+Apache的方式就需要做路径重写,太麻烦。这里用的是nodejs搭建。 一般...
  • sysuzjz
  • sysuzjz
  • 2015-12-15 18:42
  • 11875
    个人资料
    • 访问:413433次
    • 积分:4683
    • 等级:
    • 排名:第7380名
    • 原创:105篇
    • 转载:118篇
    • 译文:0篇
    • 评论:50条
    最新评论