喵喵喵喵喵喵0 (59).doc

《喵喵喵喵喵喵0 (59).doc》由会员分享，可在线阅读，更多相关《喵喵喵喵喵喵0 (59).doc（22页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、安阳师范学院本科学生毕业论文移动端音乐WebApp的设计与开发作者 杨静 系（院） 计算机信息工程学院 专业 物联网工程 年级 2016级 学号 160912154 指导教师 吕靖 论文成绩 日期 2020年4月 诚信承诺书郑重承诺：所呈交的论文是作者个人在导师指导下进行的研究工作及取得的研究成果。除了文中特别加以标注和致谢的地方外，论文中不包含其他人已经发表或撰写的研究成果，也不包含为获得安阳师范学院或其他教育机构的学位或证书所使用过的材料。与作者一同工作的同志对本研究所做的任何贡献均已在论文中作了明确的说明并表示了谢意。作者签名： 日期：导师签名： 日期：院长签名： 日期：论文使用授权说明

2、本人完全了解安阳师范学院有关保留、使用学位论文的规定，即：学校有权保留送交论文的复印件，允许论文被查阅和借阅；学校可以公布论文的全部或部分内容，可以采用影印、缩印或其他复制手段保存论文。保密论文在解密后遵守此规定。作者签名：导师签名：日期：目录1 引言11.1 研究背景11.2 研究目的与意义11.3 目前发展现状21.4 未来发展趋势21.5 本章小结22 关键技术分析22.1 前端开发主要技术22.2 Vue.js框架介绍32.3 数据跨域请求技术介绍32.4 本章小结33 系统分析33.1 需求分析33.1.1 用户需求分析33.1.2 开发工具及环境需求43.1.3 性能需求分析43.

3、2 可行性分析53.2.1 经济可行性53.2.2 技术可行性53.2.3 操作可行性53.3 本章小结54 总体设计54.1 项目模块总体设计64.2 各模块之间的关系64.3 线上数据处理75 详细设计75.1 推荐页面模块75.2 歌手页面模块85.3 排行榜页面模块85.4 搜索页面模块85.5 个人中心页面模块95.6 各类详情页模块95.7 播放器页面模块95.8 播放列表页模块106 系统实现与测试106.1 系统功能页面实现106.1.1 推荐页面实现106.1.2 歌单详情页页面实现116.1.3 播放器页面实现116.1.4 歌手页面实现126.1.5 排行榜页面实现136

4、.1.6 搜索页面实现146.1.7 播放列表页实现146.1.8 个人中心页156.2 系统测试166.2.1 测试目的166.2.2 测试目标166.2.3 测试结果16结束语17致 谢17参考文献18移动端音乐WebApp的设计与开发杨静（安阳师范学院 计算机与信息工程学院, 河南 安阳 455000） 摘 要：互联网的快速发展冲击着世界的每个角落，网络技术更是渗透到我们生活的各个方面，互联网技术已经成为人们快速获取、发布和传播信息的重要渠道。而音乐作为娱乐业的一大产业，其传播方式也从传统的磁带，电台，广播转变为网络获取。每当学习或工作后感觉到疲惫时或者是一些闲暇时刻，通常我们都会拿起手

5、机，戴上耳机，播放一首我们喜欢的歌曲，闭上眼睛来享受这轻松美好的时光。在这种情形下，基于客户和市场的需求，采用HTML(HTML5)，CSS(CSS3)，JavaScript，Node.js，Vue.js，Jsonp，Ajax等前端技术开发一款轻量级，交互体验流畅，对用户友好的移动端音乐WebApp势在必行。关键词：移动端；WebApp；HTML；JavaScript；Node.js1 引言1.1 研究背景中国人民对于生活和工作的热情使得21世纪的中国的面貌焕然一新。21世纪的中国是经济和科技迅速发展的时代，同时也是一个忙碌的、快节奏、充满压力的时代。很多时候人们被生活的种种压力所困扰，在内心

6、深处渴望着释放， 而音乐恰恰可以舒缓和抚慰人们的心灵。因此音乐在人们的生活中承担着不可或缺的角色，有着举足轻重的位置。由于互联网的迅速发展，获取音乐的方式也从传统的电台，磁带，广播转变为网络获取。人们可以通过PC端和移动端很方便的获取想要的音乐资源。由于移动端获取网络资源相对于PC端存在着很大便携性优势，据统计，当今使用移动端获取网络资源的用户相比PC端占据着市场的较大一部分。然而原生Native App无论是在开发中还是用户体验上都存在许多的不足。首先，在用户体验上讲，用户下载安装后占用本地空间，影响用户设备运行速度，并且新版本每次发布后都会需要用户下载升级，如果不更新可能影响用户的正常使用

