前端如何伪造自己想要的接口数据-json数据 用Mock.js语法和YApi来制作自己想要的json数据

最新推荐文章于 2024-04-22 00:45:00 发布
最新推荐文章于 2024-04-22 00:45:00 发布
阅读量6.4k 收藏 5
点赞数 1
文章标签： json伪造数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/okboy519/article/details/100881730
版权
本文介绍如何在前端开发中利用Mock.js语法和YApi工具，生成并管理符合需求的模拟JSON数据，以实现对理想接口数据的伪造，方便测试和开发流程。
摘要由CSDN通过智能技术生成

前端如何伪造自己想要的接口数据-json数据


场景，最近在做一个vue的大项目，但是没有数据接口啊！也没有自己想要的那个属性，想到的第一种方法居然是用node.js去爬取网页的那些数据，再传到数据库，再写接口，虽然这样可以但是脱离了自己的重心。 于是去网站搜啊搜找啊找 终于找到了一个可以自己通过设置参数就能生成自己想要的数据格式
附属上我写的demo链接： 这是写的demo链接，你按F5刷新几下会发现数组对象长度不同，而且内容也不一样、
下俩链接是官网文档和使用说明
http://yapi.demo.qunar.com 就是这个链接、
http://mockjs.com/examples.html Mock.js文档、
还有一个就是怎么用它写数组对象，必须在项目配置的时候必须开启json5
这样才能用mock的@占位符
在这里插入图片描述接下来给你们演示一个yapi写的数组对象 

