薛国鹏，李金忠，刘 宇，罗玉盘

基于Flask和Spring Boot框架的校园点歌平台的设计与实现

薛国鹏1，*李金忠1，刘 宇1，罗玉盘2

(1. 井冈山大学电子与信息工程学院，江西，吉安 343009；2. 井冈山大学网络信息中心，江西，吉安 343009)

当前，市场上的点歌系统大部分都是针对KTV的点歌系统，较少针对校园点歌系统，而且实现技术多为PHP和C#等，在开发难度、开发效率和易维护性等方面具有一定的缺陷。本文采用新近的主流轻量级框架技术，包括Spring Boot框架、Flask框架、Vue和Element-ui前端框架，还采用了腾讯云的人脸识别接口和语音合成接口、富文本编辑和PDFKit等前沿技术以及MySQL等数据库技术，开发了一个基于B/S模式的校园点歌平台。该平台包括手机用户端和电脑管理员端两套系统，手机端可使用户快速点歌和投稿，电脑端能够方便地进行用户管理、点歌管理和稿件管理，并在稿件管理中，设计了一种基于敏感词过滤技术的稿件审核算法以自动过滤掉包含有敏感词的稿件。本平台操作简单、易于维护和易于扩充功能，具有较高的可靠性和可扩展性，可满足大多数高校对于校园点歌的需求，充分地推动校园文化的建设。

校园点歌平台；Flask框架；Spring Boot框架；Vue框架；点歌管理；稿件管理

0 引言

校园广播站是高校在推进校园文化建设方面的重要机构，而校园广播站进行校园文化宣传时最重要的两个大功能即为点歌和播稿。然而，目前在许多高校，校园点歌依旧采用传统的点歌模式，通过社交工具进行面对面点歌。此种方式不仅使得广播站工作人员任务繁重，还会使得高校学生不方便点歌。在传统的校园点歌模式下，高校学生进行点歌和投稿的兴趣普遍不高，高校广播站对于校园文化的建设也着实有限，难以满足现代高校校园文化建设的需求。

要实现校园广播站拥抱时代的现代化、便捷化，其有效的方式是使用互联网技术，提供一个更加便捷的校园点歌、投稿的平台，使得高校的学生可以方便快捷地参与校园文化建设，并且通过平台可以减轻广播站工作人员的工作压力。为此，本文采用Flask和Spring Boot框架技术，设计与实现了一个校园点歌平台，开发了基于B/S模式的手机用户端和电脑管理员端的两套系统，手机端实现了快捷地点歌和投稿等功能，电脑端实现了歌单管理和稿件管理等功能。本平台功能丰富，可满足大多数高校对于点歌和投稿的需求，可有效推动高校校园文化的建设。

1 相关工作

目前，有较多的研究者采用不同的技术开发了有关点歌平台方面的系统。王琴[1]­­­­使用SQL Server和C#技术设计了一种基于C/S模式的KTV点歌系统。豆利[2]以Delphi和SQL Server为开发工具，利用ADD技术开发KTV点歌管理系统。陈国锋[3]采用PHP和MySQL的开发方法，使用Dreamweaver对页面进行优化，设计与实现了一套基于PHP的在线点歌系统。

当前，市场上的点歌系统大部分都是针对KTV的点歌系统，较少针对校园点歌，而且实现技术多为PHP和C#等，在开发难度、开发效率和易维护性等方面具有一定的缺陷。不同于上述传统的点歌系统，本文所设计的点歌系统是针对校园点歌的需求，采用新近的主流轻量级框架Flask和Spring Boot框架，开发了基于B/S模式的手机端用户web app和电脑端的管理系统。使用Flask和Spring Boot框架开发本平台具有一定的优势：(1)Flask和Spring Boot框架所秉承的理念为开箱即用，相对于传统的开发框架开发效率更高，开发成本更低。(2)Flask和Spring Boot框架具有良好的复用性、维护性和扩展性，便于开发、维护和功能扩展。目前Flask和Spring Boot框架也应用于诸多web系统开发，如物资管理系统[4]、成品油销售系统[5]、房屋租赁系统[6]和电子招投标系统[7]等。但据调研的情况来看，将Flask和Spring Boot框架用于开发点歌平台且针对解决校园点歌问题的工作仍然较少。再者，本文所开发的校园点歌平台采用了腾讯云的人脸识别接口去实现用户的登录，并且采用了腾讯云的语音合成接口去模拟不同音色播放留言，从而实现一键自动播放；还设计了一种基于敏感词过滤技术的稿件审核算法以自动过滤掉包含有敏感词的稿件，该算法思想也可针对评论管理模块去过滤掉包含有敏感词的评论。这些优势在现有同类软件平台中是不具备的。