7、。其次，站在开发的角度讲，因其要与操作系统绑定，增加开发成本和开发周期，而且难以维护，并且发布过程繁琐，可能导致各版本上线时间不统一。而近几年移动端前端技术高速发展，以及W3C的不断完善，和HTML5，CSS3，JavaScript，DOM技术的稳定，Web App大有代替Native App的趋势。Web App以轻量级，跨平台，快速迭代，并且可以嵌入任何页面和App中等特点决定它具有相当大的应用价值。加之，原生App频繁的更新下载对于用户来说并不友好。此时就需要一款轻量级，便捷的音乐WebApp，用户无需频繁的更新就能享受到最新的音乐曲库，同时也为开发者省去了一大部分开发成本。1.2 研究

8、目的与意义网络音乐自2005年问世以来就备受人们的喜爱，经过这么多年的沉淀与积累，音乐网站和音乐App的发展也逐渐成熟，目前主要占据市场的几款流行的几款音乐App， 像网易云音乐、QQ音乐、酷狗音乐、酷我音乐，这些音乐App中出现了大部分人群都使用不到的一些功能。对于非专业歌手的大部分人群来说，我们并不需要上传唱片，并不需要很多繁琐的功能，而是在工作和学习之余可以听首歌曲来舒缓心情就好，因此开发的这款具有基本的听歌功能，轻量级，易操作，不需要下载和频繁的更新，同时兼容各个操作系统的移动端音乐WebApp是极具开发意义的。1.3 目前发展现状对于移动互联网行业来说,Web App出现的根本原因是

9、HTML5的兴起和推广。由于现阶段Web App还正处于发展阶段，市面上还未发现一款基于HTML5技术的音乐Web App，此时设计并开发一款轻量级，对用户友好，并有着原生音乐App交互体验的一款音乐Web App更是势在必行。Web App发展不乏经典。在国际上，微软、Google、Fackbook等网络巨头均在其官网嵌入、小游戏方便用户直接访问。Gmail更是Web App的经典，Gmail集合了Gtalk、Google Voice、Google Plus等App，方便用户通过电脑以及智能移动端直接访问。在国内，像百度、360、UC等互联网公司也均已开发Web App。1.4 未来发展趋势

10、相对于原生 App 来说，Web App有着很多的优点，基于HTML5新技术的Web App能够同时满足实时、跨平台、快速迭代、维护方便、开发成本低等特性，并且可以内嵌入任何一款原生 App 或者网页中。作为一种单页应用，也可轻松适配所有移动端机型，具有功能强大且用户友好、轻量等特点。同时，Web App作为一款刚刚推出且流行的移动端单页应用，Web App开发还是比较有限的，其最明显的两点就是不支持离线模式，调用本地硬件设备的能力弱。针对其不能在离线状态工作的问题，目前也有相应的解决方案，例如离线存储技术，离线存储可以将站点的一些文件存储在本地，在离线状态下用户依然可以访问之前存储在本地的文

11、件。可以预测，随着未来移动硬件设备和云端技术越来越完善的情况下以及5G时代的到来，Web App将会更容易的获得所需的数据和服务。用户只需要打开Web App，就可以获取它们所需要的音乐，图片，可以进行社交，游戏，娱乐等，在很大程度上简化了用户操作的复杂性。而对于开发者而言，并不需要同时开发多套代码，只需要开发一套Web App就可以适配所有的设备机型，并且实现跨平台的同步更新。1.5 本章小结本章主要介绍了课题背景，开发本项目的目的及意义，WebApp目前的发展现状和未来可能性的发展趋势，为平台的设计和开发提供了一定的参考价值。2 关键技术分析通过对该音乐WebApp的前期需求分析，采用HT

12、ML(HTML5)，CSS(CSS3)，JavaScript，Jsonp，Ajax，axios和Vue等前端技术和Node.js后端技术来开发本项目。此项目的主要工作是处理前端和后端的交互，编写页面的交互逻辑，调用线上的数据接口，经过处理后为此项目所用的音乐数据。项目全程遵循组件化和模块化的开发模式，下面就对项目中使用到的前端技术难点进行介绍。2.1 前端开发主要技术在移动智能设备和移动互联网的高速发展的今天，移动网站的使用量也越来高。相应的，为了满足人们对移动网站的需求，移动Web前端开发技术也在不断的改进和完善。近年来，Web前端开发的发展可谓是日新月异，尤其是在HTML5版本形成之后，其

