Violet音乐社区 - 总结报告

目录

• 一、项目概述
  • 1.1 项目背景
  • 1.2 编写目的
  • 1.3 项目文档
  • 1.4 项目源码
  • 1.5 项目成果
• 二、个人工作总结
  • 1.1 工作概览
    • 1.1.1 作为项目组组长
    • 1.1.2 作为项目组成员
  • 1.2 工作详述
    • 1.2.1 选择前端技术路线
    • 1.2.2 确立前端界面风格
    • 1.2.3 绘制界面原型
    • 1.2.4 编写前端框架代码
    • 1.2.5 实现播放器功能
    • 1.2.6 履行组长职责
• 三、项目总结
  • 3.1 项目立意
  • 3.2 技术路线
    • 3.2.1 整体技术路线
    • 3.2.2 前端技术路线
    • 3.2.3 后端技术路线
  • 3.3 实现情况
  • 3.4 项目收获
• 四、课程建议

一、项目概述

1.1 项目背景

音乐是一门艺术，是由有组织的乐音来表达人们情感、反映人类现实生活情感的艺术。现代科技的发展使得人们可以利用网络随时随地的享受音乐，然而在当今互联网却很少有一个以音乐为媒介的社交平台。本开发团队想以“音乐+社交”的形式，开发一款集听歌、交友和讨论为一体的网上社区——“Violet”音乐社区。Violet多指紫罗兰，也可形容羞怯的人，本团队旨在通过此平台增强人们对音乐的交流，同时拉近人与人之间的距离。

1.2 编写目的

此文档为本人作为该项目成员的个人工作总结，用于记录在开发过程中的经验、感悟以及对该课程的意见和建议，望今后的其他项目能以此为鉴。

1.3 项目文档

• Violet音乐社区需求分析说明书：https://www.cnblogs.com/Keadin/p/11791088.html
• Violet音乐社区设计文档：http://www.cnblogs.com/Keadin/p/11885656.html
• Violet音乐社区API接口文档：https://www.showdoc.cc/589304476235742
• Violet音乐社区界面原型手册：https://www.cnblogs.com/Keadin/p/11974412.html

1.4 项目源码

• Violet音乐社区前端源码：https://github.com/KeadinZhou/se-violet-web
• Violet音乐社区后端源码：https://github.com/shysimon/violet

1.5 项目成果

• Violet音乐社区界面原型demo：http://kealine.top/SE/demo/
• Violet音乐社区完成版：http://kealine.top/violet/

二、个人工作总结

1.1 工作概览

1.1.1 作为项目组组长

作为项目组的组长，我在本次项目中起到一个推动的作用。包括定期组织项目组例会、组织项目组进度自查、组员间任务协调等。

1.1.2 作为项目组成员

作为项目组的成员，我在本次项目中主要负责前端的框架性工作。主要包括前端技术路线的选择、前端界面风格确立、界面原型绘制、前端框架代码的编码等。

1.2 工作详述

1.2.1 选择前端技术路线

为了选择一条适合本项目的技术路线，我调研了当前技术环境中比较热门的一些技术路线，最终确定了前端以Vue.js+ElementUI+axios为主线的技术路线。

1.2.2 确立前端界面风格

前端界面是用户直接进行人机交互的媒介，一个制作精美的界面会大大提升用户的体验。而其中最重要的一点，就是界面整体风格的统一。为了寻找一种契合本项目的界面，我调研了市面上绝大多数的音乐/社交网站，结合本项目“Violet音乐社区”、“陌生人社交”和“年轻人为主”的特点，选择了一种一种扁平化的设计，采用极简主义，更加符合年轻人的审美。界面主体颜色也采用了Violet的另一层意思“罗兰紫”。相应的，系统动效上，我也使用了比较活泼轻快的方案。从项目最后的实现效果来看，这一整体界面风格，在项目中起到很好的作用，能很大程度上提升用户的体验，几位用户代表都觉得这是项目的点睛之笔。

1.2.3 绘制界面原型

由于前端技术路线和前端界面风格确立的很早也很顺利，我早早地开始了界面原型的绘制。由于可以借着界面原型的机会进行技术路线的熟悉，我并没有选择墨刀等界面原型绘制工具，而是直接使用代码进行界面原型的构建。并在需求确立阶段（前两周）就根据已经成型的需求文档绘制出了第一版的界面原型，在进度上超过其他组一大截。而第一版界面原型的代码，也在后面的项目推进中起到了很大的参考价值。

1.2.4 编写前端框架代码