2 开发环境与技术介绍

本文所开发的校园点歌平台采用的数据库服务器为MySQL 5.5，使用前后端分离的开发模式，手机端在JDK8的开发环境下，使用IntelliJ IDEA和HBuilderX作为开发工具，Java编程语言实现；电脑端在Python 3.7的开发环境下，使用开发工具PyCharm和HBuilderX，Python编程语言实现。开发本系统所使用的关键技术主要有Flask和Spring Boot框架技术，以及Vue和Element-ui等前端框架技术。

Spring Boot是一种全新的Web架构，设计宗旨是简化Spring 应用的搭建和开发过程。Spring Boot通过“习惯优于配置”的思想实现 Web 项目的快速搭建，从而避免开发人员定义样板化的配置[8]。

Flask是使用Python语言、基于Werkzeug 工具箱编写的轻量级Web开发框架，它本身相当于一个内核，其他几乎所有的功能都要用到 Flask-extension来进行弹性扩展。Flask自由、灵活，可扩展性强，再加上第三方库的选择面广，开发人员可以按照自己最熟练的开发经验，去结合最流行最强大Python库来完成开发需求。Flask 入门相对简单，即便没有多少Web开发经验，也能很快做出网站，Flask 同样能胜任大型网站的开发[9]。

Vue框架是一套用于构建用户界面的渐进式框架，其核心库只关注视图层，具有易于上手和便于与第三方库或既有项目整合的优点。

3 系统设计

3.1 系统框架结构设计

本平台是基于Flask和Spring Boot框架搭建后端，Vue框架设计前端，MySQL数据库用于存储数据，Redis数据库用于缓存。本平台分为手机端和电脑端两套系统，手机端在MVC模式下，为表现层、控制层和持久层，通过相应的接口编程实现各层之间的通信；电脑端分为服务层和视图层，通过Flask框架来提供服务，Vue框架来渲染数据，两层之间仅以数据进行交互，耦合度低。本平台总的框架如图1所示。

图1 校园点歌平台总框架

3.2 系统功能模块设计

校园点歌平台分为电脑端和手机端两套系统，手机端所具有的功能模块有点歌、投稿、我的信息三大模块，如图2所示。用户可以先注册手机端的账号，并在手机端登陆，进入系统后，可以修改个人信息，查看自己的点歌、投稿情况和阅读精品稿件。点歌是手机端的核心功能，用户可以在点歌界面获得歌曲推荐，并且显示播放次数以供点歌者参考；用户可以直接在本平台进行歌曲试听，防止误点成自己不想要的歌曲，试听歌曲结束后可以进行点歌操作。在点歌操作中，只需填写相关的表单信息，同时可以附上自己的留言。在投稿操作中，手机端支持富文本编辑投稿，用户可以在手机端界面进行编辑，从而使得所投稿件排版整齐，方便广播工作人员进行评审处理。电脑端所具有的功能模块有账户管理、用户管理、点歌管理、稿件管理和评论管理，每个模块下又分为若干子模块，如图3所示。电脑端系统提供两种登陆方式，一种为传统的输入账号、密码登陆方式，另一种为使用腾讯云的人脸识别接口所实现的人脸识别快速登陆方式。登录系统后，首映的是后台主页，该主页以可视化图表形式直观展现本平台使用的相关数据信息。高校的广播站管理员可以在账户管理中对所登录的账户进行操作，如更换头像、修改密码和修改其他相关信息。在本系统的侧边栏区域枚举了本系统的功能，管理员用户可以在用户管理中对手机端的用户进行授权和取消授权管理，在歌单管理中对本校学生用户的点歌请求进行处理，且提供一键播放的功能。在稿件管理中管理员可以查看本校学生的来稿信息，并可进行相应的处理，将稿件划分为精品、合格和不合格三个等级，且能对精品稿件导出为PDF文件，便于对精品稿件的宣传。在评论管理模块，可以删除不良评论，规范言论环境。

