[TOC]
#### Vue 利用 NodeJS 代理后端请求
* [ ] 先看看QQ音乐官方的请求链接参数
![](https://box.kancloud.cn/307c3c48bbcdf70ffe8381ab89a283a2_492x302.png)
![](https://box.kancloud.cn/7f2bf0601f479a592ca6fcf41684c14e_656x407.png)
* [ ] 利用NodeJS 代理接口
~~~
configureWebpack: {
devServer: {
before(app) { // mock 数据
app.get('/api/getHotList', (req, res) => {
const url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg';
axios.get(url, {
headers: {
origin: 'https://y.qq.com',
referer: 'https://y.qq.com/portal/playlist.html'
},
params: req.query
}).then(response => {
res.json(response.data)
}).catch(err => {
console.log(err)
})
})
}
}
}
~~~
>[danger] 注意:headers 我们设置和QQ音乐官方的一致
* [ ] 接下来,我们在本地请求/api/getHotList 我们自定义的接口
~~~
// 热门歌单数据
export function getHotList() {
const url = '/api/getHotList';
const data = Object.assign({},{
picmid: 1,
rnd: Math.random(),
g_tk: 692763411,
loginUin: 200980586,
hostUin: 0,
format: 'json',
inCharset: 'utf8',
outCharset: 'utf-8',
notice: 0,
platform: 'yqq.json',
needNewCode: 0,
categoryId: 10000000,
sortId: 5,
sin: 0,
ein: 19
});
return axios(url, { params: data }).then(res => {
return Promise.resolve(res.data)
})
}
~~~
* [ ] 可以看到请求成功
![](https://box.kancloud.cn/34f3b42cac67a2a31fae6e7b020c4deb_646x207.png)
- 起步
- 环境搭建
- mock数据
- 基础
- 生命周期
- 过滤器
- 过渡动画
- keyframes动画
- 动画JS钩子
- 路由
- 导航守卫
- 全局守卫
- 监听器
- 自定义组件
- 获取焦点
- mixins
- mixins抽离vuex
- 国际化
- 动态组件
- Dom
- 扩展
- 安装devTools
- scss
- Nuxt引用多个UI库
- vuex
- vuex命名空间
- vuex定义
- cli
- 安装与卸载
- 环境变量
- 杂项
- Mock数据
- FeHelper
- git
- 反向代理
- 本地存储
- stylus
- 常用mixins
- jsonp
- 配置
- mock配置
- 跨域配置
- 自定义路径
- px2rem
- 代理后端请求
- 常用算法
- 字母排序城市数据
- 倒计时
- 通讯录数据结构
- 请求
- axios防止多次请求
- 封装axios请求
- axios使用
- 封装axios
- 插件
- BetterScroll
- 高德定位
- polyfill
- fastClick
- LazyLoad
- storageCache
- moment
- keyFrameAnimation
- vueSwiper
- 组件
- Loading组件
- header组件
- 仿有道App导航
- SupportIcon
- 仿饿了么购物车跳动
- 购物车小球缓动
- 小球飞入购物车
- 仿音乐歌手列表
- 唱片飞入效果
- 搜索组件
- 仿美团PC搜索框
- 页面布局
- stickyFooter
- 背景色渐变
- 背景虚化
- Ui组件
- CubeUi
- CreateApi
- tab滑屏切换
- 索引列表
- BScroll
- BScroll左右联动导航
- vant
- 函数库
- 常用Dom函数库
- axios封装
- 格式化音乐播放时长
- 搜索节流
- time格式化
- JS基础
- window对象中的高度
- JS中的宽高
- 常用正则
- nuxt
- nuxtVuex
- 监听页面滚动
- 监听body滚动
- 监听局部滚动