vue项目中mockjs初尝

最新推荐文章于 2023-09-25 17:03:19 发布

进击的桐人

最新推荐文章于 2023-09-25 17:03:19 发布

阅读量225

点赞数

本文链接：https://blog.csdn.net/romeo12334/article/details/84379637

版权

javascript 同时被 2 个专栏收录

134 篇文章 0 订阅

订阅专栏

vue

21 篇文章 0 订阅

订阅专栏

本文介绍了在Vue项目中使用MockJS进行数据模拟的步骤。首先在src目录下创建mock文件夹，并在其中创建mock.js。接着在main.js中引入mock.js，然后在mock.js中设置请求拦截。在需要获取数据的页面，正常发送请求即可得到模拟的数据。通过这种方式，可以便捷地在开发阶段模拟API响应。

摘要由CSDN通过智能技术生成

首先要安装

npm install mockjs --save-dev

在src中新建文件夹mock，在此文件夹中新建mock.js
在这里插入图片描述
在 main.js 中引用mock.js

在 mock.js 文件中拦截请求这样写：

// mock.js
import Mock from 'mockjs'
Mock.mock('/myurl', {
	"string|1-10": "*"
})
// 返回的response.data就是 {
//  	string: '****'  }

在发送请求的页面：

// mycomponent.vue
<button @click="getData">点我获得数据</button>
...
<script>
...
methods: {
	getData() {
		Axios.get('/myurl').then(res => {
			console.log(res.data)
		})
	}
}
</script>