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

赞 (0)

相关推荐

  • 解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题

    在用vue-cli脚手架搭建手机H5页面应用的时候,其中一页中部有input,底部有position:absolute:bottom:0的元素, 当点击input框时在安卓手机上出现了: 1 虚拟键盘弹出盖住input 2 底部定位的元素被挤上来 网络上很多关于body设定宽高以及scrolltop的方法都不管用,因为这里是路由页面,根据网上的思路,吊起输入键盘的时候页面的高度是变化的,监听window.onresize,判断是否吊起键盘,然后设定底部模块的隐藏和显示,整个块元素的margint

  • 详解处理Vue单页面应用SEO的另一种思路

    详解处理Vue单页面应用SEO的另一种思路

    vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩.三大框架 Angular.Vue.React,可谓妇孺皆知.随着单页面应用的普及,人们在感受其带来的完美的用户体验,极强的开发效率的同时,也似乎不可避免的要去处理 SEO 的需求. 本文主要针对 vue 2.0 单页面 Meta SEO 优化展开介

  • vue中SPA单页面应用程序详解

    一.SPA的概述 SPA(single page application)单页面应用程序,在一个完成的应用或者站点中,只有一个完整的html页面,这个页面有一个容器,可以把需要加载的代码片段插入到该容器中. SPA的工作原理: eg:  http://127.0.0.1/index.html#/start ①根据地址栏中url解析完整的页面:index.html 加载index.html ②根据地址栏中url解析#后的路由地址: start 根据路由地址,去在当前应用的配置中 找该路由地址的配置

  • vue构建单页面应用实战

    vue构建单页面应用实战

    1. 为什么要 SPA? SPA: 就是俗称的单页应用(Single Page Web Application). 在移动端,特别是 hybrid 方式的H5应用中,性能问题一直是痛点. 使用 SPA,没有页面切换,就没有白屏阻塞,可以大大提高 H5 的性能,达到接近原生的流畅体验. 2. 为什么选择 vue? 在选择 vue 之前,使用 reactjs 也做过一个小 Demo,虽然两者都是面向组件的开发思路,但是 reactjs 的全家桶方式,实在太过强势,而自己定义的 JSX 规范,揉和在

  • Vue单页面应用保证F5强刷不清空数据的解决方案

    问题描述: Vue单页面用按F5强刷,数据就恢复初始了,这怎么破? 解决方案: store.subscribe((mutation, state) => { sessionStorage.setItem('mobileState', JSON.stringify(state)); }) if (sessionStorage.getItem('mobileState')) { state = JSON.parse(sessionStorage.getItem('mobileState')); }

  • vue.js单页面应用实例的简单实现

    vue.js单页面应用实例的简单实现

    一:npm的安装 由于新版的node.js已经集成了npm的环境,所以只需去官网下载node.js并安装,安装完成后使用cmd检测是否成功. 测试node的版本号:node -v 测试npm的版本号:npm -v 以上提示代表安装成功 二:vue.js环境搭建 1.首先安装淘宝的npm镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装vue.js环境::cnpm install -g vue-cli 3.测

  • 基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )

    基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )

    概述 使用Vue2进行的仿手机QQ的webapp的制作,在ui上,参考了设计师kaokao的作品,作品由个人独立开发,源码中进行了详细的注释. 由于自己也是初学Vue2,所以注释写的不够精简,请见谅. 项目地址 https://github.com/jiangqizheng/vue-MiniQQ 项目已实现功能 对话功能--想着既然是QQ总要能进行对话交流,所以在项目中接入了图灵聊天机器人,可以与列表中的每个人物进行对话. 左滑删除--左滑删除相关消息. 搜索页面--点击右上角搜索按钮,能够进入

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

    说明 一直想做一个基于VUE的项目,但是因为项目往往要涉及到后端的知识(不会后端真的苦),所以就没有一直真正的动手去做一个项目. 直到发现GitHub上有网易云音乐的api NeteaseCloudMusicApi,才开始动手去做. 仅仅完成了首页,登入,歌单,歌曲列表页. 项目地址 https://github.com/qp97vi/music 项目成功运行还要把后端api在本地运行 前端技术栈 vue2+vuex+vue-router+axios+mint-ui+webpack 遇到的问题

  • vue仿网易云音乐播放器界面的简单实现过程

    vue仿网易云音乐播放器界面的简单实现过程

    由于工作项目的需要,需要使用到歌曲播放,参考多方资料,写了一个仿网易云音乐播放界面,能完整的实现音乐播放功能. 前端简单的使用vue组件和audio标签实现了播放器界面,后端则是调用网易云的API获取对应的歌曲信息.  废话不多说上代码 歌曲播放界面(musicPlay.vue) <template> <div class="main-page"> <audio :src="songInfo.url" id="music&qu

  • React模仿网易云音乐实现一个音乐项目详解流程

    React模仿网易云音乐实现一个音乐项目详解流程

    目录 一.项目功能说明 二.最终效果 三.文件目录结构说明 四.项目技术栈 五.核心技术 六.遇到的问题 七.github链接 一.项目功能说明 暂停.播放歌曲 切换上一首.下一首歌曲 拖动进度条改变播放进度 随机播放.循环播放.单曲循环 实时展示歌词 切换不同分类的歌单.歌手.电台 实现推荐.排行榜.歌单.主播电台.歌手.新碟上架板块的展示 二.最终效果 首页: 排行榜: 歌单: 主播电台: 歌手: 新碟上架: 三.文件目录结构说明 assets:存放共用的css.font图标.image c

  • Python爬取网易云音乐上评论火爆的歌曲

    Python爬取网易云音乐上评论火爆的歌曲

    前言 网易云音乐这款音乐APP本人比较喜欢,用户量也比较大,而网易云音乐之所以用户众多和它的歌曲评论功能密不可分,很多歌曲的评论非常有意思,其中也不乏很多感人的评论.但是,网易云音乐并没有提供热评排行榜和按评论排序的功能,没关系,本文就使用爬虫给大家爬一爬网易云音乐上那些热评的歌曲. 结果 对过程没有兴趣的童鞋直接看这里啦. 评论数大于五万的歌曲排行榜 首先恭喜一下我最喜欢的歌手(之一)周杰伦的<晴天>成为网易云音乐第一首评论数过百万的歌曲! 通过结果发现目前评论数过十万的歌曲正好十首,通过这

  • vue实现的网易云音乐在线播放和下载功能案例

    vue实现的网易云音乐在线播放和下载功能案例

    本文实例讲述了vue实现的网易云音乐在线播放和下载功能.分享给大家供大家参考,具体如下: 效果如图: 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"

  • Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单

    Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单

    此货很干,跟上脚步!!! Cookie cookie是什么东西? 小饼干?能吃吗? 简单来说就是你第一次用账号密码访问服务器 服务器在你本机硬盘上设置一个身份识别的会员卡(cookie) 下次再去访问的时候只要亮一下你的卡片(cookie) 服务器就会知道是你来了,因为你的账号密码等信息已经刻在了会员卡上 需求分析 爬虫要访问一些私人的数据就需要用cookie进行伪装 想要得到cookie就得先登录,爬虫可以通过表单请求将账号密码提交上去 但是在火狐的F12截取到的数据就是, 网易云音乐先将你的

  • vue实现网易云音乐纯界面

    vue实现网易云音乐纯界面

    目录 项目简介 使用姿势 项目结构 界面截图 登录页 发现 播客 我的 关注 搜索 项目简介 使用 Vue Cli + Vue3 + Vant3 编写 [Github地址:github.com/cloudmoonoc…] [网易云音乐接口地址:neteasecloudmusicapi.vercel.app] 使用姿势 npm install npm run serve 项目结构 存在部分问题,在README中 ├─public └─src ├─Api (接口[未做]) │ ├─assets │

  • Vuejs仿网易云音乐实现听歌及搜索功能

    Vuejs仿网易云音乐实现听歌及搜索功能

    前言 前端时间学了vue,一开始看了vue1.0,后来实在觉得技术总得实践,就直接上手vue2.0.然后花了将近一周时间做了一个网易云音乐的小项目.一开始觉得项目比较小,没必要用vuex所以就没有使用,但是后来发现数据流传输有点麻烦,后续会使用vuex. 技术栈 vue+vue-router(核心框架) better-scroll(使移动端滑动体验更加流畅) vue-lazyload(用户图片懒加载) nprogress(用于加载过渡) axios(请求) 功能分析与设计 首先我先参考了现有的一

  • Python3实战之爬虫抓取网易云音乐的热门评论

    Python3实战之爬虫抓取网易云音乐的热门评论

    前言 之前刚刚入门python爬虫,有大概半个月时间没有写python了,都快遗忘了.于是准备写个简单的爬虫练练手,我觉得网易云音乐最优特色的就是其精准的歌曲推荐和独具特色的用户评论,于是写了这个抓取网易云音乐热歌榜里的热评的爬虫.我也是刚刚入门爬虫,有什么意见和问题欢迎提出,大家一起共同进步. 废话就不多说了-下面来一起看看详细的介绍吧. 我们的目标是爬取网易云中的热歌排行榜中所有歌曲的热门评论. 这样既可以减少我们需要爬取的工作量,又可以保存到高质量的评论. 实现分析 首先,我们打开网易云网

  • Android控件RecyclerView实现混排效果仿网易云音乐

    Android控件RecyclerView实现混排效果仿网易云音乐

    前言 最近在使用网易云音乐的时候,看到如下图的排版效果图,自己也想实现一个 这里采用网上用法最多的方式,而且是比较简单的方式实现的,想要做项目的同学也可以快速入手搞定首页界面,可以在最快的时间内模仿出来,且效果达到90%以上的相似 效果演示 至于图片的加载你们可以根据网上的Api获取相应的图片加载到对应的位置,这里只是采用本地图片来演示 实现分析 这里是采用RecyclerView的GridLayoutManager的一个SpanSize这么一个东西,从下图很容易知道其意思 项目结构 项目结构可

随机推荐