vue-cli结合mockjs模拟后台数据

本文详细介绍如何在Vue项目中利用Mock.js进行数据模拟。包括安装必要的依赖、配置mock文件及使用axios发起请求等步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

mockjs在vue中使用:

准备工作:
1、安装vue-cli
2、加载模块mockjs、axios(http请求库)
npm install mockjs axios --save

开始:
1、创建mock.js文件(用于定于接口返回的数据)到src目录下的任何一个合适的文件夹下,设置好拦截信息,,设置规则可以看mock官网规则

clipboard.png

2、在mock.js文件中写入以下模拟数据
单条数据:

clipboard.png

多条数据:

clipboard.png

3、在组件中引入axios和mock.js文件

import axios from 'axios';
import mockdata from '../mock/mockjs';
在mounted中:

axios.get('msg').then(res=>{
    // this.data1 = res.data;
    console.log(res);
})

clipboard.png

4、运行项目 npm run dev,查看控制台

clipboard.png

以上,结束
文章结合了多位前辈的经验得出,如果更好的方法,请大家在评论区评论,谢谢!
https://www.cnblogs.com/vicky...
https://www.imooc.com/article...

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值