前端脱离后端模拟接口数据---easymock/mock.js

最新推荐文章于 2024-07-30 12:11:30 发布
最新推荐文章于 2024-07-30 12:11:30 发布
阅读量363 收藏
点赞数
分类专栏： vue 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36545813/article/details/108416428
版权
本文介绍了如何使用Easy Mock创建项目并模拟接口数据，详细讲解了Mock.js的两大特性：丰富的数据类型和Ajax请求拦截。还探讨了Mock.js的使用方式，包括直接在JS文件中使用、创建单独的JS/JSON文件导入以及通过Node开启mock服务。在Vue项目中，文章指导了安装依赖、创建mockjs文件和在main.js中导入数据接口的步骤，并提及在vue.config.js中配置webpack以使用Mock.js模拟接口请求。
摘要由CSDN通过智能技术生成

mock.js

使用easy mock 创建项目，模拟接口数据：

easymock博客参考

easymock官网文档–请使用谷歌浏览器

直接在easymock官网注册账号创建项目，创建接口。
em.demo.all回车 直接生成接口数据。
需要懂得mockjs语法规范

使用mock

1，直接下载mockjs
2，选择下载Bower模式的mock.js。这个模式是直接在html中使用mock.js。【需要借助工具Bower】

mock有两大特性：

  • 数据类型丰富：

    支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

  • 拦截 Ajax 请求

    不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。安全又便捷。

mock实例

mock官网

使用mockjs的几种方式：

最低0.47元/天 解锁文章
努力学习前端的77
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端003_模拟数据接口_easymock
细致-专业-实操
05-06 1128
Easy Mock 是一个可视化，并且能快速生成模拟数据的服务。是杭州大搜车无线团队出品的一个极其简单、高效、可视化、并且能快速生成模拟数据的在线 Mock 服务。现在 Easy Mock 内置了 Mock.js，我们可以更愉快的伪造数据了网址下载： https://github.com/easy-mock/easy-mock注意：easy-mock 的安装还是比较麻烦，需要事先安装mongodb redis。
前端-模拟接口数据
weixin_42508745的博客
11-16 421
前端-模拟接口
vue前后端分离项目模拟后台接口数据
最新发布
svygh123的专栏
07-30 817
在 Vue.js 前后端分离的项目中模拟后台接口数据通常有两种主要方法：使用前端模拟数据和设置一个简单的后端服务来模拟数据。下面详细介绍这两种方法。
前端 数据 接口 模拟
Cris_are的博客
12-31 409
一、 mock easy-mock 官网https://www.easy-mock.com/login mock 规范文档http://mockjs.com/ 二、 Charles 是一个 软件 1 新建 json文件（内容是你 想要返回的数据） 2. 利用 Charles 软件 代码中使用...
前端vue简易模拟获取数据接口
qq_38977547的博客
08-29 580
前端vue简易模拟获取数据接口1,在静态文件夹下创建json文件2，使用axios发ajax请求获取json数据。3，在页面中使用接口4，运行结果 1,在静态文件夹下创建json文件 静态文件夹下的文件不会被脚手架编译，保证能访问得到。 2，使用axios发ajax请求获取json数据。 3，在页面中使用接口 4，运行结果 ...
Node.js-node中间层项目后端使用easymock模拟的
08-09
通过EasyMock或类似的工具，可以快速生成动态、结构化的模拟数据，模拟API接口的响应，这样前端就可以按照预期进行交互，而无需等待后端接口的完成。 4. **Node.js项目结构**： "NodeMiddle-master"这个文件名可能...
easy-mock本地搭建以及EasyMock单元测试使用
Eight的博客
06-26 1069
工具
easymock-3.2.jar
11-06
EasyMock主要是为测试提供模拟数据,比如你可以模拟HttpServletRequest。
vue 项目 前端 模拟后端接口数据（vue2,vue3）
lzfengquan的博客
06-17 4317
项目中或者平常自己创建demo的过程中，往往需要后端配合，但是有时候没有后端，又需要数据，此时就展示了我们前端的强大之处，自己模拟后端接口数据。 如果自定义一个模拟后端数据， 首先创建一个文件夹放置后端数据，（backApp文件夹） 然后再命令终端，执行命令 npm init - y 或者 yarn init -y 初始化文件 之后 继续执行命令 npm i express request -D 下载对应的包 然后再创建新的文件，放置配置的接口数据（app.js文件） 主要的代码 配置 app.js 文
前端开发-模拟服务端接口数据环境 JSON-Server
weixin_44887137的博客
07-05 538
JSON-Server本质就是个可以存储json数据的server。当采用前后端分离开发时，前端开发人员可以通过使用JSON-Server，达到不依赖API，模拟服务端接口数据开发
react中前端同学如何模拟使用后端接口操作数据？
BradenHan的专栏
04-22 1408
json-server 是一个 Node 模块，运行 Express 服务器，你可以指定一个 json 文件作为 api 的数据源。项目中后端的接口往往是较晚才会出来，并且还要写接口文档，于是我们的前端的许多开发都要等到接口给我们才能进行开发。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。作为一个前端，在实现项目功能的时候，需要在前端写一个静态的json数据，进行测试。而且有的时候，还需要涉及到全模拟请求以及请求回来的过程，实现动态增删改查。
前端先行模拟接口（mock+express+json）
luemeon的博客
08-09 3338
适用于前端先行，api中有设置mock。
Apifox使用-前端接口模拟
打工人
06-28 6005
Apifox使用-前端接口模拟
Easy Mock ----数据接口
ztc_It的博客
06-06 232
Easy Mock 课程目标 官网：官网 什么是Esay Mock 使用Easy Mock 二、 什么是Easy Mock Easy Mock 是一个可视化，并且能快速生成 模拟数据 的持久化服务 三、使用Easy Mock 每个接口旁都有一个小箭头，点击之后会展开并显示该接口的详细信息。 项目名---->项目url —>项目描述—>点击创建 即可创建api ...
前端模拟接口（快速开发）
weixin_44289968的博客
07-07 1297
** 前端模拟接口（快速开发） ** Mocky 地址：https://designer.mocky.io/ 1、 2、 3、 到这里就完成模拟接口创建了，可以进行快速开发。 最近项目不是很多，可以经常发文章给大家分享一些前端技术，大姐可以关注我 ...
Mock.js　前端模拟数据工具——学习资料
guoscy的博客
01-03 2398
Mock.js　虚拟接口 mock.js介绍 1.适用场景 前后台工作不同步，后端的接口迟迟不能提供，前端的许多开发都要等到后台接口实现才能进行。 前后台分离开发，后台模块设置访问验证，本地调试请求跨域。 总结起来就是在后端接口没有开发完成之前，前端可以用已有的接口文档，在真实的请求上拦截ajax，并根据mockjs的mock数据的规则，模拟真实接口返回的数据，并将随机的模拟数
【工程化】前端开发阶段没有接口，如何模拟后端接口请求
庞囧的博客
03-15 4525
在开发的过程中，会遇到后端文档出来了但接口没出来，或者是联调的时候接口有问题等待修复的时间比较久，那么前端的调试就有困难了。自己还是新手的时候遇到这些情况的应对措施是前端写死假数据，感觉有点傻哈哈，不灵活还有一定的风险。这里举例个人积累过的方案，希望能帮助到大家。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值