vue模仿网易云音乐的单页面应用
作者:随她 发布时间:2024-04-10 13:48:23
标签:vue,单页面,应用
说明
一直想做一个基于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()
})
}
},
总结
以上所述是小编给大家介绍的vue模仿网易云音乐的单页面应用,网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
来源:https://segmentfault.com/a/1190000018959398
0
投稿
猜你喜欢
- 方法一一般情况下,SQL数据库的收缩并不能很大程度上减小数据库大小,其主要作用是收缩日志大小,应当定期进行此操作以免数据库日志过大1、设置数
- 准备在以后制作的网站中尝试一些变化,比如:先提交内容,后提示注册/登陆。感觉这样可以绑架更多用户……不想注册再发言?那就先让你上钩发言,然后
- 一、表格与键概念主键:可唯一表示该资料(可以设置多个列表为主键)设置外键进行表与表的相连,且外键必须是其他表的主键(外键也可以设置自己表格的
- 本文实例讲述了php计算函数执行时间的方法。分享给大家供大家参考。具体如下:我们可以通过在程序的前后分别记录开始和结束时间,两个时间差就是程
- 关于 pynput pynput 可以监控我们的键盘和鼠标。目前具有此类功能的库有很多,比如 pygame 等游戏库,但是当我们只需要
- round()方法返回 x 的小数点四舍五入到n个数字。语法以下是round()方法的语法:round( x [, n] )参数
- 前言这篇文章主要介绍了pyinstaller打包opencv和numpy程序运行错误解决,文中通过示例代码介绍的非常详细,对大家的学习或者工
- 有的时候我们在获取到目标电脑时候如果对方电脑又python 编译环境时可以利用python 反弹shell主要用到python os库和so
- 实现代码# -*- coding: cp936 -*-import re s1 = 'adkkdk's2 = 'ab
- pandas.read_csv()遇到读进来乱码问题1.设置encoding='gbk'或者encoding='ut
- 准备工作我准备了两个表格数据,以此展示本期的表格的合并的工作。数据示例如下:表格1表格2接着将这两个表格的数据分别导入python中,导入代
- 我们使用的是QWebview模块,这里也主要是展示下QWebview的用法。之前在网上找了半天的解析网页的内容,都不是很清楚。这是核心代码:
- Python pip安装lxml出错的问题解决办法1. 在使用pip安装lxml过程中出现了一下错误: &
- #覆盖覆盖:在继承关系中,子类实现了与基类同名的方法,在子类的实例调用该方法时,实例调用的是子类的覆盖版本。通俗的讲,就是小明继承了他⑧的自
- 简单的说:装饰器主要作用就是对函数进行一些修饰,它的出现是在引入类方法和静态方法的时候为了定义静态方法出现的。例如为了把foo()函数声明成
- 问题描述现有一个有向赋权图。如下图所示:问题:根据每条边的权值,求出从起点s到其他每个顶点的最短路径和最短路径的长度。说明:不考虑权值为负的
- 前言最近开始学习python数据库编程后,在了解了基本概念,打算上手试验一下时,卡在了MYSQLdb包的安装上,折腾了半天才解决。记录一下我
- pytest的setup与teardown1)pytest提供了两套互相独立的setup 与 teardown和一对相对自由的setup与t
- 目录1、创建相关新应用2、获取Access Token3、分析评论并进行观点抽取4、运行结果利用百度API自然语言处理技术中的评论观点抽取方
- Python内建了map()和reduce()函数。如果你读过Google的那篇大名鼎鼎的论文“MapReduce: Simplified