记一次vue仿网易云音乐的单页面应用

hqman 发布于2019-08-26 18:24 / 1716人阅读

摘要：说明一直想做一个基于的项目但是因为项目往往要涉及到后端的知识不会后端真的苦所以就没有一直真正的动手去做一个项目。直到发现上有网易云音乐的才开始动手去做。仅仅完成了首页登入，歌单，歌曲列表页。

说明

一直想做一个基于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()
        })
      }
    },

注：本文仅是用来记录学习，如涉及侵权请联系删除。

GPU云服务器云服务器仿网易云音乐api数据服务器的搭建记一次在阿里云搭建服务器记一次阿里云服务器集体中毒网易云音乐

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110184.html

Vue.js全家桶低仿网易云音乐(MacOS版) 已新增electron打包pc平台app

摘要：项目地址暂时只实现了基本功能加了一点微小的效果主要适配浏览器对和做了一点微小的适配现在已经包括了打包平台的功能了源码地址项目预览项目描述前端部分整体加载进度懒加载模块的加载中提示实现了滑块增量分页新曲等使用了做单页应用使用了处理路由使用了管项目地址暂时只实现了基本功能加了一点微?小的效果主要适配pc浏览器对android 和ios 做了一点微?小的适配现在已经包括了ele...

leap_frog 2019-08-29 12:42 评论0 收藏0
Vue.js全家桶低仿网易云音乐(MacOS版) 已新增electron打包pc平台app

摘要：项目地址暂时只实现了基本功能加了一点微小的效果主要适配浏览器对和做了一点微小的适配现在已经包括了打包平台的功能了源码地址项目预览项目描述前端部分整体加载进度懒加载模块的加载中提示实现了滑块增量分页新曲等使用了做单页应用使用了处理路由使用了管项目地址暂时只实现了基本功能加了一点微?小的效果主要适配pc浏览器对android 和ios 做了一点微?小的适配现在已经包括了ele...

graf 2019-08-20 17:03 评论0 收藏0
Vue.js全家桶低仿网易云音乐(MacOS版) 已新增electron打包pc平台app

摘要：项目地址暂时只实现了基本功能加了一点微小的效果主要适配浏览器对和做了一点微小的适配现在已经包括了打包平台的功能了源码地址项目预览项目描述前端部分整体加载进度懒加载模块的加载中提示实现了滑块增量分页新曲等使用了做单页应用使用了处理路由使用了管项目地址暂时只实现了基本功能加了一点微?小的效果主要适配pc浏览器对android 和ios 做了一点微?小的适配现在已经包括了ele...

melody_lql 2019-08-01 16:57 评论0 收藏0
从0开始的Vue全栈项目（仿网易云音乐App）

摘要：转行前端一年多，之前一直忙于写业务代码，刚好近期不忙，就想写一个完全属于自己的项目。本项目因为时间关系暂时只做了部分功能，但是有空会继续更新的。项目未完成的部分后续会逐渐完成。转行前端一年多，之前一直忙于写业务代码，刚好近期不忙，就想写一个完全属于自己的项目。原本打算用react来做的，但是估计边翻api边写可能会花特别长的时间，所以打算这个项目完成后写个react的项目。本项目因为...

YFan 2019-06-26 17:24 评论0 收藏0