13、推广速度惊人，各大浏览器厂商都在为了能支持HTML5技术来改进自家的产品。所以也可以说是HTML5最新规范的发布推动了前端开发领域的快速发展。HTML是超文本标记语言的缩写。在2000年，HTML语言成为国际标准语言，2004年，网页超文本应用技术工作小组（WHATWG）开始开发HTML5，并在2008年与W3C共同交付，2014年10月28日完成标准化。因此，HTML5是HTML的最新标准和规范，是构建网页结构的一种标记语言。HTML5相比传统版本新增了很多了新特性。以下列出了三条常用特性，其一，增加了一些语义化标签，像header，main，footer，section等，增加了文档结构的

14、清晰性和易读性。其二，HTML5中的一大特色是支持了音视频的功能，不再依附于flash插件，使用audio和vedio就可以使用和控制音视频的播放，极大的优化了页面的加载速度，拓展了互联网多媒体的发展空间。其三，增加了离线存储功能，相当于在客户端直接建立了本地数据库。这里仅列举了HTML5发展到至今一部分的新增特性。总的来说，如今越来越多的浏览器对HTML5予以支持，移动端设备对HTML5的支持度也在不断的提高。相信在未来HTML技术会不断的改善并成为web开发的重要技术。2.2 Vue.js框架介绍Vue.js是前端开发中三大主流框架之一，它是基于JavaScript前端编程语言封装出来的一

15、套用于构建用户界面的渐进式框架。和其它前端主流框架不同的是Vue 被设计为可以自底向上逐层应用, 他的核心库只关注视图层，不仅易于上手，还便于与第三方库或项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动2。Vue框架利用MVVM的开发模式和组件化的开发思想，在组织前端代码时深受前端开发者们的欢迎。利用Vue框架开发出的项目不仅轻量级，易学，而且有着易维护和运行速度快等特点。开发者在使用Vue框架进行开发的过程中，并不需要频繁的操作DOM，这样不仅能提高网页的运行效率，并且有利于开发者专注于前端的业务逻辑。2.3 数据跨域请求技术介绍当客

16、户端访问异域资源的话，就会受到浏览器同源策略的限制，同源策略是浏览器出于安全性考虑的一种处理方案。那么在项目开发过程中对跨域请求进行处理是不可避免的事情。解决跨域请求的方法也有很多，在这里主要介绍本项目中使用到的两种解决跨域请求的处理方法。第一种是通过jsonp实现跨域请求。出于安全性考虑，浏览器的同源策略禁止了所有来自异域的请求，但是页面中的并不受同源策略的限制。jsonp实现跨域的原理就是利用script标签自身的跨域特性来实现实现跨域，即在客户端动态的添加script然后url指向要请求的地址，然后将前端的方法作为参数传递给服务器，服务器响应之后再返回。Jsonp是实现跨域请求的常用手段

17、，和其它实现跨域请求的方法相比，jsonp利用script标签自身的跨域能力实现跨域更显得方便轻巧。第二种是通过nodejs代理服务器解决跨域问题。据了解，目前大部分企业在开发项目时都提倡前后端分离的开发思想。然而在这种开发模式下，前端在访问后端的数据时，就避免不了跨域问题。在本项目中的解决方法就是使用nodejs在本地服务器中使用axios异步获取服务端的数据，因为在服务器端并不存在同源策略，所以服务器端也就不存在所谓的跨域问题。使用本地服务器做代理拿到后端的数据后，前端再向本地服务器中获取数据就不存在跨域问题了。2.4 本章小结本章节主要是对本项目中所用到的主要前端技术、开发本项目使用的前

18、端框架以及数据跨域请求技术做出了简要的概述。3 系统分析3.1 需求分析3.1.1 用户需求分析 经调查，大部分人群使用音乐App只是简单的听音乐，他们并不需要一些对于他们来说比较繁琐的功能，而目前市面上比较流行的几款音乐App功能都相对复杂。所以本项目的设计出发点主要是针对一些想要一款轻量级，易操作，功能简洁明了，又有着原生音乐App交互体验的一款移动端音乐Web App。本款音乐Web App主要包括以下功能：1、推荐页面：在推荐页面的上部分实现了无缝连接的轮播图功能，下方热门歌单的推荐列表，歌单列表实现了滚动的功能，在歌单列表的数据没有获取到时，页面上会显示loading效果。同时，歌单

