mock.js介绍
体换原生的XMLHttpRequest,使用简便;
丰富的数据类型;
无法支持blob类型,无法模拟下载;
一 在安装mockjs和axios
命令行中分别输入以下命令
cnpm install mockjs --save-dev
cnpm install axios --save
二 在src文件夹下创建mock文件夹,存放mock的json数据
bannerMock.js
module.exports = {
'code': 0,
'data': {
'slider': [{
'linkUrl': 'https://y.qq.com/m/digitalbum/gold/index.html?openinqqmusic=1&_video=true&mid=002aGyPo2OOc4c&g_f=shoujijiaodian',
'picUrl': 'http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1378870.jpg',
'id': 21567
}, {
'linkUrl': 'http://y.qq.com/w/album.html?albummid=000YvG6O21WHfS',
'picUrl': 'http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1392901.jpg',
'id': 21590
}, {
'linkUrl': 'https://y.qq.com/m/digitalbum/gold/index.html?openinqqmusic=1&_video=true&mid=000W0L2M2pR1jD&g_f=shoujijiaodian',
'picUrl': 'http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1396330.jpg',
'id': 21599
}, {
'linkUrl': 'http://y.qq.com/w/album.html?albummid=00348qlz4QbfiG',
'picUrl': 'http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1396314.jpg',
'id': 21591
}, {
'linkUrl': 'http://y.qq.com/w/album.html?albummid=004212pj18qjLG',
'picUrl': 'http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1392371.jpg',
'id': 21598
}],
'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': []
}
}
mock文件夹下一定要创建index.js文件,然后再在main.js中引入
main.js
import './mock'
mock文件夹下的index.js对mock进行初始化
import Mock from 'mockjs'
import bannerList from './bannerMock'
// 设置mock接口,三个参数:
// 正则表达式匹配我们的url
// 请求方式
Mock.mock(/\/musice\/home/, 'get', bannerList)
export default Mock
三 在src文件夹下创建api文件夹
在里面创建store.js文件用来做我们的api请求
import axios from 'axios'
export function banner () {
return axios({
method: 'get',
url: `${process.env.VUE_APP_BASE_URL}/musice/banner`
})
}
在.env.development文件中添加VUE_APP_BASE_URL,设置成我们的本地地址
VUE_APP_RES_URL = http://192.168.0.101:8081
VUE_APP_BASE_URL = http://192.168.0.101:8080
四 在文件中引用
import {banner} from '../../api/store'
mounted() {
banner().then(response => {
console.log(response)
})
}