摘要：随着时代的进步，互联网科技的飞速进展，人们对生活品质的要求越来越高，所以就推动着各个方面的技术不断成熟，不断地壮大，包括安卓，IOS，Web前端，Java，各种技术逐步向着更加便捷，更加智能的方向去发展。就比如说web前端方向，从一开始使用简单的CSS，HTML，去搭建简单的静态网页，然后使用类似JQuery的一些js库去实现某些功能；从MVC到现在的MVVM，NodeJS，React，Vue等等新新技术的成熟。人们只需要通过几行简单的代码就可以实现一些复杂的功能。

互联网技术的成熟让现在实现一个网页变得相对容易，诞生了各种各样的网站，其中音乐网站更是数不胜数，音乐让人们心情愉悦，人与人之间的沟通交流可以通过音乐去实现，人们对历史的怀念可以通过音乐去表达，人们的各种情感统统都可以使用音乐去诉说。所以一个音乐网站的存在很有必要。随着前端技术的发展，音乐网站也变得逐渐多样化，从音乐的播放，到视频的播放，到人与人之间的沟通，评论。前端使一切都变得可能。

React作为近几年才崭露头角的新星框架，从一个简单地UI引擎变成了一整套前后端通吃的 Web App解决方案。衍生的 React Native项目，目标更是宏伟，希望用写 Web App的方式去写 Native App。所以我使用react去实现一个网易云音乐，在深入学习这个框架的同时，还可以为将来进入公司工作打下从0-1开发项目的基础。

 

关键词：前端；前端框架；MVC；React

 

目录

摘要

Abstract

第1章 绪 论

1.1背景与意义

1.2国内外发展（应用）现状

1.3论文所做工作及思路

1.4论文章节安排

第2章 预备技术和原理解释

2.1 HTML

2.1.1概念

2.1.2常见标签及使用方式

2.2 CSS

2.2.1概念

2.2.2基本使用

2.3 JavaScript

2.3.1概念

2.4 React

2.4.1概念

2.4.2常见使用方式

第3章 需求分析及详细设计

3.1业务流程分析

3.2数据流分析

3.2.1 NeteaseCloudMusicApi使用方式

3.3性能需求分析

3.3.1 音乐网站的可行性

3.3.2项目开发方案设计

3.4首页

3.4.1顶部菜单栏以及登录框

3.4.2首页轮播图

3.4.3热门推荐

3.4.4个性化推荐

3.4.5新碟推荐

3.4.6榜单

3.4.7底部播放栏

3.5歌曲详情页

3.5.1歌曲信息部分

3.5.2歌曲评论部分

3.6歌手详情

3.7我的音乐

3.7.1左侧列表

3.7.2右侧信息页

3.8用户主页

第4章 系统实现

4.1首页

4.1.1项目顶部菜单栏

4.1.2轮播图

4.1.3热门推荐

4.1.4个性化推荐

4.1.5新碟上架

4.1.6榜单

4.1.7播放栏

4.2歌曲详情页

4.2.1歌曲信息部分

4.2.2歌曲评论

4.3歌手详情页

4.4我的音乐

4.4.1左侧列表

4.4.2右侧信息页

4.5用户主页

第5章 功能测试以及问题解决

5.1项目功能测试

第6章 结 论

致 谢

参考文献