本文主要解决一下几个问题:
1.app.get is not a function解决方案(vue1.0升级到vue2.0的bug)
2.没有dev-server.js文件,如何进行后台数据模拟?
3.axios如何直接跨域mock网站的返回值
一、基本配置
1.安装axios
配置package.json>dependencies 输入:
"dependencies": {
"axios": "^0.18.0" //根据实际情况选择最新的即可
},
重启服务
npm install
npm run dev
2.在webpack-dev-conf.js文件中引入axios,并进行域名的转换
//调用axios
const axios = require('axios')
const express = require('express')
const app = express()
//找到devServer,添加
devServer: {
before(app) {
app.get('/api/getDiscList', (req, res) => {
var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
axios.get(url, {
headers: {
referer: 'https://c.y.qq.com/',
host: 'c.y.qq.com'
},
params: req.query
}).then((response) => {
res.json(response.data)
}).catch((e) => {
console.log(e)
})
})
}
},
3.集成封装api文件夹下的recommend.js
export function getDiscList() {
const url = '/api/getDiscList'
const data = Object.assign({}, commonParams, {
platform: 'yqq',
hostUin: 0,
sin: 0,
ein: 29,
sortId: 5,
needNewCode: 0,
categoryId: 10000000,
rnd: Math.random(),
format: 'json'
})
return axios.get(url, {
params: data
}).then((res) => {
return Promise.resolve(res.data)
})
}
4.调用集成封装的接口recommend.vue
<script type="text/ecmascript-6">
import {getDiscList} from 'api/recommend'
import {ERR_OK} from 'api/config' //ERR_OK为自定义全局变量
export default {
name: 'recommend',
data() {
return {
recommends: []
}
},
created() {
this._getDiscList()
},
methods: {
_getDiscList() {
getDiscList().then((res) => {
if (res.code === ERR_OK) {
}
console.log(res.data.list)
})
}
}
}
</script>
效果图:
源码下载地址