查看原文
其他

一个月能干点啥?我写完 VUE 音乐播放器 | 原力计划

程序人生 2020-10-29

作者 | 一像素的执着
责编 | 王晓曼
出品 | CSDN博客

前言

我觉得每一段自己努力的时光都需要被自己记录下来,所以就有了想法记录我这一个月看视频的所得。在这个过程中自己没有像之前一样,遇到自己解决不了的问题就逃避。虽然说解决一个问题的速度还是有点慢,大概是自己有点轴,这个方面行不通不知道去换一个方向。
还有就是在这个过程中,自己体验到一个比较完整的开发历程。为什么说是比较完整的项目开发历程,因为自己没有经历切图画界面这一块,自己甚至没有怎么去写UI界面。我的想法是趁着写着文档的同时,把写UI这一块也过一遍。不然明年走出去,只会写业务逻辑的前端程序员,什么玩意吗。碎碎念念这么多,接下来就是写一下自己在这一个月学的一些东西。
如果觉得你看了觉得有点用可以点个赞,如果你也想跟着视频学一遍,你可以点击这个链接进行学习。放心就算你购买这个课程我也没啥佣金,只是单纯地觉得这个课程很好,课程的价值大于购买的价格。

项目总览

1.技术栈
vue2+ vuex + vue-router + webpack + ES6/7 + better-scroll + stylus
2.关于数据接口
写在前面有很多接口都需要后端代理,后端代理怎么做可以看这篇博客,还有所有接口的使用都是用于学习。虽然说接口都给你们贴上去了,但是我还是希望你们可以学会扒别人接口。可能后面接口失效了,自己也可以解决这个问题。
  • banner图API

  • 推荐歌单API (rnd的参数是使用Math.random()生成的)

  • 歌单详情API

  • 歌手API

  • 歌手详情API (singermid 是从歌手API中返回的数据中得到的)

  • 排行榜API

  • 排行榜详情API (topid是从排行榜API得到的)

  • 搜索API (我直接用老师的线上的API了,不过还是要做代理)

  • 热门搜索API

  • 歌词API (pcachetime 是使用 +new Date()生成的)

  • 播放地址API (songmid 里面的参数是歌曲的songmid)

3.说明
开源这个项目没这个想法,主要是这个项目老师也没有开源,要尊重老师的劳动成果。
6月份会开始写一个音频类的小程序,比较还是要自己手撸一个项目,面试更加有优势。
4.效果演示
推荐页面

歌手页面
排行页面
搜索页面
用户页面
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。你自己要看的是自己什么样的目标自己可以完成,而不给自己一个根本完成不了的目标,在这个过程中你觉得自己完成不了很容易放弃。
放弃很简单,但是坚持下去很难。还有就是你决定要做的一件事情,不要一遇到困难就放弃。逃避很简单,解决它则是很勇敢的行为。你逃避困难的次数越多,你将来就越不可能把这件事情做好。想想自己为啥什么事情都不怎么做的好,是因为自己从小到遇到难一点事情都扛不下来,所以到了成年,基本上干啥都不行。(这句话来自冯大)。
未来希望自己可以直面遇到的困难,菜鸡也有雄鹰梦。
版权声明:本文为CSDN博主「一像素的执着」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/eagle_zcl/article/details/105946673

更多精彩推荐

 15 岁黑进系统,发挑衅邮件意外获 Offer,不惑之年捐出全部财产,Twitter CEO 太牛了!

过五关斩六将,终于拿下抖音研发技术岗位! | 原力计划

雷军:4G 手机已清仓,全力转 5G;QQ音乐播放中途插语音广告引热议;Wine 5.9 发布 | 极客头条

10行Python代码能实现什么高端操作?

实操来了!一文告诉你如何用 Streamlit 和 Heroku 开发 Web

DeFi 可以从金融危机中学到三件事

你点的每个“在看”,我都认真当成了喜欢

    您可能也对以下帖子感兴趣

    文章有问题?点此查看未经处理的缓存