19、列表向上滚动时，左侧的歌单图片也实现了按需加载的一个体验效果。点击歌单推荐列表后就会跳转到歌单详情页。2、歌手页面：歌手页面的歌手列表也实现了滚动的功能和歌手图片的按需加载功能。歌手页面的顶部存在一个固定的索引，当列表向上滑动时实现了索引图形向上顶的效果。歌手页面的右侧存在了一个字母列表，并且实现了右侧字母索引列表和左侧歌手列表左右联动的功能。点击歌手列表后进入歌手详情页。3、排行榜页面：排行榜页面也是本项目的主要功能页面之一，排行榜列表也实现了滑动功能，点击排行榜列表进入排行榜详情页。4、搜索页面：搜索页面的结构主要分为三部分，顶部是一个搜索框，在搜索框中输入搜索词后就会显示和搜索词匹配的歌

20、曲搜索列表。中间部分是动态变化的热门搜索关键词，也可以点击中间的热门搜索关键词进行歌曲搜索。页面底部是歌曲的历史搜索列表，也可以点击历史搜索列表进行搜索，同时实现了删除单条历史数据和清空所有历史数据的功能。5、详情页：各个功能列表所对应的详情页结构都是类似的，详情页下部分是一个可以滚动的歌曲列表，点击后可以进入歌曲的播放器内核页。点击上部分的随机播放按钮，可以对本歌曲列表进行随机播放功能。6、播放器内核页：此页面是本项目的主要功能页面，播放器内核页可以控制歌曲的播放、暂停，对歌曲进行顺序播放，单曲循环，随机播放等播放模式的切换。点击按钮进行上一曲和下一曲，点击右侧心型按钮添加歌曲到收藏列表。控

21、制区上方的滚动条实现对歌曲播放进度的控制功能。在播放器页面左滑显示本首歌曲的歌词列表，并且歌词列表随着歌曲的播放进度而滚动。7、用户中心页：用户中心页主要是对当前用户的收藏歌曲列表和最近播放歌曲列表的一个渲染，用户进到用户中心页后可以播放已收藏的歌曲和最近播放的歌曲。3.1.2 开发工具及环境需求此次设计主要采用的开发工具是Visual Studio Code，运行的环境是window 10系统，在设计过程中的页面主要是HTML网页。下面对Visual Studio Code、window10系统进行介绍：1.Visual Studio Code是在2015年由微软公司开发的可以运行于Mac

22、OS X、Windows和linux等平台，用于编写现代Web和云应用的跨平台源代码编辑器。该编辑器集成了许多现代编辑器都具备的功能，包括语法高亮，可定制的热键绑定，括号匹配以及代码片段收集，并且这款编辑器也拥有对Git的开箱即用的支持。Visual Studio Code还提供了丰富的快捷键功能，有一些常用的预定义的快捷键功能，用户还可以自定义快捷键。该编辑器可以支持多中语言和文件格式的的编写，截止到2019年已经支持的文格式已经高达37种。2.开发此项目的运行环境是window 10系统，window 10是由美国微软公司开发的应用于计算机和平板电脑的操作系统。Window 10相对于传统

23、window操作系统优化和改善了许多地方，其系统在易用性和安全性也得到了很大的提高。3.1.3 性能需求分析为了能够使此项目能都满足用户的一些基本功能需求和流畅舒适的体验效果，对本项目音乐WebApp的性能做出了以下要求：(1)界面美观大方，方便用户浏览与操作；(2)对用户选择的操作处理速度要快捷；(3)可靠实用性：当使用者输入的信息为空或者不正确时都要能够有相应的信息提示；(4)事件处理的准确性和及时性(5)有着原生音乐App的流畅体验效果 (6)系统的开放性和可扩展性(7)系统的易用性和易维护性3.2 可行性分析在做一个项目的时候，不仅要针对本项目做市场需求的调研，还要对项目的可行性进行一

24、定的分析，通过对项目的各种分析以后，观察这个项目是否符合可行的标准。在这个音乐Web App当中对项目实施的经济可行性、技术可行性、操作可行性进行了详细的分析。需求分析是开发一个项目时非常重要的一个步骤，通过需求分析可以对软件的所需功能和性能有一个初步的认识，从未奠定项目开发的基础。需求分析工作也是一个不断认识和逐步细化的过程，通过对市场调研结果的总结，使用户需求细化为开发项目所能解决的元素。3.2.1 经济可行性现在这个时代，科技的发展带动了软件的发展速度。在开发一个项目时，所谓的经济可行性是指项目带来的经济效益与开发项目时的投资比是否适宜。对于本项目来说，开发本项目时并不需要硬件设备。在开

