项目实战--音乐播放器

音乐播放器Demo – VueCli + Node.js

• 花了两天的时间，完成了这个Demo 可惜的是大一的时候小伙伴就会做这个，我现在大三才会。。。。说多了都是泪
• 这个是音乐播放器的Demo，数据是我在免费的网页上通过node.js爬下来的
• 先上图！
  
  
  

就是这简单的三个页面 ~~

• 后台部分

• 

• 浏览器上面的分页效果其实是可以通过后台控制的，使用limit限制查询数据库的量 两个参数，第一个是从哪里开始查，第二个是查询的量 例如 limit 1,15表示从索引为1的地方开始查询，查15个

• 

• 使用的模块

• 

• 别的后台就是一些基础的post操作

• 前端部分 ---- 至记录i了一些关键的代码

• 

• 

• 另外的页面要获取点击页面传递的id

• 

• CSS3帧动画的知识点 –

• 最后面是audio播放插件 我是引用vue-aplayer这个插件

• 

• 

• 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

• 2020-03-13

• 最新优化了这个项目的分页功能！！

• 作为一个前端程序员，分页功能是我们必须要掌握i的一个功能，很多电商项目以及其他数据量大的项目都会使用到分页功能

• 之前做这个Demo的时候还不是很了解分页功能到底应该怎么做，到底是应该前台完成分页功能还是后台完成分页功能，经过一段时间的了解和学习，我知道了分页功能在数据量大的时候最好是放给后台来做，数据量比较小可以就前端来完成即可 。这里我用的是后端来完成这个分页功能

• 那么后端完成分页前端需要传递什么信息给后端呢？？？ – 需要传递一下信息给后端

• 当前一页需要放多少数据 当前的页数

• 以及后端传递给前端 总的数据的条数 以及我们自己计算的能分多少页

• 

• 后端再根据sql的含有limit关键字的语句来做筛选

• 

• 上图sql语句的意思是 查找15条数据 从索引为 i 的位置开始找

• 还有一个比较关键的就是Vue的v-bind机制很好的能够让我们节约很多的代码量就完成一些判断语句，其中比较典型的就是使用v-bind配合三元运算符的使用

• 

• 三元运算符可以很大的节约我们的代码量

• css的一个知识点： 鼠标移入光标变成不可选定的光标使用的是cursor:not-allowed;

• 

• 在做项目的时候 最好是可以使用less或者是sass来写样式代码，因为逻辑结构也能够更加的清晰

• 以上就是这个播放器所有的知识点 – 完结撒花~~~