图2 校园点歌平台手机端功能模块图

图3 校园点歌平台电脑端功能模块图

3.3 数据库设计

本平台紧扣点歌功能这一需求，主要涉及学校和用户两大主体，为此本平台的数据库设计以用户表和学校表为核心，向其他功能模块扩展，形成了账户管理、用户管理、点歌、投稿和评论等功能。电脑端和手机端共同使用一个数据库，在数据上严格统一，不会出现电脑端和手机端数据不匹配的情况。依据本平台主要功能需求，设计了账户管理模块、点歌管理模块、稿件和评论管理模块相应的三大物理模型，分别如图4至图6所示。

图4 账户管理模块物理模型

图5 点歌管理模块物理模型

图6 投稿和评论管理模块物理模型

4 系统主要功能实现

校园点歌平台包括电脑端和手机端两个系统，各端系统主要功能模块的实现阐述包括电脑端的点歌管理、稿件管理和评论管理模块，手机端的点歌和投稿模块。

4.1 电脑端点歌管理模块

点歌管理模块提供了管理员处理点歌歌单的功能，管理员可以在此模块对手机端用户的点歌请求进行处理。管理员登录电脑端系统后，点击点歌管理下的未处理歌单，则可以看到需要处理的歌单，如图7所示。该模块提供两种播歌方式，管理员既能够进行手动播歌，又能够进行一键自动播歌，并同时可以显示用户的附加需求。管理员如果选择手动播歌，则会将需要念诵的留言显示在窗口中，方便管理员进行留言的念诵，手动播歌的界面如图8所示。在本模块提供的一键自动播歌中，其设计思路为：（1）管理员在播歌方式选择界面，选择一键播歌，跳转至播歌音色选择界面。（2）在播歌音色选择界面，使用了腾讯云的语音合成接口，可以模拟出6种不同的音色来进行播放留言，管理员可以选择合适的音色进行播放留言。（3）管理员在选择完音色进行播放留言时，系统会发送邮件告知点歌者所点的歌曲即将播放。（4）留言播放完成后，系统将会自动进行歌曲的播放，歌曲播放结束后，将歌单的状态改变为已处理歌单，本次播歌的流程结束。该模块的选择声音音色的界面如图9所示。

图7 查看未处理歌单界面

图8 管理员手动念留言界面

Fig. 8. The interface for administrator to read message manually

图9 选择声音音色界面

4.2 电脑端稿件管理模块

稿件管理模块主要提供了管理员查看稿件和审核稿件等功能，系统管理员可以管理学生投稿的相关信息。

查看稿件功能支持富文本稿件，使得稿件美观，审稿人员更不会产生视觉疲劳，其功能界面如图10所示。

图10 查看稿件界面

审核稿件功能是让管理员对所投稿件的内容进行审核处理，其流程设置了两道审核程序：

第一道审核程序：电脑端系统在手机端用户投稿完成后自动进行敏感词过滤，对于具有敏感词的稿件不写入数据库中，并在前端给出提示信息，提示给投稿者稿件含有敏感词的页面如图11所示。为了实现该功能，我们设计了一种基于敏感词过滤技术的稿件审核算法，该算法思路的步骤如下：

步骤一：使用python的第三方分词库jieba库对稿件的文本内容进行分词。

步骤二：将文本分词后得到的词语与缓存中预先定义的敏感词词组进行模糊比对。

步骤三：如果比对成功，则在前端提示投稿人所投稿件含有敏感词，不将稿件写入数据库；若失败，则表明投稿人所投稿件不包含有敏感词，将稿件写入数据库。

第二道审核程序：高校广播站管理人员进行人工审核以确定稿件是否被录用。

