Vue下如何配置和使用自定义mock数据

最新推荐文章于 2025-07-28 10:29:52 发布

SioH

最新推荐文章于 2025-07-28 10:29:52 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/iconhot/article/details/89469095

Vue 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何使用Express和Webpack配置前端开发中的Mock数据服务。步骤包括创建mock数据文件、配置Webpack引用Express和mock文件、设置devServer API、调用API及运行开发服务器。

1.新建mock数据

在这里插入图片描述

2.配置`webpack.dev.conf.js`引入express/mock的json文件

const express = require('express')
const goodsJson = require('./../mock/goods.json')

const app = express();
const router = express.Router();
app.use('/api',router);

在这里插入图片描述

3.然后找到devServer,在里面添加api配置

before(app){
      app.get('/api/goods',(req,res)=>{
        res.json(goodsJson)
      })
    }

在这里插入图片描述

4.组件中通过vue-resource/axios调用对应api

在这里插入图片描述

5.运行编译npm run dev

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

SioH

关注关注

0
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue Element Admin 用mock模块模拟数据

Hero_rong的博客

11-07

4206

步骤简单一在 src/api/charts中添加接口，方法名为getindexMock import request from '@/utils/request' export function getindexMock(params) { console.log(params) return request({ url: '/charts/one', ...

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

myisyourbb的博客

07-15

1528

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

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

Mock.js 入门指南

热门推荐

一个努力学习的程序猿

08-09

1万+

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

Vue项目使用mock

yuliwen0418的博客

12-15

2078

vue项目中使用mock模拟数据

vue项目中使用mock

nobody_lo的博客

09-23

432

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-cli 本地开发mock数据使用方法

08-27

在本地开发过程中，由于后端接口可能还未开发完成，前端开发者通常需要使用 Mock 数据来模拟接口返回，以便进行前端界面的开发和测试。本文将详细介绍在 Vue CLI 中使用 Mock 数据的方法。首先，Vue CLI 提供了 `...

vue-cli3使用mock数据的方法分析

11-21

此时，使用本地的 mock 数据可以帮助前端开发者在没有真实后端接口的情况下进行功能验证和界面渲染。在 Vue CLI 2 中，设置 mock 数据通常涉及对 `webpack.dev.conf.js` 文件进行配置。开发者可以创建一个 `mock` ...

详解Vue CLI 3.0脚手架如何mock数据

10-17

Vue CLI 3.0 是一款强大的前端构建工具，用于快速搭建 Vue.js 项目。在前后端分离的开发模式中，前端开发者往往需要...同时，理解这些配置也有助于开发者更好地掌握 Vue CLI 3.0 的项目结构和配置方式，提高开发能力。

vue-cli3中使用mock（实际项目中快速搭建）

10-27

- `mock`：存放Mock数据和配置的目录。 - `.git`：Git版本控制的隐藏目录。 - `src`：源代码目录，包含Vue组件、样式、路由等。 7. **使用Mock数据**：在`mock`目录下，你可以创建模拟接口的文件，定义响应...

在vue项目中使用mock

weixin_44181180的博客

06-19

726

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

在Vue项目中使用Mock

weixin_42275702的博客

06-06

7379

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

在Vue项目中使用Mock.js

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

09-24

2464

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

vue项目中使用mock模拟数据

ForEach_kaka的博客

04-06

784

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': '成功', ...

VUE 使用 mock

A_bad_horse的专栏

08-12

1454

vue使用mock

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

meteorites的博客

08-15

739

注：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

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

04-12

2774

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

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

zep

03-26

7038

步骤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

vue项目中的mock data

MrZZhou的博客

06-13

2244

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

vue2使用mock.js模拟数据

01-01

### 如何在Vue2项目中使用Mock.js模拟数据 #### 安装依赖包为了能够在Vue2项目中使用`mock.js`进行数据模拟，需要先安装相应的依赖包。这可以通过命令行工具npm完成。 ```bash npm install mockjs --save-dev npm install axios --save ``` 上述命令会将`mock.js`作为开发依赖项加入到项目之中，并且也引入了用于发起HTTP请求的`axios`库[^4]。 #### 创建并配置Mock服务接下来，在项目的源码根目录下创建一个新的文件夹命名为`mock`，并在其中建立一个名为`index.js`的JavaScript文件用来编写具体的模拟逻辑： // src/mock/index.js ```javascript import Mock from 'mockjs' const data = Mock.mock({ 'list|1-10': [{ 'id|+1': 1, 'name': '@cname' }] }) Mock.mock('/api/list', 'get', () => { return data.list; }) ``` 这段代码利用`Mock.mock()`函数定义了一组模拟返回的数据结构以及对应的API路径和请求方式。这里设置的是当接收到针对`/api/list`地址发出GET类型的网络请求时，则按照预设模式生成相应数量的对象列表作为回应内容[^1]。 #### 导入Mock模块至Vue实例为了让整个应用程序能够识别这些自定义好的假数据接口，在入口文件main.js里添加如下几行语句即可实现自动加载功能： ```javascript // main.js import '@/mock' // 加载mock数据 ``` 通过这种方式便可以在不改变原有业务逻辑的前提下轻松切换真实环境下的服务器端交互行为与本地调试期间所使用的伪造版本之间的转换操作。

Vue下如何配置和使用自定义mock数据

1.新建mock数据

2.配置webpack.dev.conf.js引入express/mock的json文件

3.然后找到devServer,在里面添加api配置

4.组件中通过vue-resource/axios调用对应api

5.运行编译npm run dev

2.配置`webpack.dev.conf.js`引入express/mock的json文件