一个月写完vue音乐播放器
前言
我觉得每一段自己努力的时光都需要被自己记录下来,所以就有了想法记录我这一个月看视频的所得。在这个过程中自己没有像之前一样,遇到自己解决不了的问题就逃避。虽然说解决一个问题的速度还是有点慢,大概是自己有点轴,这个方面行不通不知道去换一个方向。
还有就是在这个过程中,自己体验到一个比较完整的开发历程。为什么说是比较完整的项目开发历程,因为自己没有经历切图画界面着一块,自己甚至没有怎么去写UI界面。我的想法是趁着写着文档的同时,把写UI这一块也过一遍。不然明年走出去,只会写业务逻辑的前端程序员,什么玩意吗。碎碎念念这么多,接下来就是写一下自己在这一个月学的一些东西。
如果觉得你看了觉得有点用可以点个赞,如果你也想跟着视频学一遍,你可以点击这个链接进行学习。放心就算你购买这个课程我也没啥佣金,只是单纯地觉得这个课程很好,课程的价值大于购买的价格。
正文
一.项目总览
1.技术栈
vue2 + vuex + vue-router + webpack + ES6/7 + better-scroll + stylus
2.关于数据接口
写在前面有很多接口都需要后端代理,后端代理怎么做可以看这篇博客,还有所有接口的使用都是用于学习。虽然说接口都给你们贴上去了,但是我还是希望你们可以学会爬别人接口。可能后面接口失效了,自己也可以解决这个问题
A.banner图API
B.推荐歌单API (rnd的参数是使用Math.random()生成的)
C.歌单详情API
D.歌手API
E.歌手详情API (singermid 是从歌手API中返回的数据中得到的)
F.排行榜API
G.排行榜详情API (topid是从排行榜API得到的)
H.搜索API (我直接用老师的线上的API了,不过还是要做代理)
I. 热门搜索API
K.歌词API (pcachetime 是使用 +new Date()生成的)
L.播放地址API (songmid 里面的参数是歌曲的songmid)
3.说明
开源这个项目没这个想法,主要是这个项目老师也没有开源,要尊重老师的劳动成果。
后面会写一系列关于这个项目的文章,大家如果感兴趣可以可以关注一下我的简书
6月份会开始写一个音频类的小程序,比较还是要自己手撸一个项目,面试更加有优势。
4.效果演示
查看demo请戳这里(请用chrome手机模式预览) 或者用老师的地址
推荐页面
歌手页面
排行页面
搜索页面
用户页面
6.项目布局
├── README.md
├── build
│ ├── build.js
│ ├── check-versions.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js // alias在这里配置
│ ├── webpack.dev.conf.js // favicon可以在这里配置
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── index.html // 入口html文件
├── package-lock.json
├── package.json
├── prod.server.js
├── src // 源码目录
│ ├── App.vue
│ ├── api // 接口
│ │ ├── config.js // 公共配置
│ │ ├── rank.js
│ │ ├── recommend.js
│ │ ├── search.js
│ │ ├── singer.js
│ │ └── song.js
│ ├── base // 公共组件
│ │ ├── confirm // 确认组件
│ │ │ └── confirm.vue
│ │ ├── dialog // 弹出组件
│ │ │ ├── dialog.vue
│ │ │ └── vip.png
│ │ ├── listview // 歌手列表组件
│ │ │ └── listview.vue
│ │ ├── loading // 加载组件
│ │ │ ├── loading.gif
│ │ │ └── loading.vue
│ │ ├── no-result // 无结果组件
│ │ │ ├── no-result.vue
│ │ │ ├── no-result@2x.png
│ │ │ └── no-result@3x.png
│ │ ├── progress-bar // 进度条组件
│ │ │ └── progress-bar.vue
│ │ ├── progress-circle // 圆形进度条组件
│ │ │ └── progress-circle.vue
│ │ ├── scroll // 滚动组件(较核心组件)
│ │ │ └── scroll.vue
│ │ ├── search-box // 搜索框组件
│ │ │ └── search-box.vue
│ │ ├── search-list // 用于搜索历史
│ │ │ └── search-list.vue
│ │ ├── slider // 轮播图组件
│ │ │ └── slider.vue
│ │ ├── song-list // 歌曲组件(用于music-list组件)
│ │ │ ├── first@2x.png
│ │ │ ├── first@3x.png
│ │ │ ├── second@2x.png
│ │ │ ├── second@3x.png
│ │ │ ├── song-list.vue
│ │ │ ├── third@2x.png
│ │ │ └── third@3x.png
│ │ ├── switches // 切换组件(user-center组件有用)
│ │ │ └── switches.vue
│ │ └── top-tip // 顶部提示组件
│ │ └── top-tip.vue
│ ├── common // 存放js、stylus、图片、小图标
│ │ ├── fonts // 小图标文件存放所在地
│ │ │ ├── music-icon.eot
│ │ │ ├── music-icon.svg
│ │ │ ├── music-icon.ttf
│ │ │ └── music-icon.woff
│ │ ├── image // 存放logo和favicon
│ │ │ ├── default.png
│ │ │ └── favicon.ico
│ │ ├── js // js库
│ │ │ ├── cache.js // 处理localStorage
│ │ │ ├── config.js
│ │ │ ├── dom.js // 处理dom
│ │ │ ├── jsonp.js // jsonp的封装
│ │ │ ├── mixin.js // mixin
│ │ │ ├── singer.js
│ │ │ ├── song.js
│ │ │ └── utill.js // 节流函数,生成随机数
│ │ └── stylus // 公共样式
│ │ ├── base.styl
│ │ ├── icon.styl
│ │ ├── index.styl
│ │ ├── mixin.styl
│ │ ├── reset.styl
│ │ └── variable.styl
│ ├── components // 组件
│ │ ├── add-song // 组件
│ │ │ └── add-song.vue
│ │ ├── disc // 组件
│ │ │ └── disc.vue
│ │ ├── m-header // 头部组件
│ │ │ ├── logo@2x.png
│ │ │ ├── logo@3x.png
│ │ │ └── m-header.vue
│ │ ├── music-list // 歌曲列表组件(使用比较多)
│ │ │ └── music-list.vue
│ │ ├── player // 播放组件(核心组件)
│ │ │ └── player.vue
│ │ ├── playlist // 播放列表组件
│ │ │ └── playlist.vue
│ │ ├── rank // 排行组件
│ │ │ └── rank.vue
│ │ ├── recommend // 推荐组件
│ │ │ └── recommend.vue
│ │ ├── search // 搜索组件
│ │ │ └── search.vue
│ │ ├── singer // 歌手组件
│ │ │ └── singer.vue
│ │ ├── singer-detail // 歌手详情组件
│ │ │ └── singer-detail.vue
│ │ ├── suggest // 输入搜索内容出现的列表
│ │ │ └── suggest.vue
│ │ ├── tab // 路由切换组件
│ │ │ └── tab.vue
│ │ ├── top-list // 排行详情组件
│ │ │ └── top-list.vue
│ │ └── user-center // 用户中心组件
│ │ └── user-center.vue
│ ├── main.js // 程序入口文件,加载各种公共组件
│ ├── router
│ │ └── index.js // 路由配置
│ └── store // vuex的状态管理
│ ├── actions.js // 配置actions
│ ├── getters.js // 配置getters
│ ├── index.js // 引用vuex,创建store
│ ├── mutation-types.js // 定义常量muations名
│ ├── mutations.js // 配置mutations
│ └── state.js // state状态
└── static└── logo.png
结束语
其实到最后自己也没有想到自己最后竟然把这个项目跟完,以前可能把目标定的太高了。坚持这件事,一定要一个自己可以完成的目标去执行。打个比分我同学叫我一个月学完vue,但是我的学习能力不足以学完,这个目标是自己完不成的。那么你应该换一个目标,比如说一个半月自己可以学完vue。你自己要看的是自己什么样的目标自己可以完成,而不给自己一个根本完成不了的目标,在这个过程中你觉得自己完成不了很容易放弃。
放弃很简单,但是坚持下去很难。还有就是你决定要做的一件事情,不要一遇到困难就放弃。逃避很简单,解决它则是很勇敢的行为。你逃避困难的次数越多,你将来就越不可能把这件事情做好。想想自己为啥什么事情都不怎么做的好,是因为自己从小到遇到难一点事情都扛不下来,所以到了成年,基本上干啥都不行。(这句话来自冯大)。
未来希望自己可以直面遇到的困难,菜鸡也有雄鹰梦。
一个月写完vue音乐播放器相关推荐
- 第六节:用audio标签打造一个属于自己的HTML5音乐播放器
上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...
- 【游戏开发创新】手把手教你使用Unity制作一个高仿酷狗音乐播放器,滨崎步,旋律起,爷青回(声音可视化 | 频谱 | Audio)
文章目录 一.前言 二.获取UI素材 三.使用UGUI制作界面 1.界面布局 2.账号圆形头像 3.搜索框 4.调节UI层 5.黑色按钮悬浮高亮效果 6.纯文字按钮 7.滚动列表自适应 8.歌名与视频 ...
- vue 音乐播放器上一首 下一首切换
vue 音乐播放器上一首 下一首切换 根据自定义属性的值找到元素 我是使用监听来实现切换的,将v-for循环列表的index存储在vuex中,点击上一首或下一首改变index的值,在另一个组件中监听i ...
- java音乐播放器所需jar包,这个用Java写的开源音乐播放器,我粉了
原标题:这个用Java写的开源音乐播放器,我粉了 开源最前线(ID:OpenSourceTop) 随着版权意识的增强,如今想听几首歌,都得下载好几个音乐软件.这也就算了,大部分音乐还都是付费的,安装这 ...
- 这个用Java写的开源音乐播放器,我粉了
点击上方 好好学java ,选择 星标 公众号 重磅资讯.干货,第一时间送达 今日推荐:我在实际工作中用的最多的 git 命令个人原创+1博客:点击前往,查看更多 随着版权意识的增强,如今,想听几首歌 ...
- 基于 Qt5 ( C++ ) 开发的一个小巧精美的本地音乐播放器
LightMusicPlayer --南京大学2019秋季学期 "高级程序设计" 课程设计三 基于Qt5开发的一个小巧精美的本地音乐播放器 代码注释详细,适合作为一个用于入门的Qt ...
- 开源html5在线音乐网站,一个漂亮的开源HTML5音乐播放器——APlayer
介绍 APlayer是一个简约且漂亮的html5音乐播放器,支持多种模式,包括播放列表模式.吸底模式 .迷你模式.MSE模式.HLS模式. Github https://github.com/diyg ...
- 用jq和bootstrap3 实现一个自定义网页版的音乐播放器
用jq和bootstrap3 实现一个自定义网页版的音乐播放器 1.主要实现功能 1.1.点击播放与暂停,上一首和下一首: 注:用python返回所有歌曲的信息,加载完成默认选择第一首歌曲,通过传递歌 ...
- iOS一个模仿百度音乐盒的音乐播放器(带EQ均衡器)
工作之余, 断断续续写了这么一个音乐播放器, eq实现各种音效, 指定位置播放, 快进快退, 锁屏耳机线控等等, 基本就是参考百度音乐盒的功能来实现的.(项目地址最后放出, 项目中的资源接口, 是抓百 ...
最新文章
- .net程序员转战android第一篇---环境部署
- Linux读写锁释放,Linux读写锁的使用
- 华三交换机mode是什么意思_POE交换机150米、长距离250米传输是什么意思?
- 人月神话阅读笔记之二
- VTK(二)vs2010第一个VTK程序。
- 利用ISA实现网站发布协议重定向
- 鸿蒙开源代码数量,消息称华为鸿蒙此次开源代码量大约是 8GB,AOSP 超 60GB
- 【整理】更改MSSQL默认字符集
- 痕迹清理 - Linux
- 三维闭合B样条曲线拟合算法Matlab代码
- 110配线架打法图解_「干货」图文并茂教会你110语音配线架线缆打法
- 【苹果家庭推送iMessage】软件安装应用程序访问HealthKit HomeKit
- 多分类问题OVR和OVO----机器学习
- 神秘的程序员头像包(附口罩版)第一发
- 31款早餐,一个月不重样
- 常用的Java Web框架简介
- jrebel 反代理服务搭建
- thinkpad linux win7,Thinkpad t440 Win7+ubuntu双系统
- A股上市公司名义所得税率(2003-2019)
- COVID应对小tips
热门文章
- 电脑表格日期怎么修改原有日期_excel表格数据怎样修改时间-excel中怎么把数值改成日期...
- AI超清修复张国荣《热·情》演唱会,面部和舞台极度还原,歌迷泪奔
- 【第二篇】SAP HANA XS使用JavaScript编程详解
- windows继承PHP开发平台,windows平台下php开发平台的配置
- linux shell脚本 编程
- cnpm 安装后cnpm不是内部命令的解决办法
- c 类期刊和b类期刊 计算机,A类B类C类期刊都是什么意思
- 【漏洞复现】CVE-2020-0796漏洞复现(win10系统)
- Kotlin的魔能机甲——KtArmor(一)
- 无限火力跳跳机器人_LOL“无限R”套路火了,CD比无限火力短,机器人大招3秒,该怎么玩?...