{
   "status": 0,
  "message|3-5": [
    {
   
      "id": "@id",
      "name": "@name",
      "img": "@image('200x150', '
最低0.47元/天 解锁文章
okboy519
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue自己造假接口
鬼鬼的博客
09-22 370
在没有网络的时候也可以自己测试代码 在vue config.js 里面配置 module.exports = { lintOnSave: false, devServer:{ open:true, //mock API //before app 都来源于node里面的express before(app){ app.get("/api/list",(req,res)=>{ res.json( {id:1,na.
JSON数据造假和解析
shan286的专栏
12-24 5322
客户端开发通常要从服务器获取数据，所以就需要调用后台的接口，然后获得后台返回的数据，根据这些数据的格式进行JSON解析。 由于后台返回的数据会有不同的格式，所以前端也要采取不同的JSON.parse()方法进行解析。
JS 创建数组 （ 6种方法 ）
最新发布
大剑师兰特的GIS世界
04-22 1755
JS创建数组可通过字面量、构造函数Array()、Array.of()、Spread运算符、Array.from()等方式，例如：let arr = [1, 2, 3]、let arr = new Array(3)、let arr = Array.of(1, 2, 3)、let arr = [...'abc']、let arr = Array.from({length: 3}, (_, i) => i+1)。
制造假数据引入json
黄小堆
04-26 2534
1、在项目开发的过程中，如果后台接口还未开发完成，这个时候所以我们可以自建一个假数据文件(如data.json)到项目文件夹中，这样我们就可以模仿后台的数据进行开发。但是，如何在一个vue.js 项目中引入本地的json文件呢，下面就将步骤贴出来 整个项目是由vue-cli脚手架搭建而成。具体项目结构如下： 1：首先我们使用vue-cli脚手架工具打包成上图所示的样子，不会vue-cli请...
前端使用mockjs模拟接口数据
winne雪
06-23 3222
在前后端分离开发中，有时候后台开发比较慢还没有给回接口给前端，那么这时我们可以自己模拟数据（也就是mock数据）。 当然可能你会想到我新建个js文件，把数据模拟好导出再引入请求就可以啦。这个方法虽然可以，但是接口多的时候，需要模拟的数据多的时候就很不方便了，要来回修改差异，效率很低。 现在学会使用mock.js拦截ajax请求，更加方便简洁的构造你需要的假数据。 这里提醒一下，mockjs模拟的接口地址最好不要和后端给你的一致，不然到时候你忘记把mockjs去掉的时候，请求得到的还是拦截的假数据（或者可能会
使用json-server创建一个假接口来获取数据
U_Are_My_Halo的博客
04-17 952
使用json-server模拟一个假接口来获取数据 ​ 很多时候，前后端开发不同步，我们又想使用接口发送请求，来查看我们自己的代码是否正确。这个时候，json-server就是一个很好的工具了。 json-server： ​ 这是一个轻量级的 , 用来模拟假接口的工具 。它 根据一个json文件，提供假数据接口。 ​ 由于是轻量级，并且不需要写一行代码就可以实现假接口，所以也有它的缺陷，比如：不...
使用mock.js随机数据和使用express输出json接口的实现方法
01-19
前端项目都会用到后端的接口，但当后台接口没有写好的时候，这时候可以用mock.js先随机生成一些假数据来调试页面 安装mock.js 先用express创建一个nodejs的web项目，名字假如是 demo ，这里就不说了 yarn add ...
puer-mock:Puer + Mock.js =具有可配置模拟（随机）数据的可配置模拟服务器
04-13
普er + =可配置的模拟的（随机）数据的可配置模拟服务器。 启动模拟服务器从未如此简单和可配置，不...如果您的项目有package.json文件，建议将devDependencies puer-mock保存到devDependencies 。 cd yourprojectro
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
10-17
在前后端分离的开发模式中，前端开发常常需要在后端接口尚未完成或者无法联调时，使用模拟数据来测试和验证应用的功能。在这种背景下，API Mock 接口数据模拟工具变得尤为重要。Angular CLI 提供了一种优雅的方式来...
前端开发提高效率必备mock模拟接口json数据Yapi提高开发效率
poly88的博客
08-05 412
安装Yapi 这个是一个开源项目，在GitHub 或者 gitee 都可以搜索到下载下来，你的电脑要提前安装好 node.js MongoDB Yapi官网 还需要使用npm install -g pm2 pm2 是管理yapi 启动的 启动命令 pm2 start server/app.js --watch 启动监听 Yapi yapi 可以创建测试接口，模拟测试数据，他有他自己的一套规则，你也需要学习 mock官网 都弄好 你还需要熟悉一下 正则表达式 我为什么会使用这个，主要是我们后端开发工
json-schema-editor-visual-v4:yapi组件升级至antd4及样式修改
04-16
json模式编辑器可视 基于React＆antd4的高效且易于使用的json模式编辑器。 用法 npm install json-schema-editor-visual-v4 const option = { } ; import "antd/dist/antd.css" ; require ( "json-schema-editor-visual-v4/dist/main.css" ) ; const schemaEditor = require ( "json-schema-editor-visual-v4/dist/main.js" ) ; const SchemaEditor = schemaEditor ( option ) ; render ( < SchemaEditor> , document . getElementById ( "root" ) ) ; 期权对象
jsonschema 表单页面生成器，支持模板 HTML 源码二次编辑开发
weixin_34212762的博客
12-17 2287
背景 网上很多类似的表单生成，包括json schema生成表单也有好几款成熟的，但是问题都是不支持完全的表单html模板，而是提供一个模板组件，接收json schema参数去生成表单。 问题就是，我们的业务需求可能会变动，或者页面需要加一些样式，布局修改等，这种没有表单源码的表单生成，遇到不符合UI设计，或者后期需求变动页面调整都是不利的。 表单生成+支持表单html页面模板源码，好处就很明显...
yapi中使用json-schema mock数据
未来可7
01-31 7067
1. 基本的json-schema mock 首先，我们建立一个简单的json-schema，如下图所示： 该schema定义了一个返回结构，包括两个字段，data为string类型，code为integer类型。 点击“预览”，可以看到类似下面的mock数据： { "data": "non id", "code": -12100200 } 这就是最基本的mock, 即根据数据类型返回...
前端在类中定义私有属性字段
qq_29328065的博客
11-03 494
上述代码输出后会看到控制台中A对象里有一个_name的属性。从规范上来讲这就是私有的，但是所谓的私有属性，即仅允许内部成员调用，外部成员不允许调用。但显然通过这种写法定义属性私有，还是达不到预期效果。还是可以通过外部进行变量调用。通过#可以在类中定义私有字段，以及私有方法，仅允许类内部成员进行调用。
前端同学如何自己搭建web服务器配合MySQL数据库实现数据的增删改查，并将接口访问记录用日志记录下来
wxiao_xiao_miao的博客
09-17 792
接口要求： 接口1：添加学生数据，url: localhost:3000/api/student，method: post，参数格式：普通键值对，name: 字符串，age: 数值，测试：postman来测试 接口2：获取所有的学生数据，url: localhost:3000/api/student，method: get，参数：无，测试：postman来测试 准备工作：在终端初始化项目文件npm init，安装express及mysql包npminstallexpress mysql 文件..
Yapi Mock功能使用
爱捉虫的猫
12-24 3870
一、背景 为什么要使用Mock？ （1）前后端和测试 团队可以并行工作，前后端人员只需要定义好接口文档就可以开始并行工作，互不影响，只在最后的联调阶段往来密切；后端与后端之间如果有接口耦合，也同样能被Mock解决。 （2）可以开启TDD（测试驱动开发）模式，测试人员可以通过mock，在接口提测前完成用例的编写。 （3）测试可以模拟很多不好模拟的场景，比如你需要接口返回500，不再需要开发给代码动手脚即可实现。总之，想要什么返回就mock什么返回，是不是很cool？ 。。。。。。 二、yapi mock的分类
使用Mockjs模拟（假数据）接口(axios)
金乌的博客
12-11 1559
Mock.js官网mock测试就是在测试过程中，对于某些不容易构造或者不容易获取的对象，用一个虚拟的对象来创建以便测试的测试方法。
理解mockjs并且怎么去使用mockjs
weixin_46419373的博客
11-24 718
今天发现个好的东西 参考链接：https://github.com/nuysoft/Mock/wiki （mockjs的详细讲解） 一. 什么是mockjs? 生成随机数据，拦截 Ajax 请求 二. 为什么要使用mockjs? 在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口， 1.我们可以使用json文件来模拟后台数据，但比较局限，无法模拟数据的增删改查 2.使用json-server模拟，但不能随机生成所需数据 3.使用mockjs模拟后端接口，可随机生成所需数据，.
js json-schema 转换 json
jaychou1979的博客
07-27 2763
json 和json-schema的互相转换
如何使用Mock.js来mock动态生成数据
03-29
Mock.js可以动态生成各种类型的数据，包括数字、字符串、布尔值、数组、对象等等。以下是使用Mock.js来mock动态生成数据的步骤： 1. 安装Mock.js 可以通过npm安装Mock.js，命令如下： ``` npm install mockjs ``` 也可以在HTML文件中直接引用Mock.js的CDN链接： ``` <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script> ``` 2. 定义Mock数据模板 Mock.js的核心是数据模板，它是一个JavaScript对象，用来描述Mock数据的结构和类型。例如，以下是一个简单的Mock数据模板： ``` var data = { name: '@cname', // 随机生成中文名字 age: '@integer(18, 60)', // 随机生成18到60之间的整数 gender: '@boolean', // 随机生成布尔值 hobbies: ['@word', '@word', '@word'] // 随机生成三个英文单词组成的数组 }; ``` 3. 使用Mock数据模板生成Mock数据 使用Mock.js的`Mock.mock()`方法可以根据数据模板生成Mock数据，例如： ``` var mockData = Mock.mock(data); ``` `mockData`就是根据`data`模板生成的Mock数据。 4. 使用Mock数据 生成Mock数据后，可以将其用于测试、演示或其他目的。例如，将Mock数据渲染到页面中： ``` document.getElementById('name').innerHTML = mockData.name; document.getElementById('age').innerHTML = mockData.age; document.getElementById('gender').innerHTML = mockData.gender ? '男' : '女'; document.getElementById('hobbies').innerHTML = mockData.hobbies.join(', '); ``` 以上就是使用Mock.js来mock动态生成数据的基本步骤。Mock.js还支持更多高级功能，例如数据占位符、数据生成规则、拦截Ajax请求等等，可以根据需要进行学习和使用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值