25、发过程中仅仅需要代码编辑器，打包工具和一些第三方开源插件就可以完成本项目的开发，本项目为个人独立开发，所以开发本项目并不存在经济开销，因此本项目的实现具有完全的经济可行性。3.2.2 技术可行性根据需求分析，采用JavaScript语言和基于JavaScript语言封装的Vue.js框架来开发本项目。JavaScript语言是前端开发使用的主要编程语言，使用Vue.js框架进行组件化和模块化开发不仅能够优化代码，加快运行速度，而且对项目的后期维护也方便了许多。Vue.js有自己的生态环境圈，非常容易与其它第三方库或已有项目结合，并且在与相关工具和支持库一起使用时，Vue.js也能完美的驱动复杂

26、的单页应用。3.2.3 操作可行性设计本项目的初衷就是能够设计一款功能简洁，易操作的音乐Web App，因此本项目在使用上具有易操作的特点。毕竟作为一款在闲暇之余可以提供娱乐的音乐Web App，当然使操作越简单越好。在功能上对用户有友好的提示，能够让用户知道是什么功能，该如何去操作。本设计对于用户的操作要求也很低，只需要会使用浏览器就可以操作。所以在操作上是可行的，基本没有困难。3.3 本章小结本章主要是对该项目进行需求上的分析如用户需求、开发工具及环境、性能等的分析以及对于开发本项目的可行性方面进行的分析，为该音乐Web App的设计和实现提供一个完备的需求基础。4 总体设计总体设计的目的

27、就是概要的讲述项目应该如何实现。在需求分析的基础上划分出项目的基本模块。总体设计是开发阶段的第一步，此阶段是对项目中功能实现工程做出详细的决策，使之能够在物理上得以实现。本项目本着组件化和模块化的开发思想，将功能和实现清晰的展开，下面就从介绍本项目的体系架构设计和项目中各模块之间的联系来对本项目进行初步的介绍。4.1 项目模块总体设计此阶段页叫做概要设计，目的是解决系统是如何实现。此阶段的主要任务是划分出项目各模块的基本结构，根据需求分析的结果确定本项目的具体模块构成，这些模块又是通过什么方式联系到一起，确定各个模块之间的关系，每个模块的功能如何实现。我把整个项目分为两个层，支撑层和业务层。我

28、们先来看下支撑层，支撑层的最底层我们使用的是基于MVVM框架的Vue.js。在最底层之上，基于最底层的Vue.js，我们又开发了一套Vue.js的基础组件库，使用Vuex作为整个项目中的状态管理，使用vue-router作前端路由的分发，使用axios和jsonp技术与服务端进行通信。当然，此项目的开发也会依赖第三方插件，如better-scroll和lazy-loader等。同时，本项目的开发也会利用到一些工具来辅助项目的开发。首先我们会利用到vue/cli脚手架工具来初始化我们的代码和配置文件，其次我们会利用webpack自动化构建工具帮助我们调试项目以及编译和打包项目。基于支撑层，我们在

29、上层开发项目的业务层。整个项目的业务层主要有推荐页面、歌手页面、排行榜页面、搜索页面、播放器页面、用户中心页页面、各类详情页页面、歌单列表页页面、添加歌曲列表页页面等主要页面的处理。在本项目中，一共开发了13个基础组件和15个业务组件。所有页面中用到的数据接口都是抓取的线上接口，经过合理的处理后转化为我们可以使用的数据。为了能后给用户带来更好的体验效果，在此项目中也会做一些细节的处理，包括接近原生App的交互体验和一些边界情况的处理。下图的本项目的架构图。4.2 各模块之间的关系此项目的设计可以按功能页面分为六大模块，分别是推荐页面模块、歌手页面模块、排行榜页面模块、搜索页面模块、个人中心页模

30、块。这六大模块都有各自对应的详情页模块，这里的各类详情页除了歌曲的数据来源不同，其结构布局都类似，这里会开发一个基础组件，使各个详情页能够复用此基础组件。点击各个模块页的列表后可以进入到各个列表所对应的详情页页面，然后点击各个详情页的歌曲列表就可以进入到播放器页面。其中，最近播放歌曲列表、歌曲收藏列表和历史搜索列表中的数据会存储在本地的localStorage中。下图是各个模块间的关系图。4.3 线上数据处理此项目中请求服务器端数据接口的方式分为两种，jsonp请求和axios请求。使用jsonp请求的数据有。使用axios请求的数据有。5 详细设计详细设计的主要任务是将项目的构成分解成各个模

