摘 要

本论文以满足某高中英文有声社团的成员管理，活动介绍，社团宣传，和自主录制的有声书管理及其展示等相关需求，运用前端、后台、数据库等相关专业技能，进行系统网站前端，管理端，后台的功能开发，和服务的部署及其管理，目前该系统已经部署到云服务器上，通过公网域名http://whbcsonorous.club可以访问。

该系统前端使用Vue框架以构建高性能多平台可用的应用，后端提供满足restful接口规范的http接口，同时在系统设计上使前后端分离使得后端接口有较高的复用率，即可满足网页端的接口需求同时能提供给多平台包括微信小程序，公众号页面，h5等不同的前端页面。

本系统将社团管理系统和在线有声书管理系统结合，通过该系统的相关功能能够便于社团管理者更好的管理社团活动及社团成员；同时网站也对社团进行了宣传，让有兴趣的学生能有一个了解该社团的途径；嵌入有声书管理系统让整个社团的活动产出能被记录下来。该系统有利于整个社团的发展。

关键词：有声书、社团管理系统、网站设计

Abstract

In order to satisfy the requirement of the audio community for their user management, activity introduction, community advocacy and audio book management, this paper uses professional skills such as front-end technology, back-end technology and databases technology to develop the whole web site including front-end, back-end and server end. Now this web site has been deployed to the cloud server and can be accessed by public domain http://whbcsonorous.club.

The front-end of this system uses Vue , a progressive web framework , to build high performance web app, and the back-end server provides restful http interface. At the same time, the system was designed to separate the front-end and the back-end to improve back-end interface’s reuse rate, which can meet the interface requirements of the web page and provide different front-end pages such as wechat app, wechat public account, h5 and so on.

This system combine the community management system and audio book management system. The community manager can manage the whole site better by using this the relevant functions of the system. In a moment, the website also propagatess their community, so that interested students can have a way to understand the club. Audio book management system can record the output of the community. The system is conducive to the development of the whole community.

Key Words: audio book, community management system, web site.

目录

目录 I

1 绪论 1

1.1 背景及意义 1

1.1.1 研究的背景 1

1.1.2 研究的意义 1

1.2 研究现状 2

1.2.1 国外研究现状 2

1.2.2 国内研究现状 2

1.3 研究内容 3

1.4 预期目标 3

2 需求分析 4

2.1 原始需求 4

2.2 需求分析 4

2.3 UML建模 5

2.3.1 用例图 5

2.3.2 类图 6

2.3.2 流程图 9

3 技术介绍 11

3.1 前端技术 11

3.1.1 Vue框架 11

3.1.2 Element ui 12

3.1.3 Webpack 12

3.2 后端技术 13

3.2.1 Koa 13

3.2.2 Sequelize 13

3.2.3 TypeScript 14

3.2.4 Java Web Token 14

3.3 服务器技术 16

3.3.1 Centos 16

3.3.2 PM2 16

3.3.3 Nginx 16

4 系统设计与实施 17

4.1 系统概要设计 17

4.1.1 系统设计目标 17

4.1.2 用户角色描述 17

4.1.3 系统架构 17

4.1.4 功能结构设计 17

4.2 前端页面设计 18

4.2.1 展示端页面设计 18

4.2.2 管理端页面设计 21

4.3 前端功能设计 23

4.3.1 前端框架搭建 23

4.3.2 响应式设计 24

4.3.3 前端架构设计 25

4.3 后台功能设计 30

4.3.1 数据库设计 30

4.3.2 后台架构设计 32

4.3.3 中间件选择 35

5 总结与展望 40

6 参考文献 41

致谢 42

1 绪论

1.1 背景及意义

1.1.1 研究的背景

某高中英文学习社团需要在线上宣传和管理社团，日常社团活动为分角色阅读英文书籍，以练习口语和表达能力。希望有这样一个网站能够宣传社团，管理社团成员的同时将社团活动录制下来的录音上传到网上以有声书的形式展示给其他人。

现有的有声书网站例如喜马拉雅，提供有声书管理的相关功能，但社团关系较弱，主要面向个人。能展示社团个性的网站也并不多见，基本以学校为单位进行社团管理，而大部分学校网站从页面美观程度，到性能、可用性各个方面都不足。大部分学校社团管理网站仍然采用以.net为主的老旧的框架，性能难以提升，代码难以维护不便于学生进行功能修复和开发新的功能。前端也采用较为老旧的技术框架，以jquery和bootstrap为主，整体页面并不整洁美观，且同样技术框架老旧很难进行维护和二次开发。

1.1.2 研究的意义

设计和实现该系统，能帮助该社团更好的管理社团的事务，将成员的管理、活动的通知放到网上，能让社团管理人员的工作更加规范同时有记录可以查询。同时该网站能够帮助该社团做宣传工作，社团的门户网站本身是对社团强有力的宣传，网站中有社团的背景，成员构成，传统活动和各类社团活动的记录，能让其他人更方便且更全面的了解社团。网站中的有声书功能模块也将社团主要活动（阅读）进行了记录同时作为成果输出到网上供他人进行阅览。