前端使用mock提高开发效率

最新推荐文章于 2024-07-19 12:58:53 发布
最新推荐文章于 2024-07-19 12:58:53 发布
阅读量113 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40905766/article/details/112909729
版权

一、本地创建json

以vue-cli3项目为例，在public文件夹下，创建文件夹，假设名为mock，内容如下所示
在这里插入图片描述
然后在代码中，通过ajax请求调用该json文件所在的路径
在这里插入图片描述
请求以后，可以得到结果如下所示
在这里插入图片描述
这种方法灵活性相对较差，因接口地址不同，所以后期都需要改跟接口地址相关的代码

2.easy mock

https://www.easy-mock.com/
在这上面注册账号，然后创建项目，然后模拟地址，模拟请求
这是最方便的方式，上线时也只需要修改一个baseUrl配置。但是有一个致命缺点，因为是开源免费，所以很多人用，所以经常会服务器崩溃，网站无法访问

3.本地集成mock API

npm install mockjs -D
使用示例
首先定义api.js文件
在这里插入图片描述
然后在main.js中加载mock
在这里插入图片描述
最后在代码中调用
在这里插入图片描述

这个方法的特点是，它会拦截ajax请求，所以在浏览器的network中，是看不见有发起请求的
所谓拦截的意思是，假设后端已经开发好了/user/info接口并且已经上线，这时候，如果main.js中的flag变量还是为true，则会去加载mock里的api，则返回的结果仍然是上诉api.js里定义好的数据，并不会发起ajax请求

关于mockjs的使用，还有很多灵活的用法，可以参照官方使用示例mockjs使用示例