31、块。模块是指能够实现某个功能的数据和程序说明、可执行程序的程序单元，可以是一个函数、过程、子程序、一段带有程序说明的独立的程序和数据，也可以是可组合、可分解和可更换的功能单元。由模块结构设计出各个模块的流程和功能。本项目的首页的最上方是项目的logo和名字，右侧的个人中心按钮是可以点击后跳转到个人中心页面的。下方是一个tab导航栏，首页中的导航栏有推荐、歌手、排行、搜索四个选项，点击任一选项可以进入到相应的页面。5.1 推荐页面模块推荐页面的上部分将会实现一个轮播图，轮播图的有关数据将会使用jsonp抓取QQ线上音乐的数据。轮播图的下方将会实现一个热门歌单推荐列表，歌单列表的滚动功能以及此项目

32、中所有列表的滚动功能都会使用第三方开源库better-scroll来封装一个名为Scroll的基础组件来实现。有关歌单列表中需要使用到的数据，将会使用axios和Node.js代理后端请求，模仿线上请求参数，绕过主机限制，抓取线上数据。由于歌单推荐列表图片相对较多，所以我们会使用图片懒加载技术来优化页面和提升用户的体验效果。歌单的数据是通过异步的方式请求的，这里考虑到存在数据还未请求到的情况，所以在数据未请求到时会有一个loading的加载效果。页面名称模块名称主要实现功能推荐页面轮播图无缝滚动，点击进入链接地址热门推荐歌单列表列表滚动，图片懒加载，数据加载loading效果，点击列表进入歌单

33、详情页歌单详情页详情页歌曲列表随机播放功能，歌曲列表滚动功能5.2 歌手页面模块歌手页面模块的左侧是一个可以滚动的歌手列表，列表中有每个歌手的图片和歌手名，右侧是一个热+A-Z的字母列表组合。左侧的列表将会实现滑动的效果，右侧的字母列表将会实现点击选中和滑动选中的功能。左侧列表的滑动和右侧字母列表的选中有实时的联动的效果，类似于通讯录功能的实现。页面名称模块名称主要实现功能歌手页面歌手列表滚动功能，索引定位功能，点击进入歌手详情页首字母导航点击或拖动导航中的字母，左侧歌手列表直接定位到相应歌手歌手详情页顶部显示歌手图片并且有随机播放按钮，底部为可以滚动的歌曲列表。5.3 排行榜页面模块排行榜页

34、面中的数据是利用axios和node.js代理本地服务器等技术抓取的QQ线上的榜单数据。排行榜列表中一共有23个榜单列表，列表的左侧为各个排行榜的名称和图片，右侧为各个榜单歌曲数据中前三名歌曲的显示。页面名称模块名称排行榜页面热歌、新歌、飙升榜、说唱榜等都多个基础组件组成，左侧为歌单logo，右侧为歌单排行前三歌曲的显示，点击列表进入对应排行榜详情页排行榜详情页上部分为榜单图片，下部分是对排行榜歌曲的渲染，并且歌曲列表中每首歌曲的左侧都会显示排行名次5.4 搜索页面模块搜索页面的布局分为上、中、下三部分。上部分是一个搜索框，中间部分是热门搜索的关键词，底部是搜索历史列表的显示。在搜索框中可以输

35、入搜索关键词进行搜索也可以点击中间热门搜索关键词进行搜索。底部搜索历史列表将会实现删除某条搜索历史和清空所有搜索历史的功能。搜索历史的数据会存到本地的localStorage中。页面名称模块名称主要实现功能搜索页面搜索功能在输入框输入搜索关键字或点击热门搜索关键字进行搜索，搜索框下方会显示搜索的结果列表本地存储功能搜索结果会被保存在本地的localStorage中保存节流处理在关键词发生快速的改变时做一个节流处理，省去不必要的请求删除功能实现删除某条搜索历史或清空所有搜索历史5.5 个人中心页面模块个人中心页面将会分为两个模块，一个模块是对个人收藏歌曲列表的显示，另一个模块是对最近播放歌曲列表

