如何通过mock数据提高前端开发效率?

简介: 我们在做项目开发的过程中,因为是同步开发,所以前端会有等后端接口的情况。为了前后端并行开发,我们一般会要求后端开发人员先定义好接口文档。这样前端通过模拟数据,就能顺畅地进行前端业务逻辑的开发了。

我们在做项目开发的过程中,因为是同步开发,所以前端会有等后端接口的情况。为了前后端并行开发,我们一般会要求后端开发人员先定义好接口文档。这样前端通过模拟数据,就能顺畅地进行前端业务逻辑的开发了。

这种模拟数据,就叫做mock数据。前端使用Mock数据进行开发,能极大的提高前端开发的效率。今天介绍两种常用的做法。

第一种,使用第三方可视化接口管理工具。

比如我公司用的就是YAPI,这样后端开发在写接口文档的时候,就自动把测试的接口也部署好了。

如果你使用这个,我大体有两个建议。

一、这种服务最好是部署到自己的服务器上。因为第三方的接口不稳定,在调试的时候偶尔挂掉会极大的影响工作效率。

二、要使用好这种第三方平台,一定要后端开发养成实时更新的习惯,否则会出现很多因为数据不实时,导致很多简单的但是需要沟通确认的问题。

很多公司使用后并没有感觉到效率提升,大概率是因为接口变动比较频繁引起的。

第二种,使用mock.js库。

mock.js是一个模拟数据的js库,官网地址:http://mockjs.com/

前端开发人员自己模拟返回的数据。这个库有两个核心功能:生成随机数据,拦截ajax请求。

前端的请求会访问到前端自己写的方法里。这样的好处有很多,比如可以通过模拟各种随机数据,各种不同场景下程序是如何反应的。

对比起直接在前端业务层使用测试代码,这个js库会更方便,前端业务逻辑层上不需要做任何修改,就能自动切换mock和真实环境。

我们可以通过启动命令区分是否使用mock测试。比如:在vue项目的package.json里添加如下命令。

"serve:no-mock": "cross-env MOCK=none vue-cli-service serve",

使用这种方式的前提是前端了解后端的返回数据结构。如果是因为接口数据格式频繁变动导致的效率低下,那不是技术能解决的。

我发现很多人还是习惯在业务代码里写测试数据,这个习惯很不好,很容易因为忘记删除测试数据而出现各种问题。以上两种mock模拟后端接口返回的方式,选一个适合自己的即可。

目录
相关文章
|
2月前
|
存储 监控 安全
前端框架的数据驱动方式如何保证数据的安全性?
总之,前端框架的数据驱动方式需要综合运用多种手段来保证数据的安全性。从传输、存储、访问控制到防范攻击等各个方面进行全面考虑和实施,以确保用户数据的安全可靠。同时,不断加强安全管理和技术创新,以应对不断变化的安全挑战。
112 60
|
3月前
|
JSON 前端开发 Java
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
文章介绍了Java后端如何使用Spring Boot框架响应不同格式的数据给前端,包括返回静态页面、数据、HTML代码片段、JSON对象、设置状态码和响应的Header。
176 1
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
|
3月前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇(六):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型,详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据,包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据,并使用 MiniMongo 实现实时数据同步。此外,还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组,实现数据的自动更新。
|
3月前
|
JSON 分布式计算 前端开发
前端的全栈之路Meteor篇(七):轻量的NoSql分布式数据协议同步协议DDP深度剖析
本文深入探讨了DDP(Distributed Data Protocol)协议,这是一种在Meteor框架中广泛使用的发布/订阅协议,支持实时数据同步。文章详细介绍了DDP的主要特点、消息类型、协议流程及其在Meteor中的应用,包括实时数据同步、用户界面响应、分布式计算、多客户端协作和离线支持等。通过学习DDP,开发者可以构建响应迅速、适应性强的现代Web应用。
|
3月前
|
JavaScript 前端开发 Python
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
71 4
|
3月前
|
NoSQL 前端开发 MongoDB
前端的全栈之路Meteor篇(三):运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例
MiniMongo 是 Meteor 框架中的客户端数据库组件,模拟了 MongoDB 的核心功能,允许前端开发者使用类似 MongoDB 的 API 进行数据操作。通过 Meteor 的数据同步机制,MiniMongo 与服务器端的 MongoDB 实现实时数据同步,确保数据一致性,支持发布/订阅模型和响应式数据源,适用于实时聊天、项目管理和协作工具等应用场景。
|
3月前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
143 0
|
3月前
|
前端开发 Java 数据库
springBoot:template engine&自定义一个mvc&后端给前端传数据&增删改查 (三)
本文介绍了如何自定义一个 MVC 框架,包括后端向前端传递数据、前后端代理配置、实现增删改查功能以及分页查询。详细展示了代码示例,从配置文件到控制器、服务层和数据访问层的实现,帮助开发者快速理解和应用。
|
5月前
|
前端开发 JavaScript
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
这篇文章介绍了使用AJAX技术将前端页面中表单接收的多个参数快速便捷地传输到后端servlet的方法,并通过示例代码展示了前端JavaScript中的AJAX调用和后端servlet的接收处理。
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
|
5月前
|
前端开发
第一种方式:使用form表单将前端数据提交到servelt(将前端数据提交到servlet)
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
第一种方式:使用form表单将前端数据提交到servelt(将前端数据提交到servlet)