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,我看完之后是下图的状态 很得劲啊,感觉人生已经达到了高潮 既能伪造接口,又能根据既定的规则生成对应 ...
随机推荐
- c语言-折半查找的函数
void search(int n,int num[],char name[N][10]) { int top,bottom,middle,location,flag; top=0; bottom=N ...
- leetcode-747-Largest Number At Least Twice of Others(求vector的最大值和次大值)
题目描述: In a given integer array nums, there is always exactly one largest element. Find whether the l ...
- KVO 使用及原理
KVO的基本原理大概是这样的 当一个对象被观察时, 系统会新建一个子类NSNotifying_A ,在子类中重写了对象被观察属性的 set方法, 并且改变了该对象的 isa 指针的指向(指向了新 ...
- rest-assured之如何指定请求数据(Specifying Request Data 包括请求参数、请求头、cookie等)
我们除了可以为一个请求指定请求参数之外,还可以指定请求头(header).cookies.请求体(body)以及请求内容类型(content-type)等,下面我们就来一一介绍一下: 一.请求HTTP ...
- 【算法笔记】B1050 螺旋矩阵
1050 螺旋矩阵 (25 分) 本题要求将给定的 N 个正整数按非递增的顺序,填入“螺旋矩阵”.所谓“螺旋矩阵”,是指从左上角第 1 个格子开始,按顺时针螺旋方向填充.要求矩阵的规模为 m 行 ...
- js中元素、触点等各种距离的总结
每次碰到元素滚动呀.鼠标拖动呀之类的通过对比位置来触发事件的需求时,都要花很多时间来百度怎么取到自己想要的那个值,什么scrollTop.offset等等,今天就把这些东西总结一下,以后再使用的话,就 ...
- R 安装包遇到问题(一) loadNamespace()里算'rJava'时.onLoad失败了 rJava 包的安装与载入
> library(xlsx) Error: package or namespace load failed for ‘xlsx’: loadNamespace()里算'rJava'时.onL ...
- JS获取后台返回的JSON数据
问题:通过$.get从后台获取了一段json串{"id":"1","name":"ww"},然后要拿到这里面的id和na ...
- uipath接入Python
安装UiPath.Python.Activities,然后会有五个.Activities,他们的功能分别如下: 本人原创,转发或引用请注明出处.
- ubuntu16.04 安装python3.6
https://www.cnblogs.com/yjlch1016/p/8641910.html