高校的广播站管理人员登录本平台的电脑端系统，在稿件审核界面可以看到稿件的内容，并且可以将稿件归为精品稿件、普通稿件和不合格稿件。对于评为不合格的稿件，则广播站不会录用，管理员需要填写详细的稿件问题说明，其界面如图12所示，同时平台也将以邮件的形式告知投稿者，其界面如图13所示。

图11 稿件内容含有敏感词的提示界面

Fig. 11. The prompt interface that the content of the manuscript contains sensitive words

图12 管理员填写稿件问题说明界面

Fig. 12. The interface for administrator to fill in the description of manuscript problems

图13 给不合格稿件发送邮件消息界面

对于精品稿件，具有导出成PDF文件的功能，其导出稿件功能是借助于pdfkit技术将HTML文档转换为PDF文档再导出该文档，实现该功能的核心代码如下所示。

4.3 电脑端评论管理模块

评论管理模块主要用于管理手机端用户对点歌、投稿使用体验的评论，从而更为有效地收集对于本平台使用的用户体验，并且促进手机端用户之间的交流与沟通。手机端用户在点歌或者投稿完成后，可以进行相应的评论，平台管理员在电脑端进行监督。为了防止用户进行恶意评论，在评论提交时同样具有敏感词过滤的功能，对于涉及敏感词的评论将不会写入数据库中，评论管理模块中的敏感词过滤技术与上文中审核稿件中的敏感词过滤技术的设计思路一致。平台管理员登录电脑端系统，点击我校评论按钮，则可以看到我校学生的评论信息，并且点击具体的评论信息后可以查看评论者的学生信息，对于不合规的评论，管理员可以在此功能模块中进行删除，删除后将会有邮件通知评论者。查看评论的界面如图14所示。

图14 查看评论界面

4.4 手机端点歌模块

在手机端能够进行点歌，用户登录系统后点击音乐符号的图标即可进入点歌界面，在点歌界面可以搜索歌曲或者是点击热歌推荐，便可进入歌曲的试听。试听结束后进行点歌表单的填写，填写完成后就完成了点歌操作，点歌界面如图15所示，点歌表单填写界面如图16所示。

图15 点歌界面

图16 点歌表单填写界面

4.5 手机端投稿模块

在手机端，高校学生用户可以进行投稿的相关操作。学生用户登录后便进入投稿的主页面，在投稿主页面中，布局了“投稿”、“投稿排行榜”和“最佳稿件”的选项，如图17所示。

图17 投稿主页面

Fig. 17. The main interface for submitting manuscripts

点击图17中的“投稿”按钮，便可进入稿件编辑界面，如图18所示。本平台稿件支持富文本编辑技术，便于用户所投的稿件进行排版。

图18 编辑稿件界面

Fig. 18. The interface for editing manuscripts

5 总结和展望

为了更好地建设数字化校园，推进校园文化建设，本文采用Flask、Spring Boot、Vue和Element-ui等新颖框架，腾讯云的人脸识别接口和语音合成接口、富文本编辑和PDFKit等前沿技术，以及我们所提出的基于敏感词过滤技术的稿件审核算法，开发了一套校园点歌平台以致力于解决高校传统校园点歌不方便的痛点问题，努力打造一套便捷和普适的校园点歌平台。该平台可以极大地方便高校学生用户进行点歌、投稿和评论等操作，并可减轻高校广播站工作人员管理用户、点歌、稿件和评论等工作压力，使得校园点歌更加轻松快捷。

本平台的特色主要体现在：（1）针对性强，在市场上少见有同类产品。（2）专用性强，专门用于校园点歌，充分从高校点歌模式的角度进行分析，使得高校的点歌模式可以紧跟时代的潮流。

本文所开发的基于Flask和Spring Boot框架的校园点歌平台，还有待于在高校进行运行测试，以期不断地完善平台。对于后期，本平台也会升级许多增强用户体验的功能以达到更完美的用户体验，例如：

（1）增加听歌识曲功能，使得用户在路边听到好听的歌曲就可以快速地使用本平台进行识别，达到快速点歌的目的。

