Vue imitates NetEase Cloud Music's single-page application

illustrate

I have always wanted to do a VUE-based project, but because the project often involves back-end knowledge (the back-end will not be really hard), I have not always really started working on a project.

Until I found out that there was NetEase Cloud Music on GitHubapi NeteaseCloudMusicApi , and then started to do it.

Just completed the home page, login, playlist, song list page.

Project gallery

/qp97vi/music

The project runs successfully and needs to run the backend API locally

Front-end technology stack

vue2+vuex+vue-router+axios+mint-ui+webpack

Problems encountered

1. Front-end routing interception

Want to do a login intercept, and before verifying that you have not logged in, you will jump to the login page

The solution is: judge token (local cookie) through the http response interceptor

Create a

import axios from 'axios'
import store from './store/store'
import * as types from './store/types'
import router from './router/index'

// axios configuration = 5000
 = ''

// http request interceptor(
 config => {
  if () {
    = `xsrfCookieName ${}`
  }
  return config
 },
 err => {
  return (err)
 },
)

// http response interceptor(
 response => {
  return response
 },
 error => {
  if () {
   switch () {
    case 401:
     // 401 Clear token information and jump to the login page     ()
     
     // Jump only if the current route is not a login page      !== 'login' &&
      ({
       path: 'login',
       query: { redirect:  },
      })
   }
  }
  // ((error));//console : Error: Request failed with status code 402
  return ()
 },
)

export default axios

2. Lazy loading of routes

{
   path:'/my',
   name:'my',
    meta:{
    requireAuth:true,
   },
   component:resolve=>{
    ('loading...');
    (['@/views/my'], () => {
     resolve(require('@/views/my'))
     ()
    })
   }
  },

Summarize

The above is the single-page application of vue imitating NetEase Cloud Music introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!