项目中使用mock数据

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)
   })
}