在绘制完界面原型之后，为了简化后期前端的工作量，统一前端代码的结构，减少前端代码的冗余，方便前端项目的后期维护，我完成了前端框架代码的编写。即，将前端界面中使用的组件模块化，封装成一些可高度复用同时具有一定拓展性的组件。比方说“图片下方一些文字”这样一个模块，我封装了“img-name-box”组件，通过相关的参数更改显示的样式，在专辑/圈子/歌单等模块都用不同的应用。我总共写了11个框架组件，在实际项目中都起到了非常好的作用。

1.2.5 实现播放器功能

播放器功能是我们“音乐”部分的核心功能，在实现难度上也较大。我采用了侧边隐藏式的全局播放器，解决了在用户切换界面时播放停止等问题，保证在页面跳转中也能保持歌曲的正常播放，提高用户体验。正常状态下，播放器将会收拢在页面的左下角，不影响用户对于圈子、帖子等内容的正常浏览。需要对歌曲进行操作时(切歌、调整音量、设置播放模式等)，可以将其展开。

1.2.6 履行组长职责

作为项目组的组长，定期组织项目组例会，组织项目组进度自查，保证项目进度有序、顺利推进。协调组员间的任务分配，协调不同负责模块间交流。

三、项目总结

3.1 项目立意

在立项初期的头脑风暴中，项目组一致同意确认了音乐网站这一项目大方向。但音乐网站实在是太多了，相信这次软工的班级中也会有很多项目组选择这一选题，我们得做出一个和他们不一样的音乐网站。于是我们提出了“音乐+社交”这样一个独特的模式，我们不仅仅是一个音乐网站，更是一个社交网站，是一个基于音乐分享的社区。我们选用了”Violet“作为我们社区的名字，”Violet“意为”羞怯的人“，代表我们想要给那些害羞内向的人一个以音乐为媒介的社交平台。”Violet“的另一层意思是”紫罗兰“，这也导致我们在网站选取了”罗蓝紫“作为设计主色。

3.2 技术路线

3.2.1 整体技术路线

项目整体采用了B/S架构，并采用前后端分离技术。

3.2.2 前端技术路线

Vue.js+ElementUI+axios

Vue.js相较于另一热门js框架React，有着更容易入门和代码高度结构化的特点，考虑到前端组内的其它成员并没有前端技术的相关背景，一个易入门和高度结构化的主框架，能减少相关的学习成本，使项目推进更快。

ElementUI相较于AntDesign-Vue和iView等UI库，与Vue.js的契合度更好，更符合Vue.js高度结构化代码的特点，风格也更适合本项目。

axios相较于”Fetch“等HTTP接口，拥有高兼容性的特点，能很好的兼容低版本的浏览器。

3.2.3 后端技术路线

Flask+MySQL

Flask相较于其它后端框架，拥有“微内核”的特点，更轻量级，更适合作为接口类型后端的框架。

3.3 实现情况

在项目结项之际，我们组开了个总结会议，复盘项目从立项之初到当前的完成情况。总体设计上，我们的设计覆盖了绝大多数的需求；具体实现上，我们也切实实现了设计中的大多数功能，小部分功能存在冗余和重复工作量的情况，由于时间有限的原因我们没有选择全盘实现。但总体设计中的绝大多数功能我们都进行了实现，核心功能全部得到了保留，达到了我们立项之初的基本目标，也实现了老师在开课之初强调的“小而精”的目标。

3.4 项目收获

在学习软工这门课之前，我也有相关的项目经历，但项目团队都在两人或者是自己一人的项目这样的小团队。参与在软工课上这样的六人大团队，是首次。经过这一学期的项目实践，我可以说是收获颇丰。这主要体现在多成员之间的协作分工以及相互之间的工作协调上面。特别是对于一个提出的方案，所有人需要对方案进行不停的讨论，不停的更新，不断的优化，达到一个大家都满意的状态。团队成员之间也需要不断磨合，这与一个人的项目一个人拍板都有着截然不同的体验。

四、课程建议

我觉得朱老师这套基于《构建之法》的教学模式是非常优秀的，确实同朱老师开学所说的“只有在实际的项目中，才能学到真正的软件工程”，经过一学期实践，我可以说是收获颇丰，不仅是在相关理论，相关技术，更在于团队之间协调编写项目的经验。

我觉得助教在整个项目过程中也给了我们项目组很大的帮助，在多次例会中都给了我们很中肯的建议，在一定程度上让我们少走了一些弯路。

建议的话，我觉得课程可以进一步削弱期末考试在考核中的比重，把项目过程的比重再加强一些。