论文总字数：30827字

摘 要

在人们的日常生活中，音乐是一种独特的元素，它可以在我们难过的时候帮助我们振奋精神，它可以在我们对前方道路感到迷茫的时候使我们静下心来，总之，它充斥着我们的生活，令我们的生活更加丰富多彩。人们一般都会通过安装原生的音乐APP来听音乐，流行的音乐APP有酷狗音乐、QQ音乐和网易云音乐，虽然它们都是较为成熟的移动端APP，但是它们的音乐资源参差不齐，一个原生APP可以不能满足用户的音乐需求，可能需要安装多个原生APP，这样就会增加移动端内存的开销，对于用户而言不能集中统一管理音乐资源。

本项目计划设计开发一个移动端音乐Web APP，它是基于Vue框架的前端应用，使用户在浏览器端即可获取音乐资源。Web APP会整合多个网站的音乐资源，尽量满足用户的各种音乐需求，并且设计一个用户管理模块，对用户的行为数据进行记录，这样用户每次登陆此APP就可以获取到历史行为数据。

为了实现上述的设计，本项目核心部分使用WebStorm作为开发平台，使用Webpack构建Vue项目结构，这样可以把精力放在业务逻辑的开发上。

关键词：浏览器 移动端 Vue WebAPP AJAX

Design and implementation of enterprise music web app based on Vue framework

Abstract

In people's daily life, music is a unique element, it can help us to cheer up when we are sad, it can make us calm down when we are confused about the road ahead, in short, it is full of our life, making our life more colorful. People usually listen to music by installing native music apps. Popular music apps include cool dog music, QQ music and Netease cloud music. Although they are relatively mature mobile app, their music resources are uneven. One native app cannot meet the user's needs. It may be necessary to install multiple native apps, which will increase the memory usage of mobile app, for users, music resources cannot be managed centrally.

This project plans to design and develop a mobile music web app, which is a front-end application based on Vue framework, so that users can access music resources in the browser. Web app will integrate the music resources of multiple websites, try to meet the various music needs of users, and design a user management module to record the user's behavior data, so that users can get the historical behavior data every time they log in this app.

In order to achieve the above design, the core part of this project uses WebStorm as the development platform, uses Webpack to build the Vue project structure, so that we can focus on the development of business logic.

Key Words: browser; mobile terminal; Vue; Web APP; AJAX

目录

摘 要 I

Abstract II

第一章 绪论 1

1.1课题背景 1

1.2研究现状 2

1.3论文结构安排 3

第二章 开发环境和开发工具介绍 4

2.1开发环境 4

2.1.1硬件环境 4

2.1.2软件环境 4

2.2运行环境介绍 4

2.2.1 Node.js介绍 4

2.2.2 JDK介绍 5

2.2.3 Maven介绍 5

2.2.4 MySQL介绍 5

2.3本章小结 5

第三章 关键技术和框架介绍 6

3.1 AJAX 6

3.2 jsonp 6

3.3 Axios 6

3.4浏览器跨域访问安全问题 6

3.4.1产生跨域问题的原因 6

3.4.2解决思路 7

3.4.3解决方案 7

3.5 Vue 8

3.6 Spring Boot 9

3.7本章小结 9

第四章 系统总体设计 10

4.1需求分析 10

4.2系统功能设计 10

4.2.1总体功能设计 10

4.2.2网络拓扑结构 11

4.2.3页面设计 11

4.3数据库设计 13

4.3.1数据库选择 14

4.3.2逻辑结构设计 14

4.3.3物理结构设计 15

4.3.4使用AJAX调用后台接口 16

4.4本章小结 17

第五章 系统实现 18

5.1系统主页面骨架的实现 18

5.2推荐歌单模块和排行榜歌单模块的实现 18

5.2.1数据接口的获取 18

5.2.2页面布局和样式 20

5.2.3业务逻辑 23

5.3歌手模块的实现 23

5.3.1数据接口的获取 23

5.3.2页面布局和样式 23

5.3.3业务逻辑 23

5.4搜索模块的实现 24

5.4.1数据接口的获取 24

5.4.2页面布局和样式 24

5.4.3业务逻辑 24

5.5播放模块的实现 25

5.5.1页面布局和样式 25

5.5.2业务逻辑 26

5.6用户管理模块的实现 28

5.6.1数据接口的获取 28

5.6.2页面布局和样式 28

5.6.3服务器端后台逻辑 29

5.6.4客户端业务逻辑 30

5.7本章小结 30

第六章 系统测试 31

6.1播放内核bug修复 31

6.2用户模块的问题 31

6.3项目编译打包和部署 32

6.4项目线上部署 32

6.5本章小结 32

第七章 总结与展望 33

7.1总结 33

7.2展望 33

参考文献 34

附录 36

致谢 43

第一章 绪论

1.1课题背景

进入21世纪，移动端应用的数量快速增长，很多行业都想把业务转移到移动端上，方便用户的操作，且近几年更是趋于大量开发、快速生产和全民应用的态势。与Web APP相比，原生APP对于每一部设备都要进行适配，由于移动端设备的多样性，原生APP在兼容性上有明显的不足，同一个APP可能需要多套代码来兼容和维护，这必将增加项目的开发周期。此外，原生APP内存占用大，因此可以用一款轻量级且兼容性好的Web APP来代替原生APP。目前除了原生APP和Web APP，比较流行的还有Hybrid APP，如图1.1所示，下面介绍一下这三种APP。

请支付后下载全文，论文总字数：30827字