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 相关文章推荐
javascript 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
js复制到剪切板的实例方法
Jun 28 Javascript
Jquery中children与find之间的区别详细解析
Nov 29 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 Javascript
JS中如何实现Laravel的route函数详解
Feb 12 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
Jul 24 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
详解React项目中碰到的IE问题
Mar 14 Javascript
JS实现页面数据懒加载
Feb 13 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出错界面
2006/10/09 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
php7下的filesize函数
2019/09/30 PHP
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
js 解决“options为空或不是对象”
2008/12/22 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
ES6下React组件的写法示例代码
2017/05/04 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
学习JS中的DOM节点以及操作
2018/04/30 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
详解Python Socket网络编程
2016/01/05 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
眼镜促销方案
2014/03/15 职场文书
商务经理岗位职责
2014/08/03 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA
MySQL分布式恢复进阶
2022/07/23 MySQL
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技