qq_40905766
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端Mock的使用，用于构造动态数据
04-29
在前端开发过程中，为了快速迭代和测试，我们通常需要在实际后端接口未准备好之前模拟数据，这就是前端Mock的作用。...通过学习和应用这些文件，前端开发者可以高效地进行本地开发和测试，提升开发效率并保证代码质量。
mock前端测试开发
晴天有何特别
04-20 250
使用mock搭建服务，本地测试开发，脱离后端开发，根据后端的接口文档（接口虽然没写完，但提供了接口文档），配置接口参数，后续直接改为接口联调就行了,这样可以避免前面等接口，后面忙着调 1.安装配置文件 npm i mocker-api mockjs --dev 2.搭建服务server.js var path = require('path') var fs = require('fs') var mock = require('mockjs') var app = require('express')
测试开发工程必备技能之一：Mock的使用
weixin_57724816的博客
04-29 633
1. 背景 在实际产品开发过程中，某个服务或前端依赖一个服务接口，该接口可能依赖多个底层服务或模块，或第三方接口，比如说服务 A 依赖服务B，服务B又依赖服务 C，如下图所示： 这种依赖的问题会导致原本的需求目的是要验证服务A，但由于所依赖的服务B或者服务C不稳定或者未开发完成，导致工作无法正常开展。 那作为测试工程师，面对这样的情形，我们该怎么办呢？解决这类问题的核心的思路：引入依赖服务替身，更通俗的叫法，引入Mock服务。 今天就结合unittest框架，给大家分享一些关于Mock的一些常见使用
mock接口开发
weixin_40669017的博客
11-07 276
1.理解：自己写的一个模拟的接口，在真实接口未开发完成时，用模拟接口代替真实接口，正常测试接口后面的流程 2.需要安装flask（python第三方模块，一个简单web框架） pip install flask 3.写接口：写的是一个获取当前时间的接口，请求方式不写则默认为get请求，server=flask.Flask(name) 是把当前这个python文件当作一个服务，server.r...
前端没有后台时需要使用mock情况
stone_ui的博客
04-09 1060
当前时间20180409npm install koa@1 koa-router@5 --save-dev一定要加上版本 因为koa2 需要最新的node 7.6以上才可以支持var app = require('koa')();var router = require('koa-router')();// 订单列表const orderList = require('./orderlist/or...
使用阿里RAP搭建前端Mock Server
当星宿都沉默
01-25 1万+
MockServer可以减少前端开发对后端的依赖，提高前端开发的效率，同时也利于团队的协作。 什么是RAP？ RAP是阿里团队出的一款WEB接口管理工具，帮助开发人员更高效的管理接口文档，同时通过分析接口结构自动生成Mock数据、校验真实接口的正确性，使接口文档成为开发流程中的强依赖。RAP官网：http://rapapi.org/org/index.do。这里引用官方的一张图，能更好
Mock Server利器 - Moco
weixin_30865427的博客
10-09 913
转载请标明出处：http://blog.csdn.net/shensky711/article/details/52770686 本文出自: 【HansChen的博客】 Moco介绍 Moco独立运行所需环境 如何运行Moco 启动http服务 启动https服务 Moco HTTPs API配置 如何在配置文件添加注释 约定请求Body 约定接口的ur...
前端传true后端接收为空_前端角度下的完美Mock方案
weixin_39918145的博客
12-05 2413
原文之前写在：前端mock完美解决方案实战 _个人文章 - SegmentFault 思否​segmentfault.com写在前面，本文阅读需要一定Nodejs的相关知识，因为会扩展webpack的相关功能，并且实现需要遵守一定约定和Ajax封装。沉淀的脚手架也放到Github上供给同学参考React-Starter， 使用手册还没写完善， 整体思路和React还是Vue无关，如果对大家有收获的...
Mock的好处是什么？
热门推荐
睡猫的博客
04-12 2万+
https://sanwen8.cn/p/44aKIXY.html 1. 团队可以并行工作 有了Mock，前后端人员只需要定义好接口文档就可以开始并行工作，互不影响，只在最后的联调阶段往来密切；后端与后端之间如果有接口耦合，也同样能被Mock解决；测试过程中如果遇到依赖接口没有准备好，同样可以借助Mock；不会出现一个团队等待另一个团队的情况。这样的话，开发自测阶段就可以及早开展，从而
前端开源库-mock-xhr
08-30
总的来说，mock-xhr库为前端开发者提供了一种高效且灵活的手段，可以在离线环境中对使用AJAX的代码进行充分的测试，确保代码质量，提高开发效率。通过熟练掌握并应用这个库，开发者可以更好地应对各种复杂的前端应用...
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
10-17
总结来说，使用 Angular CLI 和 simple-mock 结合，可以方便地在前端开发环境中实现 API 数据的模拟，降低前后端协作的复杂性，提升开发效率。这种方法尤其适合敏捷开发和持续集成的项目，让前端工程师能够更专注于...
前端开源库-mock-browser
08-29
总的来说，`mock-browser`是一个强大的工具，它简化了前端代码的测试过程，使开发者能在非浏览器环境中有效地测试和调试代码，提高了开发效率和产品质量。通过深入理解和熟练运用`mock-browser`，我们可以更好地应对...
详解vue-cli 本地开发mock数据使用方法
08-27
Vue CLI 是一个强大的 Vue.js 开发工具，它提供了一整套构建设置，使得开发者能够快速地搭建 Vue 项目。在本地开发过程中，由于后端接口可能还未开发...理解并熟练运用这些工具，可以显著提高前端开发的效率和质量。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1009
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
博客前端项目学习day03——框架页
最新发布
qq_53237241的博客
07-19 244
【代码】博客前端项目学习day03——框架页。
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 1008
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
vue3前端开发-如何让自己的网站适合SEO排名规则
yrldjsbk的博客
07-17 160
我们大家都知道，原始出生的vue3项目，原始代码层面，是没有meta标签的，也就是说，不适合SEO排名规则。SEO排名规则，蜘蛛爬虫抓取网站页面的内容，就会把这种meta标签内容进行采集，匹配。但是，这个技术要求大家还是应该知道的。黑马教育，课程，前端课程案例项目：小兔鲜儿超市，vue3前端项目案例。想学习vue3前端开发，拿来练习，实战的朋友们，值得一看哦。这个代码，就是我自己手工录入的。录入后，再次在浏览器界面刷新请求服务器。返回的代码模块就可以看见了。自己刚刚手工录入的meta信息出现了。
vue快速上手——创建vue项目，vue基本使用方式，路由vue-Router，转态管理vuex
weixin_73582152的博客
07-15 805
Node.js 是一个开源、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8 引擎构建的，它的设计目标是提供一种高效、轻量级的方式来构建可扩展的网络应用程序。事件驱动：Node.js 使用非阻塞 I/O 模型，使其非常适合处理大量并发连接，这使得它在构建实时应用程序（如聊天应用）时非常高效。单线程。
amis 使用mock
11-16
使用Mock可以在前端开发过程中模拟后端接口的数据返回，从而加快前端开发效率。在AMis中使用Mock也非常简单，只需要在AMis配置文件中添加mock选项即可。具体步骤如下： 1. 在AMis配置文件中添加mock选项，例如： ```json { "mock": { "GET:/api/user": { "code": 0, "msg": "success", "data": { "name": "John", "age": 18 } } }, "body": { "type": "page", "title": "AMis Mock Demo", "body": [ { "type": "tpl", "tpl": "Hello, ${name}! You are ${age} years old." } ] } } ``` 其中，mock选项中的GET:/api/user表示模拟GET请求，/api/user为请求的URL；code为返回的状态码，msg为返回的消息，data为返回的数据。 2. 在AMis页面中使用模拟数据，例如： ```json { "type": "service", "api": "/api/user", "mockDelay": 1000, "body": { "type": "tpl", "tpl": "Hello, ${name}! You are ${age} years old." } } ``` 其中，api为请求的URL，mockDelay为模拟延迟时间，body中的tpl为使用模拟数据的模板。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值