摘  要

 

近几年来信息电子音乐技术不断地发展，伴随而来的是移动端应用也在高速地进步和发展。当今市场移动端音乐App种类繁多，然而市场已有的的音乐App都各自有不同的歌曲和乐库，每个音乐App的乐库的歌曲也不完整，用户需要同时下载多个音乐App来满足他们的各种听歌和娱乐需求，由于一个原生App的乐库很难同时包含所有歌曲和兼容多个移动设备，此时就需要一款轻量级、曲库庞大且兼容性强的音乐App，而本项目中的音乐Web App刚好满足这一需求。

本项目的设计开发是基于Vue的音乐Web App是一款轻量级的音乐App，它能够获取到多个音乐平台的一切乐库，也可以内嵌在所有的App和网页中，极大的方便了用户的操作，同时也避免了用户下载多个音乐App的操作步骤。且它可以插入到任何网页和应用程序中，是一个很容易与多种设备兼容的的程序。

本项目的系统通过系统的需求分析，确定了系统的功能性模块，主要有推荐功能模块、歌手功能模块、排行功能模块、搜索功能模块、播放功能模块和个人中心六大模块。通过利用vue-cli脚手架数据处理工具快速地构建和初始化每一个项目的视图和代码。使用vue.js框架构建的用户界面的MVVM框架完成数据与视图的双向绑定。通过使用vue-router为单个组件和页面的应用来提供路由管理系统来有效地优化组件和页面的数据跳转。通过使用第三方的vuex实现了状态的共享和集中管理，在多个路由管理组件中同时共享某些组件的状态。通过利用vue-lazyload第三方的懒加载库来有效地优化组件和页面的数据加载处理速度。通过Axios和jsonp做跨域数据请求的同时可以利用移动浏览器的localstorage处理本地抓取和存储的数据解决了项目数据的本地抓取、管理和本地数据储存的问题。通过利用eslint代码书写风格的检查数据处理工具规范了代码的正确书写。还可以通过利用fastclick数据处理技术有效地解决了对移动设备和终端的300ms延迟的数据处理问题。

 

关键词：MVVM框架Vue， 移动端， Web  App，  Node.js， Jsonp

目录

第一章 绪论

1.1 研究背景

1.2 国内外研究现状

1.2.1 开发技术及成本

1.2.2 功能及速度

1.3 发展趋势

1.4 系统的优势

第二章 关键技术分析

2.1 前端基本技术语言介绍

2.1.1 HTML

2.1.2 CSS

2.1.3 JavaScript

2.2 前端框架介绍

2.2.1 前端MVVM框架vue.js

2.2.2 前端路由 Vue Router

2.2.3 状态管理 Vuex

2.3 服务端通讯

2.3.1 jsonp

2.3.2 axios

第三章 系统需求分析与界面原型设计

3.1 可行性分析

3.2 功能性需求分析

3.2.1 推荐模块

3.2.2 歌手模块

3.2.3 排行模块

3.2.4 搜索模块

3.2.5 个人中心模块

3.2.6 播放模块

3.3 非功能性需求分析

3.3.1 实用性

3.3.2 通用性

3.3.3 可维护性

3.4 数据库设计原则

第四章 系统设计

4.1 设计目标与原则

4.1.1  用户友好性

4.1.2 兼容性强

4.2 功能设计

4.2.1 推荐模块

4.2.2 歌手模块

4.2.3 排行模块

4.2.5 搜索模块

4.2.5 个人中心

4.2.6 播放模块

4.3 数据库设计

4.3.1 逻辑结构设计

4.3.2 物理结构设计

第五章 系统的实现

5.1 开发环境

5.1.1 操作系统

5.1.2 浏览器

5.1.3 开发环境

5.2 功能模块实现

5.2.1 推荐模块

5.2.2 歌手模块

5.2.3 排行模块

5.2.4 搜索模块

5.2.5 个人中心

5.2.6 播放模块

第六章 结论

参考文献

致  谢