一直想做一个基于VUE的项目,但是因为项目往往要涉及到后端的知识(不会后端真的苦),所以就没有一直真正的动手去做一个项目。
直到发现GitHub上有网易云音乐的api NeteaseCloudMusicApi,才开始动手去做。
仅仅完成了首页,登入,歌单,歌曲列表页。
https://github.com/qp97vi/music
项目成功运行还要把后端api在本地运行
vue2 + vuex + vue-router + axios + mint-ui + webpack
<强> 1。前端路由拦截
想做一个登录拦截,验证没有登录之前,就跳转到登录页面
解决方法是:通过http响应拦截器判断令牌(本地的cookie)判断
创建一个http.js
从“axios”进口axios
从“进口商店。/存储/存储的
进口*从’。/存储/类型的类型
从“进口路由器。/路由器/指数”//axios配置
axios.defaults.timeout=5000
axios.defaults.baseURL=' https://api.github.com '//http请求拦截器
axios.interceptors.request.use (
配置=比;{
如果(store.state.xsrfCookieName) {
config.headers。授权=' xsrfCookieName $ {store.state.xsrfCookieName} '
}
返回配置
},
呃=比;{
返回Promise.reject(错)
},
)//http响应拦截器
axios.interceptors.response.use (
响应=比;{
返回响应
},
错误=比;{
如果(error.response) {
开关(error.response.status) {
401年情况://401清除牌信息并跳转到登录页面
store.commit (types.LOGOUT)//只有在当前路由不是登录页面才跳转
router.currentRoute。路径!=='登录',,
router.replace ({
路径:“登录”,
查询:{重定向:router.currentRoute。路径},
}）
}
}//console.log (JSON.stringify(错误));//控制台:错误:请求失败的状态代码402
返回Promise.reject (error.response.data)
},
)
出口默认axios
<强> 2。路由懒加载
{
路径:“/我”,
名称:“我”,
元:{
requireAuth:没错,
},
组件:解决=祝辞{
Indicator.open('加载中…”);
要求。确保([' @/视图/我'],()=比;{
解决(需要(@/视图/我的))
Indicator.close ()
}）
}
},
以上所述是小编给大家介绍的vue模仿网易云音乐的单页面应用,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持。
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
