Vue.js全家桶高还原网易云音乐(Windows PC版)

项目地址

  • 由于网易云的api限制,部分功能可能会失效,如有需要可以clone项目下来在本地运行,如果api炸了,麻烦在评论中告知一下我

  • 因为做的是PC端 所以请在电脑端访问

  • 源码地址

  • 项目预览(评论和歌单详情api都封了我的ip暂时无法使用这两个功能了)

项目描述

前端部分

  • 实现了滑块、弹出层、歌词、分页、轮播等组件 所有组件皆独立完成

  • 使用了Vue.js做单页应用

  • 使用了Vue Router处理路由

  • 使用了Vuex管理组件间的状态,实现非父子组件之间的通信

  • 初始化数据通过localstorage存储

后端部分

  • 开发环境下使用了express处理路由

  • 通过CORS解决跨域问题

完成情况

实现了

(登录功能一开始想做的,但一想大家也不放心把网易云账号密码用来登录,所以还是没做了)

  • 网易云音乐首页(轮播、推荐歌单、每日推荐、热门歌单、排行榜、热门歌手、最新音乐)

  • 切换主题(因为PC端切换主题要改的样式太繁琐,所以只做了黑色和红色的主题)

  • 搜索(歌曲搜索、歌手搜索、歌单搜索、专辑搜索)

  • 播放页面(歌词显示、所有评论显示(分页展示))

  • 歌单、专辑、歌手信息等展示页

  • 当然还有最重要的播放功能(音量调节、快进快退、切歌、当前歌单)

首页(红色主题)

首页(黑色主题)

播放页

歌单内容

图就放一部分了,更多内容欢迎戳 http://oyhfe.com/VueMusic

最后!重点!敲黑板!

距离上次交作业已经过了二十多天了,一开始也没想到这个项目会花掉我这么久时间,一路踩了很多坑,内容实现也有些繁琐,但是收获还是很多的,增加了Vue全家桶熟练度。

欢迎大家提issue,pr


前端开发
Coding Endless

末流大学末流专业末流程序员

459 声望
152 粉丝
0 条评论
推荐阅读
单文件组件下的vue,可以擦出怎样的火花
与时俱进吧,看着 vue3 和 vite,虽然不会用,但还是心痒痒,然后就把原先基于 vue@2 的实现做了重构。不周之处,大家见谅!下面关于过期的内容,我就用删除线标记了。

leftstick64阅读 45k评论 18

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木140阅读 11.8k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 5.9k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.1k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7k评论 6

【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 2.9k

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木32阅读 6k评论 9

末流大学末流专业末流程序员

459 声望
152 粉丝
宣传栏