mockjs
首先还是那句话,进来的GodBoy and GoodGirl 不妨看完再离开. 一个走在路上的前端攻城狮-along
一、mock的由来
mock有“愚弄、欺骗”之意,在前端领域,mock可以理解为我们前端开发人员制造的假数据。也就是说不是由后台真实制造,而是由我们其他一些方式模拟的数据,例如借mock.js。
通过这种方式,我们能在一定程度上实现前后端分离的开发流程。因为如果前端开发人员能够自己模拟数据的话,就不必等着拿到后端的接口才能完成剩下的工作,使得前端人员独立开发的能力增强,
在此基础上做到前端后台各自独立的开发(当然这个前提是有写好详细地公共数据接口的文档)最后对接的工作是前后端联调数据,因为前端mock的辅助,我们尽可能地减少了前后端对接过程中的效率
损耗 例:接口文档实例
二、安装与使用
.npm install mockjs去安装mock.js模块
.简单配置 在src目录下创建mock文件,建立index.js文件。在index.js文件简单的写一点模拟的数据
const Mock=require('mockjs');
var template={
'data|1-4':[{
'title':'@title',
'article':'@article'
}]
}
Mock.mock('/api/data',template);
.在mai.js文件中引入index.js文件
.在组建中用axios请求接口
mounted(){
this.$http({
url:'/api/data',
type:'POST',
dataType:'json'
}).then(res=>{
console.log(res)
})
}
}
.请求结果
{data: {…}, status: , statusText: "OK", headers: {…}, config: {…}, …}config: {adapter: ƒ, transformRequest: {…},
transformResponse: {…}, timeout: , xsrfCookieName: "XSRF-TOKEN", …}data: {data: Array()}headers: {}request: MockXMLHttpRequest
{custom: {…}, match: true, readyState: , timeout: , onreadystatechange: ƒ, …}status: 200statusText: "OK"__proto__: Object
就简单的介绍下啦 详细的到mock.js官网查看 那里有更详细的教程,我只带大家了解了解,知道是做什么的。发表的时候发现少于150字,我就再啰嗦两句,凑个字数啊啊啊啊啊啊~
mockjs的更多相关文章
- Mockjs,模拟数据生成器
(推荐使用)Mock.js是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试. 提供了以下模拟功能: 1. 根据数据模板生成模拟数据. 2. 模拟Ajax请求,生成并返回模拟 ...
- mockjs模拟前后端交互
mockjs是用于mock数据(造假数据)的组件. mockjs官网链接为:http://mockjs.com/:mockjs官网有mockjs的源代码.API以及示例. mockjs拦截ajax请求 ...
- 让我们来简单说说mockjs吧!
背景: 新接手了一个更新CRM的客户管理项目,负责添加三张活动财务表与操作的模块,接到任务时候,后台还没有做数据,所以用到了假数据,So就是这里所说的mockjs. 介绍: mockjs让前端独立于后 ...
- mockjs学习总结(方便前端模拟数据,加快开发效率)
基本介绍: 在我们前端开发中经常遇到这样的事情,接口没有写好,只能写静态页面,如何才能用很简单的方法模拟后端数据呢?mockjs就干了这件事,而且干的还挺好. 下面是我作为初学者的一些总结经验,期 ...
- vue+mockjs 模拟数据,实现前后端分离开发
在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰 ...
- dva + antd + mockjs 实现基础用户管理
1.安装dva-cli npm install dva-cli -g 2.创建应用 dva new dvadashboard [dvadashboard为项目名] 3.安装mockjs ...
- vue 利用mockJs 模拟数据
工作这几年一直用Java 开发,前端的技术自己也忘得差不多了(实际上自己也不怎么会),最近参与的项目是用VUE + Element-ui + springboot 写的,由于需求没有定,先画一个de ...
- mockjs,json-server一起搭建前端通用的数据模拟框架
无论是在工作,还是在业余时间做前端开发的时候,难免出现后端团队还没完成接口的开发,而前端团队却需要实现对应的功能,不要问为什么,这是肯定存在的.本篇文章就是基于此原因而产出的.希望对有这方面的需求的同 ...
- vue中如何使用mockjs摸拟接口的各种数据
mockjs的作用 生成模拟数据 模拟 Ajax 请求,返回模拟数据 基于 HTML 模板生成模拟数据(后续更新) 帮助编写单元测试(后续更新) Vue 中使用 mock 有两种使用方式,一种是仅编写 ...
- MockJS和Easy Mock使用
之前做mock数据一直用的json-server,今天同事给我推荐了很好用的工具:Easy Mock,我看完之后是下图的状态 很得劲啊,感觉人生已经达到了高潮 既能伪造接口,又能根据既定的规则生成对应 ...
随机推荐
- 为什么int类型的数据可以存储超过9999?
int占4字节,4*8=32位,10进制取值范围为 (-2^31-1)~(2^31-1):-2147483648~2147483647 package test; public class test1 ...
- Source Insight 查看函数调用关系
研究海思SAMPLE时,使用Source Insight查看源码,函数调用关系查看: 选中一个函数,右键选择"Show in Relation Window" 显示界面的相关设置: ...
- linux中ls命令使用选项
ls:英文全名:List即列表的意思 -a 列出目录下的所有文件,包括以 . 开头的隐含文件.-b 把文件名中不可输出的字符用反斜杠加字符编号(就象在C语言里一样)的形式列出.-c 输出文件的 i 节 ...
- Kafka:Consumer
1.预览 1.1 消费者组(Consumer Group) 一个consumer group可能有若干个consumer实例 同一个group里面,topic的每条信息只能被发送到group下的一个c ...
- element-ui table多选CheckBox参数解析
element-UI里的table表格与多选框CheckBox的组合很常用,官网也给了很多参数,自己总结了一下,方便日后使用 1.简易用法,没有附加的功能 要在表格里使用CheckBox很简单,只需设 ...
- UGUI优化总结
1.动静分离 canvas下元素变化时,会使整个canvas重新绘制.因此将ui经常改变和不怎么改变的部分分离,分别使用不同的canvas. 2.图集优化 不同界面的ui,可以打包成不同的图集,一些公 ...
- 【CSS】 布局之多列等高
这两天看了不少文章,对于css布局多了一些理解,现在来总结下. 我们来写一个最普遍的Top.Left.Content.Right.Foot布局. 第一步:自然是写一个坯子 <!DOCTYPE H ...
- java设计模式之桥梁模式(Bridge)
1.桥梁模式 与 策略模式 非常相似 (其实很多设计模式都相似,因为所有的模式都是按照设计原则 而设计出来的,设计原则就相当于武功的心法,设计模式就是招式,只要心法过硬,就可以无招胜有招了.) 这里也 ...
- FocusBI: 商业智能场景(原创)
关注微信公众号:FocusBI 查看更多文章:加QQ群:808774277 获取学习资料和一起探讨问题. <商业智能教程>pdf下载地址 链接:https://pan.baidu.co ...
- Android OpenGL教程-第四课【转】
第四课 旋转: 在这一课里,我将教会你如何旋转三角形和四边形.左图中的三角形沿Y轴旋转,四边形沿着X轴旋转. 我们增加两个变量来控制这两个对象的旋转.这两个变量加在程序的开始处其他变量的后面.它们是浮 ...

