mock模拟的数据能增删改查吗_使用Swager API Docs和easy-mock生成模拟数据
前面文章已经搭建了本地的easy-mock
本地搭建Easy-Mock实现模拟数据
常见的Mock方式:
- 将模拟数据直接写在代码里
- 利用javascript拦截请求
- 利用Charles、Fiddler等工具拦截请求
以上方式各有千秋,我们要说的是使用Swager API Docs和easy-mock生成模拟数据
登录easy-mock创建项目
点击+号创建项目
填写项目信息
- 归属 :默认已经生成好了
- 项目名:与你的实际项目名一致,就可以了
- 项目基础URL:没有特殊要求,尽量简短表意,和你的项目保持一致就可了
- 项目描述:输入简短的项目描述
- Swagger Docs API:重要,输入Swagger描述文件URL,Easy Mock会自动基于此描述文档创建Mock接口
描述文件的URI可以从接口文档中找到,如图所示:
接口文档如图所示:
创建项目完成,自动生成了所有的Mock接口
预览接口
可以看到,自动生成并返回的Response数据,这个时候就可以完全脱离后端了,前端可以在后端还没有开发或开发不完善的情况下,使用该Mock数据也能完成前后端分离的调试
如下图所示:
前端只需发出如下图请求即可:
什么?不相信,我们试试!!
var baseUrl ="http://localhost:7300/mock/5eaaed4a7a3fdf16dc164663/mall" ; var params = { url: baseUrl +'/subject/list',//基础url拼接接口url success: function (res) {//success为请求成功之后,会返回接口内容,打印res就能拿到 console.log(res); }, error: function (error) { console.log(error); } };//以下是ajax请求过程 var xhr = new XMLHttpRequest(); // 定义xhr对象的请求响应事件 xhr.onreadystatechange = function() { switch(xhr.readyState) { case 0 : //alert("请求未初始化"); break; case 1 : //alert("请求启动,尚未发送"); break; case 2 : //alert("请求发送,尚未得到响应"); break; case 3 : //alert("请求开始响应,收到部分数据"); break; case 4 : if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { var data = xhr.responseText; params.success(JSON.parse(data)); }else { var data = xhr.responseText; params.error(JSON.parse(data)); } break; } }; xhr.open("get", params.url, true); xhr.send(JSON.stringify(params.data))
以下内容正是接口中编写的返回的内容:
编辑数据
以上的Mock数据有些可能是不符合我们要求的,需要修改,点击编辑数据
左侧是对数据对象的说明,在这里改成我们想要的数据即可,需要了解Moke.js语法
简单的举个栗子:
categoryId使用了正则表达式定义在了0-9范围内
查看返回的数据:这时的categoryId只能在0-9之间了,因为有正则表达式的约束。
更多的Mock.js语法查看文档:https://github.com/nuysoft/Mock/wiki
一键模拟数据,让我们不再依赖后端,只专注前端的业务,等后端把接口写完之后,再进行联合调试就可以了,这样我们就不费吹灰之力搞定了所有难题。
mock模拟的数据能增删改查吗_使用Swager API Docs和easy-mock生成模拟数据相关推荐
- mock模拟的数据能增删改查吗_新课通知: React+Umi3+Typescript+Mock
各位小伙伴大家好, 这是一套经过多人像我反馈需求而录制的课程. 我们曾上线过一个React的插拔式框架Umijs版本2, 以及dvajs的课程. 但由于Umijs版本3上线了, 并且使用的语言是typ ...
- mock模拟的数据能增删改查吗_如何在Vue中使用Mockjs模拟数据的增删查改
之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...
- datatables增删改查php,jQuery+datatables插件实现Ajax加载数据与增删改查功能示例_白峰_前端开发者...
本文实例讲述了 这里给大家分享一下我在项目中用datatables实现ajax加载数据与增删改查 注意,需要引入 搜索 新增 编辑 删除 职业姓名性别爱好 //点击查找 $(" ...
- php mysql增删改查实例_php连接数据库实现用户数据的增删改查实例
下面小编就为大家带来一篇使用PHP连接数据库_实现用户数据的增删改查的整体操作示例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 main页面(主页面) 代号 姓名 性 ...
- vue修改数据连接数据库_vue实现数据的增删改查
在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...
- Vue+ElementUI纯前端技术实现对表格数据的增删改查
Vue+ElementUI纯前端技术实现对表格数据的增删改查 页面展示效果 一.页面结构 分为三个部分 head body 以及script 一般我个人是在head中引入一些组件库 , 还有一些样式 ...
- Node+Vue实现对数据的增删改查
这是一个用于学生签到的小例子.主要用到的技术有node和Vue:用node搭建小型服务器,配置好路由,前端用vue写好组件,数据库采用的是mysql. 文件结构如下: 主要是功能是对数据的增删 ...
- SQL Server创建数据库和数据的增删改查
SQL Server创建数据库和数据的增删改查 本文是针对数据的增删改查,数据的创建 首先我们使用命令创建sql server数据库 D盘新建一个文件夹DB use master go --创建数据库 ...
- Redis概述_使用命令对redis的数据进行增删改查_Jedis连接redis进行数据操作_redis进行数据缓存案例
学习目标 redis 概念 下载安装 命令操作 1. 数据结构 持久化操作 使用Java客户端操作redis Redis 前言(从百度上抄的, 看看了解一下, 懒得排版了) 1. 概念: redis是 ...
最新文章
- python基础学习11----函数
- UVa 591-Box of Bricks
- android 坚挺通话广播_关于短信黑名单 BroadCast
- 四招搞定托业(TOEIC)英语阅读
- pandas学习笔记(十一):绘图(Plotting)
- 你了解 JDK 8 Stream 数据流效率吗?千万级数据量性能如何?
- setuptools-scm was unable to detect version for‘…/…/某git包‘
- xray 被动_google搜索爬取xray被动扫描
- 计算机磁盘清理软件,清理磁盘空间的7种技巧,电脑装机、安装系统必备
- 在可达性分析中存在的问题
- Anchor-based 与 Anchor-free 优缺点
- 相位式激光测距法中相位产生原理
- The Linux Kernel Module Programming Guide 2.4 中文版
- vsftpd的配置详解
- 卸载重装 Windows 10 内置应用的最全方法,还你一个干净清爽的系统
- PSP 1000, PSP 2000, PSP 3000, PSP Go 相关
- Windows平台下Glade+GTK开发环境的搭建
- 30个特别酷的SharePoint站点
- safi 中placeholder不垂直居中
- 免费开源的ERP Odoo设备维修管理功能应用解析
热门文章
- DFTug - Getting Started(上篇)
- html点击区域,求助HTML+CSS可以点击区域外关闭实现。
- 11.Verilog中如何避免Latch
- 【火炉炼AI】机器学习007-用随机森林构建共享单车需求预测模型
- C++使用GDI+实现图片格式转换
- thinkphp5中资源文件路径的使用
- jQuery 文件上传插件:uploadify、swfupload
- Android中Activity之间的数据传递(Intent和Bundle)
- 如何将Windows Server域(AD活动目录)中的用户导出并导入至Outlook2010通讯簿
- [体感游戏]关于体感游戏的一些思考(三) --- 射击