首先还是那句话,进来的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的更多相关文章

  1. Mockjs,模拟数据生成器

    (推荐使用)Mock.js是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试. 提供了以下模拟功能: 1. 根据数据模板生成模拟数据. 2. 模拟Ajax请求,生成并返回模拟 ...

  2. mockjs模拟前后端交互

    mockjs是用于mock数据(造假数据)的组件. mockjs官网链接为:http://mockjs.com/:mockjs官网有mockjs的源代码.API以及示例. mockjs拦截ajax请求 ...

  3. 让我们来简单说说mockjs吧!

    背景: 新接手了一个更新CRM的客户管理项目,负责添加三张活动财务表与操作的模块,接到任务时候,后台还没有做数据,所以用到了假数据,So就是这里所说的mockjs. 介绍: mockjs让前端独立于后 ...

  4. mockjs学习总结(方便前端模拟数据,加快开发效率)

      基本介绍: 在我们前端开发中经常遇到这样的事情,接口没有写好,只能写静态页面,如何才能用很简单的方法模拟后端数据呢?mockjs就干了这件事,而且干的还挺好. 下面是我作为初学者的一些总结经验,期 ...

  5. vue+mockjs 模拟数据,实现前后端分离开发

    在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰 ...

  6. dva + antd + mockjs 实现基础用户管理

    1.安装dva-cli npm install dva-cli -g 2.创建应用 dva new dvadashboard   [dvadashboard为项目名]       3.安装mockjs ...

  7. vue 利用mockJs 模拟数据

    工作这几年一直用Java 开发,前端的技术自己也忘得差不多了(实际上自己也不怎么会),最近参与的项目是用VUE +  Element-ui + springboot 写的,由于需求没有定,先画一个de ...

  8. mockjs,json-server一起搭建前端通用的数据模拟框架

    无论是在工作,还是在业余时间做前端开发的时候,难免出现后端团队还没完成接口的开发,而前端团队却需要实现对应的功能,不要问为什么,这是肯定存在的.本篇文章就是基于此原因而产出的.希望对有这方面的需求的同 ...

  9. vue中如何使用mockjs摸拟接口的各种数据

    mockjs的作用 生成模拟数据 模拟 Ajax 请求,返回模拟数据 基于 HTML 模板生成模拟数据(后续更新) 帮助编写单元测试(后续更新) Vue 中使用 mock 有两种使用方式,一种是仅编写 ...

  10. MockJS和Easy Mock使用

    之前做mock数据一直用的json-server,今天同事给我推荐了很好用的工具:Easy Mock,我看完之后是下图的状态 很得劲啊,感觉人生已经达到了高潮 既能伪造接口,又能根据既定的规则生成对应 ...

随机推荐

  1. 数据结构65:快速排序算法(QSort,快排)

    上节介绍了如何使用起泡排序的思想对无序表中的记录按照一定的规则进行排序,本节再介绍一种排序算法——快速排序算法(Quick Sort). C语言中自带函数库中就有快速排序——qsort函数 ,包含在 ...

  2. css 命名规划

    命名规范 前言中略微描述了 CSS 怎么使用:下面介绍一下 CSS 的一些代码规范: CSS 命名一般采用小写英文单词或组合命名,单词与单词间以"-"分割:英文单词不缩写,除非一看 ...

  3. CSS: Multiple Attribute Selector [name="value"][name2="value2"]

    this.document.querySelectorAll('div[id*="dayselector"][class*="x-autocontainer-innerC ...

  4. 【算法笔记】B1019 数字黑洞

    1019 数字黑洞 (20 分)   给定任一个各位数字不完全相同的 4 位正整数,如果我们先把 4 个数字按非递增排序,再按非递减排序,然后用第 1 个数字减第 2 个数字,将得到一个新的数字.一直 ...

  5. (转)Shell分析服务器日志

    一.目录 转载链接:https://mp.weixin.qq.com/s/W1ekSiHgbGInqQ9HmZaJDA 自己的小网站跑在阿里云的ECS上面,偶尔也去分析分析自己网站服务器日志,看看网站 ...

  6. PIE_SDK.NET功能表

  7. Win32创建异形窗口

    大家都见过在windows下各种气泡窗口.输入法窗口以及其他一些窗口,这些窗口看起来不像传统的windows窗那样,上面是标题栏,下面是窗口的客户区.这些窗口形状各异,可以是一个多边形,一幅图,甚至是 ...

  8. github创建本地库后关联远程库

    在进行新项目开发时,有时候并不一定先创建远程库,而是先在本地将项目创建,到一定阶段后再与远程库关联.下面步骤解决本地库与远程库在这种情形. 1. 初始化本地库,既然项目已经创建了,相信这个也已经知道了 ...

  9. Oracle TM锁和TX锁

    CREATE TABLE "TEST6" ( "ID" ), "NAME" ), "AGE" ,), "SEX ...

  10. selenium IDE 命令二(断言、验证、等待、变量)

    测试用例需要做断言和验证,在seleniumIDE中提供了断言和验证来对结果进行比较 首先通过打开seleniumIDE,在页面任意一个元素右键,选择最后一个选项“show all available ...