《通信软件开发与应用》结课报告

目录

一、内容：

二、开发过程

三、遇到的问题及解决办法

四、未能解决的问题

五、总结

---

一、内容：

这门课程我主要做的是一个"CloudMusic"简易音乐播放平台。cloudmusic (zhang0121.github.io)

1. 基于Vue全家桶以及开源网易云音乐 NodeJS 版 API。主要实现了页面基本样式，播放，歌词，歌单，MV，视频，搜索，查看评论等功能。
2. 通过axios发送请求，得到数据页面渲染。
3. 首页轮播图基于swiper插件。
4. 音乐播放基于vue-aplayer插件完成，视频播放基于video.js。

部分页面展示：

首页：

推荐MV：

 搜索结果：

 视频播放：

二、开发过程

1、在云服务器上部署网易云音乐 NodeJS 版 API，验证能获取到数据。

2、项目工程搭建。

3、各页面样式编写，获取音乐数据并渲染，配置路由实现页面跳转。

4、整个项目打包，部署到云服务器上。

三、遇到的问题及解决办法

1、使用swiper时，样式能显示，但是图片不能轮播。

解决办法：上网查阅发现是swiper版本过高，降低swiper版本后，恢复正常。

2、使用路由params传参时，跳转之后获取不到所传的参数。

解决办法：配置路由时候的name属性要与对应的.vue文件的name保持一致。还有一种解决办法就是采用sessionStorage传递数据。

3、部署到云服务器后，访问时获取不到部分静态文件（js，css），导致页面混乱。

解决办法：默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。改为相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。没有修改时会默认到根目录去寻找静态文件，然而我并没有把这些文件直接放到root下，所以就找不到。

4、部署到gitpage时，获取不到数据。

解决办法：因为我的请求连接都是http，而gitpage使用https，会拦截http请求。把项目中所有的http请求改为https，然后再到云服务器上nginx代理到http。

四、未能解决的问题

1、清除播放列表时，数据已经清除，但是列表不能及时刷新，导致列表还是会显示。

不完美解决办法：在清除之后，采用页面刷新，更新列表，this.$router.go(0)；

2、批量播放歌单音乐时，发送的请求太多、太快，列表也不能及时刷新，并且会从歌单最后一首开始播放。

不完美解决办法：在批量播放之后，采用页面刷新，更新列表，this.$router.go(0)；但是从歌单最后一首开始播放暂时还未想到解决办法。

五、总结