vue模仿网易云音乐的单页面应用


Posted in Javascript onApril 24, 2019

说明

一直想做一个基于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模仿网易云音乐的单页面应用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery 页面全选框实践代码
Apr 02 Javascript
一个原生的用户等级的进度条
Jul 03 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
JS类的定义与使用方法深入探索
Nov 26 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
JS实现小米轮播图
Sep 21 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 #Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 #Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 #Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 #Javascript
js实现全选反选不选功能代码详解
Apr 24 #Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 #Javascript
Vue源码解析之数据响应系统的使用
Apr 24 #Javascript
You might like
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
清除输入框内的空格
2016/12/21 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
浅析python参数的知识点
2018/12/10 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
办公室文秘自我评价
2013/09/21 职场文书
应聘美工求职信
2013/11/07 职场文书
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
舞蹈教育学专业自荐信
2014/06/15 职场文书
小学科学教学计划
2015/01/21 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL