vue项目中mockjs初尝

首先要安装

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>

点击按钮后的效果:

到此,整个流程就很清晰了,总结一下:

  1. 建立mock文件夹和模拟各个请求的mock.js 例如 mockNews.js、mockUser.js
  2. 在 main.js 或者 组件中引用上述 js 文件,
  3. 正常发送请求即可获得数据
全部评论

相关推荐

点赞 评论 收藏
分享
10-30 23:23
已编辑
中山大学 Web前端
去B座二楼砸水泥地:这无论是个人素质还是专业素质都👇拉满了吧
点赞 评论 收藏
分享
头像
11-06 10:58
已编辑
门头沟学院 嵌入式工程师
双非25想找富婆不想打工:哦,这该死的伦敦腔,我敢打赌,你简直是个天才,如果我有offer的话,我一定用offer狠狠的打在你的脸上
点赞 评论 收藏
分享
点赞 收藏 评论
分享
牛客网
牛客企业服务