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

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

在这里插入图片描述

Vue中建立mock数据可以通过使用Mock.js库来实现。首先,你需要在项目中安装Mock.js库。然后,你可以在项目的index.js文件中使用Mock.mock()方法来定义mock数据的格式。例如,你可以在index.js文件中添加以下代码来定义一个mock接口: ```javascript const Mock = require('mockjs'); Mock.mock('/user/userInfo', 'get', { 'name': '@cname', 'age|18-60': 0, 'gender|1': \['男', '女'\], 'email': '@email', 'address': '@county(true)', 'avatar': '@image(200x200)' }); ``` 上述代码定义了一个名为"/user/userInfo"的GET请求接口,返回的数据包括姓名、年龄、性别、邮箱、地址和头像。你可以根据需要自定义mock数据的字段和格式。 接下来,在需要使用mock数据Vue组件中,你可以使用axios库来获取mock数据。例如,在HelloWorld.vue组件中,你可以添加以下代码来获取mock数据: ```javascript import axios from 'axios'; export default { data() { return { userInfo: {} }; }, mounted() { this.getMockData(); }, methods: { getMockData() { axios.get('/user/userInfo') .then((res) => { this.userInfo = res.data; }) .catch(function(err){ console.log(err); }); } } } ``` 上述代码中,通过axios库发送GET请求到"/user/userInfo"接口,并将返回的数据赋值给组件的userInfo属性。 这样,你就可以在Vue中建立mock数据并在组件中使用了。 #### 引用[.reference_title] - *1* *2* *3* [vue项目 mock数据](https://blog.csdn.net/Feb_ruary/article/details/125934498)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值