36、的显示。每个模块都会实现一个列表歌曲的随机播放功能。页面名称模块名称主要实现功能个人中心页随机播放实现列表歌曲的随机播放功能播放器页面点击列表歌曲进入播放器页面，进行歌曲播放5.6 各类详情页模块对于歌单详情页，歌手详情页，排行榜详情页等页面的结构都是类似的，不同的地方是渲染各个详情页使用的数据不同。排行榜详情页和其它详情页有一点的区别的是歌曲列表的左侧会显示排行的名次。页面名称模块名称主要实现功能各个详情页随机播放实现歌曲列表的随机播放功能歌曲列表实现歌曲列表滚动，上拉刷新功能播放器页面点击歌曲列表进入到歌曲的播放器页面5.7 播放器页面模块对此本项目来说，播放器页面播放是本项目的主要的功能

37、模块。此页面主要有歌曲名、歌手名、歌曲CD、歌词、进度条和歌曲播放的控制区域组成。具体功能如图 所示。页面名称模块名称主要实现功能播放器页面Cd唱片图片歌曲播放时Cd缓慢转动歌词在进度条上方会显示当前播放的歌词，向左滑动显示歌词列表进度条显示以及控制歌曲的播放进度播放模式实现顺序播放、随机播放、单曲循环播放模式上一曲、下一曲切换到当前播放列表的上一曲下一曲播放、暂停实现歌曲的播放、暂停功能收藏歌曲把歌曲添加到歌曲收藏列表中5.8 播放列表页模块播放列表页是由最近播放歌曲的数据渲染出来的一个可以滚动的歌曲播放列表。主要的模块及功能如下表所示。页面名称模块名称主要实现功能播放列表页播放模式控制当前

38、歌曲列表的三种播放模式，顺序播放、随机播放、单曲循环歌曲列表实现滚动功能，对播放列表歌曲的单个删除以及清除所有，收藏歌曲添加歌曲到列表添加其它歌曲到播放列表的功能6 系统实现与测试6.1 系统功能页面实现由总体设计阶段的系统架构以及页面之间的联系和详细设计阶段的各个功能模块的设计，进行项目的开发实现，各个页面的功能模块的总体实现以及重要的程序算法会在本章中做简要的概述。本章中有关6.1.1 推荐页面实现推荐页面中的有关轮播图的功能和歌曲列表所设计到的功能都已经实现，页面效果如下图所示。点击轮播图图片会跳转到相应的链接地址，向上滚动歌单列表会表现出图片的懒加载效果，刚进入推荐列表页时，歌单列表异

39、步加载的数据没有获取到时页面中会显示loading的效果。点击歌单列表中的任何一行会进入歌单详情页页面。6.1.2 歌单详情页页面实现歌单详情页、歌手详情页和排行榜详情结构页都很类似，只不过是数据的不同。各个详情页页面实现效果如下图所示。 在详情页页面，点击随机播放全部按钮实现对歌曲列表的随机播放模式，在上滑歌曲列表时，歌曲列表会缓慢的覆盖除页面顶部以下的页面所有区域，给用户一个美好的体验效果。当歌曲列表快速向上滑动导致数据加载不及时的时候也会伴随一个loading的效果。点击歌曲列表中的任意一首歌就进入到了播放器页面。6.1.3 播放器页面实现播放器页面是本项目的核心页面。播放器页面会使用V

40、uex对播放器页面中的有关状态进行集中式管理。播放器页面的具体实现如下图所示。 进入播放页面时会有一个使用JS创建的animation动画并结合Vue.js中的过渡钩子函数实现的酷炫入场动画。歌词的抓取利用axios代理后端请求，伪造headers来实现，先将歌词jsonp格式转化为json格式，再使用第三方库js-base64进行Base64解码操作，最后再使用lyric-parser对歌词进行格式化。实现了侧滑显示歌词，歌词跟随进度条高亮等交互效果。6.1.4 歌手页面实现歌手页面实现的主要工作是向服务端发送请求，拿到请求数据后并进行处理然后把数据渲染到页面上。实现了歌手页面上方固定导航索

41、引的功能，以及点击右侧字母索引左边列表会瞬间滚动到歌手的首字母和右侧的字母索引项目的位置。点击歌手列表进入歌手详情页，歌手详情页已经介绍。歌手页面的效果图如下。 6.1.5 排行榜页面实现排行榜页面主要是在请求到各个榜单数据后对数据的渲染，以及复用scroll组件实现滚动效果，点击榜单列表后进入到排行榜详情页，排行榜详情页与歌单详情页类似，不同的是数据的不同和对歌曲排序的效果。如下图所示。6.1.6 搜索页面实现搜索页面由搜索框、热门搜索关键字和搜索历史三部分组成，实现效果如下图。6.1.7 播放列表页实现播放列表列页主要实现对当前播放列表数据的渲染，对播放列表数据的删除和收藏，添加歌曲到播放