（2）结合大数据技术，采用更为智能的个性化推荐算法，依据用户的个性化推荐帮助具有选择困难症的用户推荐出满意的歌曲以辅助用户进行点播。

[1] 王琴.基于C#的KTV点歌系统的设计与实现[J].福建电脑, 2015,31(8):96-97.

[2] 豆利,王卿海.点歌管理系统的设计和实现[J].电脑知识与技术, 2013,9(36):8207-8208.

[3] 陈国锋,王超.基于PHP的在线点歌系统的设计与实现[J].硅谷, 2012,5(14):53-54.

[4] 吴桐. 基于Flask框架的物资管理系统的设计与实现[D].南京:南京大学, 2016.

[5] 王译庆. Flask框架下成品油销售系统设计与实现[D].西安:西安电子科技大学, 2015.

[6] 武海龙,李国平.基于SpringBoot的房屋租赁系统设计[J].电脑与信息技术, 2019,27(3):76-78.

[7] 焦鹏珲. 基于SpringBoot和Vue框架的电子招投标系统的设计与实现[D].南京:南京大学,2018.

[8] 杨锦山,王辉.基于SpringBoot的项目信息管理系统的设计与实现[J]. 电子技术与软件工程,2020(9): 38-39.

[9] 牛作东,李捍东.基于Python与flask工具搭建可高效开发的实用型MVC框架[J]. 计算机应用软件, 2019, 36(7):21-25.

DESIGN AND IMPLEMENTATION OF A CAMPUS SONG-ON-DEMAND PLATFORM BASED ON FLASK AND SPRING BOOT FRAMEWORK

XUE Guo-peng1,*LI Jin-zhong1, LIU Yu1, LUO Yu-pan2

(1. School of Electronic and Information Engineering，Jinggangshan University，Ji'an, Jiangxi 343009, China;2. Network Information Center, JinggangshanUniversity,Ji’an, Jiangxi 343009, China)

At present, most of the song-on-demand systems are aimed at KTV VOD systems, and few of the song-on-demand systems are aimed at campus song-on-demand systems in the market. Moreover, the implementation technologies are mostly PHP and C#, which have certain defects in development difficulty, development efficiency and easy maintenance, etc. In this paper, a campus song-on-demand platform based on the B/S model is developed by using the latest mainstream lightweight framework technologies, including Spring Boot framework, Flask framework, Vue and Element-ui front-end framework, and some frontier technologies, including face recognition interface and speech synthesis interface of Tencent Cloud, rich text editing and PDFKit, as well as MySQL and other database technologies.The platform includes two sets of systems: the mobile client terminal and the computer administrator terminal. The mobile client terminal enables users to quickly request song-on-demand and submit manuscripts. The computer administrator terminal can facilitate user management, song-on-demand management and manuscript management. In the manuscript management, a manuscript checking algorithm based on sensitive words filtering technology is designed to automatically filter out the manuscripts containing sensitive words. This platform is simple to operate, easy to maintain and expand in functions, and has high reliability and scalability. It can meet the needs of most colleges and universities for campus songs, and fully promote the construction of campus culture.

campus song-on-demand platform；Flask framework；Spring Boot framework；Vue framework；song-on-demand management; manuscript management

TP393.092

A

10.3969/j.issn.1674-8085.2020.05.010

1674-8085(2020)05-0049-0

2020-07-19；

2020-08-28

薛国鹏(1999-)，男，江西赣州人，井冈山大学电子与信息工程学院网络工程专业2018级本科生(E-mail:xuegtopeng@jgsu.deu.cn);

*李金忠(1976-)，男，江西吉安人，副教授，博士，主要从事大数据与人工智能、信息检索研究(E-mail：lijinzhong@jgsu.edu.cn);

刘 宇(2000-)，女，江西赣州人，井冈山大学电子与信息工程学院计算机科学与技术专业2018级本科生(E-mail:ly2289176794@163.com);

罗玉盘(1987-)，女，江西吉安人，助理实验师，硕士，主要从事网络大数据分析、计算机启用系统开发方面的研究(E-mail：lyp@jgsu.edu.cn);