vue模仿網(wǎng)易云音樂的單頁面應(yīng)用
說明
一直想做一個基于VUE的項(xiàng)目,但是因?yàn)轫?xiàng)目往往要涉及到后端的知識(不會后端真的苦),所以就沒有一直真正的動手去做一個項(xiàng)目。
直到發(fā)現(xiàn)GitHub上有網(wǎng)易云音樂的api NeteaseCloudMusicApi ,才開始動手去做。
僅僅完成了首頁,登入,歌單,歌曲列表頁。
項(xiàng)目地址
https://github.com/qp97vi/music
項(xiàng)目成功運(yùn)行還要把后端api在本地運(yùn)行
前端技術(shù)棧
vue2+vuex+vue-router+axios+mint-ui+webpack
遇到的問題
1.前端路由攔截
想做一個登錄攔截,驗(yàn)證沒有登錄之前,就跳轉(zhuǎn)到登錄頁面
解決方法是:通過http response 攔截器判斷token(本地的cookie)判斷
創(chuàng)建一個http.js
import axios from 'axios' import store from './store/store' import * as types from './store/types' import router from './router/index' // axios 配置 axios.defaults.timeout = 5000 axios.defaults.baseURL = 'https://api.github.com' // http request 攔截器 axios.interceptors.request.use( config => { if (store.state.xsrfCookieName) { config.headers.Authorization = `xsrfCookieName ${store.state.xsrfCookieName}` } return config }, err => { return Promise.reject(err) }, ) // http response 攔截器 axios.interceptors.response.use( response => { return response }, error => { if (error.response) { switch (error.response.status) { case 401: // 401 清除token信息并跳轉(zhuǎn)到登錄頁面 store.commit(types.LOGOUT) // 只有在當(dāng)前路由不是登錄頁面才跳轉(zhuǎn) router.currentRoute.path !== 'login' && router.replace({ path: 'login', query: { redirect: router.currentRoute.path }, }) } } // console.log(JSON.stringify(error));//console : Error: Request failed with status code 402 return Promise.reject(error.response.data) }, ) export default axios
2.路由懶加載
{ path:'/my', name:'my', meta:{ requireAuth:true, }, component:resolve=>{ Indicator.open('加載中...'); require.ensure(['@/views/my'], () => { resolve(require('@/views/my')) Indicator.close() }) } },
總結(jié)
以上所述是小編給大家介紹的vue模仿網(wǎng)易云音樂的單頁面應(yīng)用,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
利用Vue.js實(shí)現(xiàn)求職在線之職位查詢功能
Vue.js是當(dāng)下很火的一個JavaScript MVVM庫,它是以數(shù)據(jù)驅(qū)動和組件化的思想構(gòu)建的。下面這篇文章主要給大家介紹了關(guān)于利用Vue.js實(shí)現(xiàn)求職在線之職位查詢功能的相關(guān)資料,需要的朋友可以參考借鑒,下面來一起看看吧。2017-07-07在vue中created、mounted等方法使用小結(jié)
這篇文章主要介紹了在vue中created、mounted等方法使用小結(jié),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue 實(shí)現(xiàn)input表單元素的disabled示例
今天小編就為大家分享一篇vue 實(shí)現(xiàn)input表單元素的disabled示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10使用VueCli3+TypeScript+Vuex一步步構(gòu)建todoList的方法
這篇文章主要介紹了使用VueCli3+TypeScript+Vuex一步步構(gòu)建todoList的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07在vue使用clipboard.js進(jìn)行一鍵復(fù)制文本的實(shí)現(xiàn)示例
這篇文章主要介紹了在vue使用clipboard.js進(jìn)行一鍵復(fù)制文本的實(shí)現(xiàn)示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01詳解vue-cli本地環(huán)境API代理設(shè)置和解決跨域
這篇文章主要介紹了詳解vue-cli本地環(huán)境API代理設(shè)置和解決跨域,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-09-09windows下vue-cli及webpack搭建安裝環(huán)境
這篇文章主要介紹了windows下vue-cli及webpack搭建安裝環(huán)境,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04