42、列表，对当前播放列表播放模式的切换。 6.1.8 个人中心页个人中心页主要是从本地存储中获取到个人收藏列表的数据和最近播放列表中的数据渲染到页面上。实现了随机播放全部的功能，点击歌曲列表进入相应歌曲播放器页面。个人中心页页面如下图所示。 当“我喜欢的”或“最近听的”列表中没有数据时，这时候就会伴随着一个友好的提示。极大的增强的用户的体验效果。6.2 系统测试6.2.1 测试目的系统测试是系统在后台功能代码编写完成之后上线前的最后一个步骤，同样也是最重要的一个步骤。它的主要目的是在于发现系统中的代码缺陷或者逻辑混乱的问题，然后对这些问题进行修改和改进，达到能够上线的标准，才算测试结束。要是在系统

43、开发过程中少了这个测试的环节，在上线时候发现了重大的漏洞，那么在上线之后用户体验会大大降低，同时也会对公司造成不小的损害。另外系统测试也能够帮助我们检查自己所写的功能是不是真正符合自己的需求目标，这样一来可以避免在上线后出现网站功能不一致的情况。6.2.2 测试目标主要测试的是项目中功能的实现，功能是否达到预期目标。测试结果如下表所示。测试模块测试功能测试结果推荐页面模块轮播图相关关功能的实现，图片懒加载，列表滚动，点击歌单列表后的跳转成功歌手页面模块歌手列表滚动，歌手图片懒加载，顶部固定索引导航，滑动列表时右侧字母导航的高亮对应，点击右侧字母导航时左侧歌手列表的滚动位置，点击歌手列表后的页面

44、跳转成功排行榜页面模块排行榜列表滚动，点击列表后的页面跳转成功搜索页面模块输入关键词搜索，点击热门搜索关键字搜索，删除历史列表数据，清除所有历史列表数据，点击搜索结果列表后页面的跳转以及搜索历史列表数据的新增，快速输入搜索关键词时的节流处理成功各个详情页面随机播放功能，歌曲列表滚动，点击歌曲后页面的跳转成功播放器页面播放模式切换，上一曲/下一曲，播放/暂停，收藏歌曲，播放进度，点击或拖动进度条改变播放进度，当前歌词显示，歌词列表滚动成功歌曲播放列表页列表滚动，播放模式切换，列表歌曲的删除和收藏，清除所有歌曲，添加歌曲到播放列表成功6.2.3 测试结果经过上面一系列的测试，可以初步确定本项目在运

45、行时并不存在漏洞或者大问题。不影响用户的使用，并且项目中处理了一些边界问题，增强用户的体验效果。结束语在这次毕业设计的前期调查之中，我了解到，电子商务已经基本影响到了全国的每一个地方，这把人们日常的购物形式进行网络化，同时这也是跟着时代前进的体现，这也展示了再未来网络购物必将是主流的购物方式，显示生活中很少会有实体店，各大公司更多的会是仓库来存储商品。这种基于网络的购物方式将给商家和消费者带来非常大的便利，我相信这种网络在线购物的方式将会给我们的生活带来翻天覆地的改变。在本优乐淘购物网站的开发中，在前台页面与后台数据的交互当中用到了Ajax技术，这种技术可以更好的将后台的数据展示到前台页面上。

46、本优乐淘网站在开发过程中想着尽最大努力为用户提供更加友好简单的使用功能，进一步提升用户体验。在本系统的功能实现上，运用到了Python的Web主流框架Django来进行开发，Django继承了RESTFul编码风格，能够大大规范后台代码的URL，提高编程的效率和编码的规范性。以MySQL作为数据库，来保存网站的商品数据和用户的信息数据，为网站的数据交互提供了便利。在系统功能代码完成以后，我又对网站中所有的功能以及是信息的输出进行了不同的多样性的测试，包括从用户的角度和管理员的角度两个方面来对网站进行的操作，这样进行反复的测试能够看出网站的抗压能力，也可以观察功能是否已经符合自己的预期目标。在开发本优乐淘网站的过程中，我也遇到了好多以目前的知识不能解决的问题，所以在设计过程用有很多知识都是一边学习一边实验性的在设计中添加的，因此通过本次的开发我了解了自己在开发当中的缺点以及知识技术的欠缺。在后