vue项目中使用mock模拟数据

最新推荐文章于 2023-07-25 17:30:11 发布

原创最新推荐文章于 2023-07-25 17:30:11 发布 · 804 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用Mock.js库创建模拟数据，并设置一个简单的HTTP请求响应模拟，以帮助前端开发者在后端接口未完成前进行开发工作。

部署运行你感兴趣的模型镜像

1. 安装mock.js

npm install mockjs --save-dev

2. 新建mock文件夹和mock.js

mock.js里面的内容

const Mock = require('mockjs')

//使用mockjs模拟数据
const listData = Mock.mock({
  'reCode': 0,
  'message': '成功',
  'data': {
    'total': 7104803,
    'monthAdd': 104803
  }
})

Mock.mock('/getListData', 'post', listData)

3. 在main.js里面引入mock.js

import '../../mock/mock'

您可能感兴趣的与本文相关的镜像

Wan2.2-T2V-A5B

文生视频

Wan2.2

Wan2.2是由通义万相开源高效文本到视频生成模型，是有50亿参数的轻量级视频生成模型，专为快速内容创作优化。支持480P视频生成，具备优秀的时序连贯性和运动推理能力

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

古娜拉黑暗之神哇咔咔

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【Vue】使用mock模拟数据

小绵杨

05-02

7601

目录一、mock.js二、vue项目使用mock.js三、mock.js文档一、mock.js 对于前后端分离的项目，前端不得不等待后端接口写好后再请求数据。或者自己需要手写一些’死’数据来模拟，这是比较浪费时间的，也是十分无聊的。引入mock.js，这样就可以在后端没有提供接口的时候，自己模拟一个mock接口去请求，并且mock.js甚至可以返回你希望得到的随机数据！官方网站地址：http://mockjs.com 二、vue项目使用mock.js 下面我们尝试在vue中引入mock和axios来

Vue3+vite项目中使用mock模拟接口

最新发布

weixin_52941842的博客

05-29

1682

注意此处如果配置出错可能是vite-plugin-mock依赖的版本有问题，重新安装一下依赖指定版本即可，这里推荐使用2.9.6版本的。根路径（src平级的目录）新建文件夹mock，新建文件user.ts添加以下代码。分别安装vite-plugin-mock跟mockjs两个插件。vite.config.ts中添加配置，主要是红色标记的配置。测试结果，响应结果为200，模拟请求成功。安装axios进行测试。

参与评论您还未登录，请先登录后发表或查看评论

mock在vue项目中的使用 —— json写法

myisyourbb的博客

07-15

1556

mock在vue项目中的使用 —— json写法什么是mock第一步（创建vue项目，安装插件）第二步（创建mock文件夹）第三步（配置vue.config.js文件）第四步（在项目中使用）第五步（添加环境边境变量）补充什么是mock Mock是什么. 可能还有些读者之前并没有接触过Mock，不清楚Mock是个啥。. Mock简单来理解，就是在测试过程中，对于某些不容易构造或者不容易获取的对象，用一个虚拟的对象来创建以便测试。. 而这个虚拟的对象就是mock对象。. mock对象就是真实对象在调试期间的代

Vue项目使用mock

yuliwen0418的博客

12-15

2091

vue项目中使用mock模拟数据

vue项目中使用mock

nobody_lo的博客

09-23

442

