摘要:說明一直想做一個基于的項目但是因為項目往往要涉及到后端的知識不會后端真的苦所以就沒有一直真正的動手去做一個項目。直到發現上有網易云音樂的才開始動手去做。僅僅完成了首頁登入,歌單,歌曲列表頁。
說明
一直想做一個基于VUE的項目,但是因為項目往往要涉及到后端的知識(不會后端真的苦),所以就沒有一直真正的動手去做一個項目。
直到發現GitHub上有網易云音樂的api NeteaseCloudMusicApi,才開始動手去做。
僅僅完成了首頁,登入,歌單,歌曲列表頁。
項目地址https://github.com/qp97vi/music
項目成功運行還要把后端api在本地運行
vue2+vuex+vue-router+axios+mint-ui+webpack
前端路由攔截解決方案 原文 感謝!!!遇到的問題
1.前端路由攔截
想做一個登錄攔截,驗證沒有登錄之前,就跳轉到登錄頁面
解決方法是:通過http response 攔截器判斷token(本地的cookie)判斷
創建一個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信息并跳轉到登錄頁面 store.commit(types.LOGOUT) // 只有在當前路由不是登錄頁面才跳轉 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() }) } },
注:本文僅是用來記錄學習,如涉及侵權請聯系刪除。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/110184.html
摘要:項目地址暫時只實現了基本功能加了一點微小的效果主要適配瀏覽器對和做了一點微小的適配現在已經包括了打包平臺的功能了源碼地址項目預覽項目描述前端部分整體加載進度懶加載模塊的加載中提示實現了滑塊增量分頁新曲等使用了做單頁應用使用了處理路由使用了管 項目地址 暫時只實現了基本功能 加了一點微?小的效果 主要適配pc瀏覽器 對android 和ios 做了一點微?小的適配 現在已經包括了ele...
摘要:項目地址暫時只實現了基本功能加了一點微小的效果主要適配瀏覽器對和做了一點微小的適配現在已經包括了打包平臺的功能了源碼地址項目預覽項目描述前端部分整體加載進度懶加載模塊的加載中提示實現了滑塊增量分頁新曲等使用了做單頁應用使用了處理路由使用了管 項目地址 暫時只實現了基本功能 加了一點微?小的效果 主要適配pc瀏覽器 對android 和ios 做了一點微?小的適配 現在已經包括了ele...
摘要:項目地址暫時只實現了基本功能加了一點微小的效果主要適配瀏覽器對和做了一點微小的適配現在已經包括了打包平臺的功能了源碼地址項目預覽項目描述前端部分整體加載進度懶加載模塊的加載中提示實現了滑塊增量分頁新曲等使用了做單頁應用使用了處理路由使用了管 項目地址 暫時只實現了基本功能 加了一點微?小的效果 主要適配pc瀏覽器 對android 和ios 做了一點微?小的適配 現在已經包括了ele...
摘要:轉行前端一年多,之前一直忙于寫業務代碼,剛好近期不忙,就想寫一個完全屬于自己的項目。本項目因為時間關系暫時只做了部分功能,但是有空會繼續更新的。項目未完成的部分后續會逐漸完成。 轉行前端一年多,之前一直忙于寫業務代碼,剛好近期不忙,就想寫一個完全屬于自己的項目。原本打算用react來做的,但是估計邊翻api邊寫可能會花特別長的時間,所以打算這個項目完成后寫個react的項目。本項目因為...
閱讀 617·2023-04-25 18:37
閱讀 2780·2021-10-12 10:12
閱讀 8315·2021-09-22 15:07
閱讀 564·2019-08-30 15:55
閱讀 3174·2019-08-30 15:44
閱讀 2194·2019-08-30 15:44
閱讀 1625·2019-08-30 13:03
閱讀 1560·2019-08-30 12:55