mock.js-无需等待,让前端独立于后端进行开发

https://cnodejs.org/topic/53f718218f44dfa3511af923

概述

  • 首先啦,我不认识mock.js的作者,带着需求找到mock.js让我觉得很惊艳。
  • 相对于其他同类的框架的实现,mock.js超出了我的意料。
    • 基于 数据模板 生成模拟数据。
    • 基于 HTML模板 生成模拟数据。
    • 拦截并模拟 ajax 请求。
  • 是的,mock.js只做上述的几件事,但做的足够出色。

解决的问题

开发时,后端还没完成数据输出,前端只好写静态模拟数据。

  • 数据太长了,将数据写在js文件里,完成后挨个改url。
  • 某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼。
  • 想要尽可能还原真实的数据,要么编写更多代码,要么手动修改模拟数据。
  • 特殊的格式,例如IP,随机数,图片,地址,需要去收集。
  • 超烂的破网速…

以上都不再是问题

接下来体验 拦截ajax请求并返回模拟数据

步骤1 - 安装

安装太简单,跳过

步骤2 - 配置模拟数据

Mock.mock(‘http://g.cn‘, {
    ‘name‘	   : ‘[@name](/user/name)()‘,
    ‘age|1-100‘: 100,
    ‘color‘	   : ‘[@color](/user/color)‘
});

步骤3 - 发送ajax请求(jquery版)

$.ajax({
    url: ‘http://g.cn‘,
}).done(function(data, status, xhr){
    console.log(
        JSON.stringify(data, null, 4)
    )
})

步骤4 - 查看响应的结果

// 结果1
{
    "name": "Elizabeth Hall",
    "age": 91,
    "color": "#0e64ea"
}

// 结果2
{
    "name": "Michael Taylor",
    "age": 61,
    "color": "#081086"
}

// 结果N ..
时间: 2024-10-29 04:20:08

mock.js-无需等待,让前端独立于后端进行开发的相关文章

mock.js-无需等待,随机产生数据,让前端独立于后端进行开发

mock.js所做的 基于 数据模板 生成模拟数据. 基于 HTML模板 生成模拟数据. 拦截并模拟 ajax 请求. Mock.js官方网址:http://mockjs.com/ 1.Mock.js下载安装 下载mock.js文件   https://raw.githubusercontent.com/nuysoft/Mock/refactoring/dist/mock.js  直接打开另存为就ok了 npm安装mock模块 项目路径下执行命令: npm install mock 2.1.Mo

前端开发:mock.js的简单应用(生成随机数据,拦截 Ajax 请求)

摘要 在前端开发过程中,后端接口还没有完全开发完成时,前端开发人员就需要学会自己模拟后端接口数据,更快更好的完成开发任务.模拟后端接口数据的js库有很多,今天就简单就简单的分享下mock.js在前端开发的应用(嘿嘿,毕竟这个mock应用的开发人员较多). 内容 1.Mock的安装 根据官方文档安装mock,运行安装命令安装即可. npm install mockjs 2.Mock的简单介绍 2.1.mock数据模板定义 根据官方文档示例介绍,输出一个随机数的‘*’字符串来展示mock的数据模板,

Mock.js 与 fiddler 前端模拟数据与拦截请求

最近 工作需要  接触了Mock.js. Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试.提供了以下模拟功能: 根据数据模板生成模拟数据 模拟 Ajax 请求,生成并返回模拟数据 基于 HTML 模板生成模拟数据 http://mockjs.com/ 什么入门之类的 看官网就会~~~ Fiddler   web调试利器 便于我们调试前后端数据等. Fiddler是一个web调试代理.它能够记录所有客户端和服务器间的http请求,允许你监视,设置断点,

Mock.js简易教程,脱离后端独立开发,实现增删改查功能

在我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢,答案是肯定的.应该有人通过编写json文件来模拟后台数据,但是很局限,比如增删改查这些接口怎么实现呢,于是今天我们来介绍一款非常强大的插件Mock.js,可以非常方便的模拟后端的数据,也可以轻松的实现增删改查这些操作. 1.一个简单的例子: Mock.mock('http://123.com',{

Mock.js的使用

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Consolas } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Consolas; min-height: 20.0px } span.Apple-tab-span { white-space: pre } MOCK.js 安装及使用 一.mock.js 简介 生产随机数据,拦截ajax请求. 1.前后端分离:让前端工程师独立于

mock.js模拟数据

一.mock解决的问题 开发时,后端还没完成数据输出,前端只好写静态模拟数据.数据太长了,将数据写在js文件里,完成后挨个改url.某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼.想要尽可能还原真实的数据,要么编写更多代码,要么手动修改模拟数据.特殊的格式,例如IP,随机数,图片,地址,需要去收集 二.mock优点 1.前后端分离 让前端工程师独立于后端进行开发. 2.增加测试的真实性 通过随机数据,模拟各种场景. 3.开发无侵入 不需要修改既有代码,就可以拦截Ajax请求,返回模拟的响应数

mock.js的运用

一:概念 Mock.js是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试.提供了以下模拟功能: 根据数据模板生成模拟数据 模拟 Ajax 请求,生成并返回模拟数据 基于 HTML 模板生成模拟数据 官网: http://mockjs.com/ 二:安装 cnpm install mockjs 三:数据模板定义规范DTD 数据模板中的每个属性由 3 部分构成:属性名.生成规则.属性值 // 属性名 name // 生成规则 rule // 属性值 value 'name

Mock.js开发中拦截Ajax

Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型. 在我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢,答案是肯定的.应该有人通过编写json文件来模拟后台数据,但是很局限,比如增删改查这些接口怎么实现呢,于是今天我们来介绍一款非常强大的插

Mock.js使用

Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型. 大概记录下使用过程, 详细使用可以参见Mock文档 Mock Wiki 安装 使用npm安装: npm install mockjs; 或直接<script src="http://mockjs.com/dist/mock.js"></script>; 数据模板格式: 'name|rule': val