前端mock（前端mock接口）

本篇文章给大家谈谈前端mock，以及前端mock接口对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、mockjs 使用简介
• 2、一、mockjs介绍
• 3、Yapi平台之Mock服务
• 4、使用 MockJs — 实现真正的前后端分离

mockjs 使用简介

在前后端分厅姿离的开发模式中，数据需要通过 http 请求异步从服务器端获取，也就是前端开发需要依赖后端接口，如果不能时时保证数据获取通畅，就会造成开发阻塞。这时前端需要一种方式可以来模拟数据请求，从而更多的掌握主动权独立开发项目， mockjs 可以以无侵入的方式拦截 ajax 请求，通过模拟服务器端响应来返回数据

JSRUN

Mockjs 语法规范由数据模板定义规范和数据占位符定义规范组成，在官网的 示例文档 中提供了丰富的模板定义方法，可点击查看

Mockjs 实现的原理是对 XHR 对象的拦截，属于 js 拦截，并没有通过浏览器发出请求，所以一般会碰到以下问题。

为了处理以上问题，引入集成了 mockjs 的 mock server工具 easy-mock ，注册并登录 easy-mock 官网后，会有一个演示项目提供参考，参考演示项目可以轻松创建自己的项目，如下图

创建项目后可以基于当前项目创建请求接口，如下图，创建一个 url 为 \user 的 get 请求，会生成接口为 的完整地址，点击 用户列表 可查看返回数据，由于 easy-mock 内部集成了 mockjs ，所以在生成数据时可以采用mockjs数据模板来生成，把基础用法中的数据生成模板粘贴过来，可以生成相同数据

浏览器限制跨域访问，所以要访问到接口数据，还需要解决绝伏漏跨域问题，通过 Nginx 解决跨域我在另外一片文章有讨论过，点击可以可查，下面主要介绍下通过 webpack-dev-server 设置代理

假设本地请求的根路径为 ，通过 ajax 请求 用户列表 的完整接口为 并烂proxy/user ， webpack-dev-server 通过代理方式将请求转发到我们在 easy-mock 中定义的接口 ，此时接口地址中多了个代理标志 /proxy , 通过配置参数 pathRewrite: {'^/proxy': ' '} 将 /proxy 去掉即可。

一、mockjs介绍

官网

在做开发时，当后端的接口还未完槐裤成，前端为了不影梁蔽响工作效率，手动模拟后端接口，

1、Mock.Random

2Mock.Random 提供的完整方法（占位符）如下

3.定义数据类型，详情见官方文档

4.mockjs语法规范

Mock.setup( settings )

配置拦截 Ajax 请求时的行为。支持的配置项有：timeout

指定被拦截的 Ajax 请求的响应时间，单位是毫秒。

值可以是正整数，例如 400，表示 400 毫秒 后才会返回响应内铅渣简容；

也可以是横杠 '-' 风格的字符串，例如 '200-600'，表示响应时间介于 200 和 600 毫秒之间。默认值是'10-100'。

Yapi平台之Mock服务

YApi的 Mock 功能可以根据用户的输入接口信息如协议、URL、接口名、请求头、请求参数、返迹誉回数据（ 返回数据 ）生成 Mock 接口，这些接口会自动生成模拟数据，创建者可以自由构造需要的数据。mock模拟数据基于mock.js。

Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

l 根据数据模板生成模拟数据

l 模拟 Ajax 请求，生成并返回模拟数据

l 基于 HTML 模板生成模拟数据

进入项目，选择并点击某接口

很多时候需要根据誉州皮不同的请求参数返回不同的响应数据，可以使用高级Mock中的期望或自定义脚本来实现。

以新网项目中的联合登陆接口为例。后台逻辑为如果用户已开户则返回数据中"openAccount": true，如果未开户"openAccount": false。

接口的输入参数有：mobile，idCard，userRealName。可以设置输入userRealName=’哈哈’时为已开户条件，返回"openAccount": true。为其他值时庆差均为未开户的情况，返回"openAccount": false。下面分别用期望和脚本两种方式实现：

还是以新网银行项目为例，结合app中的H5页面来演示一下。

参考：

yapi官网教程： u;/u

Mock.js的详细内容参考： u;/u

使用 MockJs — 实现真正的前后端分离

前言： 刚刚看了下的后台，发现我技术文章中，阅读留言最多的是关于移动端的文章，甚至还有前衫人付费赞赏或咨询。关于 PC 端的技术文章就显得比较冷清了，唉，废了好大劲写的，没人看。 和我想的一样，移动端才是王道，下次找工作我也搞移动端