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公告滚动+AJAX后台得到数据
Apr 14 Javascript
文档对象模型DOM通俗讲解
Nov 01 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 Javascript
vue vant中picker组件的使用
Nov 03 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
详解PHP中websocket的使用方法
2016/09/15 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
javascript的函数
2007/01/31 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
神经网络理论基础及Python实现详解
2017/12/15 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
Python代码太长换行的实现
2019/07/05 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
利用python实现逐步回归
2020/02/24 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
python之语音识别speech模块
2020/09/09 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
易程科技软件测试笔试
2013/03/24 面试题
单位在职证明书
2014/09/11 职场文书
学生自我评语
2015/01/04 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
房产公证书
2015/01/23 职场文书
react 项目中引入图片的几种方式
2021/06/02 Javascript