在 vue 中使用mock

1. 下载安装mockjs

npm i mockjs -D

2. 定义json数据 slide.js

{
	"code": 0,
	"data": {
		"slider": [{
			"linkUrl": "http://y.qq.com/m/act/sfhd/262.html?ADTAG=banner&openinqqmusic=1",
			"picUrl": "http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1354963.jpg",
			"id": 21469
		}, {
			"linkUrl": "https://y.qq.com/m/client/video_set_detail/index.html?id=1738",
			"picUrl": "http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1355557.jpg",
			"id": 21421
		}, {
			"linkUrl": "https://y.qq.com/m/act/sfhd/264.html?ADTAG=jdt&openinqqmusic=1",
			"picUrl": "http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1362148.jpg",
			"id": 21471
		}, {
			"linkUrl": "https://y.qq.com/m/act/thebigband/index.html?openinqqmusic=1&ADTAG=jiaodiantu&channelID=10036170",
			"picUrl": "http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1361682.jpg",
			"id": 21430
		}, {
			"linkUrl": "http://y.qq.com/w/album.html?albummid=002Hb6se3eapmO",
			"picUrl": "http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1357915.jpeg",
			"id": 21464
		}],
		"radioList": [{
			"picUrl": "http://y.gtimg.cn/music/photo/radio/track_radio_199_13_1.jpg",
			"Ftitle": "热歌",
			"radioid": 199
		}, {
			"picUrl": "http://y.gtimg.cn/music/photo/radio/track_radio_307_13_1.jpg",
			"Ftitle": "一人一首招牌歌",
			"radioid": 307
		}],
		"songList": []
	}
}

3. 创建mock.js

// 将所有的mock json文件引入
const slide = require('../Data/slide')

const Mock = require("mockjs")
// 定义接口
Mock.mock('/recommed/slide', 'get', slide);


// 设置所有ajax请求的超时时间,模拟网络传输耗时
Mock.setup({
  timeout: 0-300
})

3. 在main.js中引入mock.js

require('./mock/index');

4. 调用接口

 beforeCreate() {
    axios.get('/recommed/slide').then((res) => {
      console.log(res)
    }).catch((err) => {
      console.log(err)
    })
  }

猜你喜欢

转载自blog.csdn.net/Luckyzhoufangbing/article/details/91367377