1、src下新建mock文件夹,mock文件夹下新建response目录，造后台接口数据，输出getUserInfo import Mock from ‘mockjs’ const Random = Mock.Random export const getUserInfo = (options) => { const userInfo = [] for (let i = 0; i <...

在vue项目中使用mock

weixin_44181180的博客

06-19

748

文章目录前言一、开始1.安装总结前言作为一个成熟的前端大可爱，我们可要栗志摆脱对哦后端的依赖，我们受够了后端带来的乱七八糟的过鬼东西啦，我们要自立，那么mock.js是我们的第一步了。想写出一个漂漂亮亮的页面或练习，却苦与没有后端俩对接没有数据。只些都不用烦恼啦。用mock.js我们就能模拟出接口给我们的数据。下面我们来学习一下吧！一、开始 1.安装 //生成随机的数据 npm install mockjs --save-dev //解决json无法写注释的问题 npm install json

精选资源

《vue项目使用mock模拟数据并实现列表的增、删、分页、批量操作功能》mock文件

06-02

对应《vue项目使用mock模拟数据并实现列表的增、删、分页、批量操作功能》博客

详解vue-cli项目中怎么使用mock数据

08-27

在 Vue CLI 项目中使用 Mock 数据可以模拟后端 API 的响应，方便前端开发和测试。本文介绍了如何在 Vue CLI 项目中使用 Mock 数据，包括创建 Mock 文件夹、配置 webpack.dev.conf.js 文件和使用 axios 发送请求。

vue+vuecli+webpack中使用mockjs模拟后端数据的示例

11-30

使用mockjs可以事先模拟数据，前提是和后端约定好了数据接口，怎样的数据。使用mock就可以生成你要的数据了，从而实现开发时前后端分离。其主要功能是：基于数据模板生成模拟数据。基于HTML模板生成模拟数据。 ...

在Vue项目中使用Mock

weixin_42275702的博客

06-06

7406

一、Mock介绍 mock.js可以通过随机数据来模拟各种场景，不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据；支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等；支持支持扩展更多数据类型，支持自定义函数和正则，非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型。结合vue使用 1.安装使用yarn安装 yarn add mockjs2 --save 2.引入mock.js 通过vue脚手架搭建的项目，在src目录下创建mock文件夹区分。在mock文

在Vue项目中使用Mock.js

相濡以沫不如相忘于江湖.

09-24

2639

随着互联网行业的发展，前后端分离已经成为了行业的主流，也是一种趋势。在这样一种趋势的推动下去开发项目，一定会遇到这样一个问题，后端接口未开发完毕，前端页面如何展示数据呢？这个时候就用到mock.js了。// 属性名 name // 生成规则 rule // 属性值 value 'name|rule' : value属性值是字符串 String// 通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。

vue项目中使用mock.js模拟数据

meteorites的博客

08-15

747

注：mock.js基础教程可参见 https://blog.youkuaiyun.com/qq_42205731/article/details/81705350 安装命令行输入 cnpm install mockjs 在main.js同级新建mockjs文件内容如下： const Mock=require('mockjs'); //引入mockjs文件 var ...

一、在vue项目中使用mock.js（详解）

zep

03-26

7053

步骤1.搭建测试项目步骤1.1创建项目命令： vue create mock-demo 步骤1.2安装依赖命令： #使用axios发送 ajax cnpm install axios--save #使用mockjs产生随机数据 cnpm install mockjs--save-dev #使用json5解决ison文件，无法添加注释问题 cnpm install json5--save-dev 步骤2.学习mockjs 新建mock文件夹，新建testMockis.js mockjs语法定义:htt

Mock 使用方式 + 在 Vue 项目中使用 Mock

热门推荐

一个努力学习的程序猿

08-09

1万+

在前后端开发过程中，后端进行接口开发，前端使用对应接口从数据库获取前端想要展现的数据。对于后端来讲，它们需要根据需求文档，确定要写的接口的功能。有时，虽然接口还没有写出来，但是相关接口文档已经写出来了。这时前端如果想要调用接口，但是接口还没有完成，前端开发人员也就只能含泪上班摸摸鱼了。那在开发过程中，为了避免这样的情况发生，现在前端已经能够独立于后端进行开发，也就是前端开发人员可以自己根据接口文档去模拟假数据。这个问题的解决方案就是使用第三方库 mock.js。

vue项目中的mock data

MrZZhou的博客

06-13

2260

应用背景因为前后端的分离并不是完全的，以及ajax技术的普遍应用，前端在开发过程中经常会需要测试用的数据，部分情况下是直接写在视图中，毕竟前端们在开发的过程中又不能总是依赖着后台提供接口，比如进度不一致，那我们应该怎么办呢方案今天接触到一种方法，就是express提供的数据服务，毕竟现在很多项目中都会用到node，用到npm，那使用express也是比较方便的，比如我通过vue init webpa

VUE 使用 mock

A_bad_horse的专栏

08-12

1479

vue使用mock

mockjs的基本使用和登录跳转到主页加折叠事件

qq_62881798的博客

09-29

1270

Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。数据类型丰富支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。拦截Ajax请求不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。官网注：easy-mock，一个在线模拟后台的数据平台。

在 vue 项目中 mock 的基本使用方法

m0_52775179的博客

07-25

1784

（'name|rule': value ）属性名 name 、生成规则 rule、属性值 value。例如：'name|1-10':1 会产生一个1-10之间的整数，详细规则参见官方文档。rurl：可选，表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。template：可选，表示数据模板，可以是对象或字符串。数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值。function(options)：可选，表示用于生成响应数据的函数。

Vue中如何使用mock

我在深圳的这些日子的博客

04-12

2784

自从有了mockjs，我们前端工程师再也不用等后端人员开发好之后再测数据了，因为mockjs可以拦截ajax请求，有了mockjs我们可以模拟后台返回数据，以方便的进行一系列的操作。接下来就介绍一下在项目中如何使用mockjs。 1、首先安装mock.js npm install mockjs 2、在我们的vue项目中创建一个mock 的目录 3、在mock的文件夹下创建index.js文...

Vue项目中运用Mockjs模拟数据教程

"本文主要介绍如何在Vue项目中使用Mockjs来模拟数据，以便于在后端接口未完成时进行前端开发。通过安装Mockjs、配置axios拦截器以及编写mock数据，实现本地数据的模拟返回。" 在Vue开发中，采用前后端分离的方式，...