基于react框架和MYSQL数据库的社团管理系统

树叶的雪

一、技术简介

1.1 React

React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图，在数据改变时 React 也可以高效地更新渲染界面。以声明式编写UI，可以让你的代码更加可靠，且方便调试。创建好拥有各自状态的组件，再由组件构成更加复杂的界面。无需再用模版代码，通过使用JavaScript编写的组件你可以更好地传递数据，将应用状态和DOM拆分开来。
1.2 JSX

一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。
JSX 是在 JavaScript 内部实现的。我们知道元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。
1.3 webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
1.4 npm

npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。
1.5 Yarn

Yarn 对代码来说是一个包管理器，可以通过它使用全世界开发者的代码， 或者分享自己的代码。Yarn 做这些快捷、安全、可靠。
通过Yarn可以使用其他开发者针对不同问题的解决方案，使开发过程更简单。 使用过程中遇到问题，可以将其上报或者贡献解决方案。一旦问题被修复， Yarn会更新保持同步。
1.6 iView

iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。
1.7 Ant Design

antd服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。
1.8 Egg

egg.js是阿里推出的基于koa的node开发框架。为企业级框架和应用而生。Egg 的插件机制有很高的可扩展性，一个插件只做一件事（比如 Nunjucks 模板封装成了 egg-view-nunjucks、MySQL 数据库封装成了 egg-mysql）。Egg 通过框架聚合这些插件，并根据自己的业务场景定制配置，这样应用的开发成本就变得很低。
Egg 奉行『约定优于配置』，按照一套统一的约定进行应用开发，团队内部采用这种方式可以减少开发人员的学习成本，开发人员不再是『钉子』，可以流动起来。没有约定的团队，沟通成本是非常高的，比如有人会按目录分栈而其他人按目录分功能，开发者认知不一致很容易犯错。但约定不等于扩展性差，相反 Egg 有很高的扩展性，可以按照团队的约定定制框架。使用 Loader 可以让框架根据不同环境定义默认配置，还可以覆盖 Egg 的默认约定。
1.9 JSON Web Token

JSON Web Token（JWT）是目前最流行的跨域身份验证解决方案。它是一个很长的字符串，中间用点（.）分隔成三个部分。客户端收到服务器返回的 JWT，可以储存在 Cookie 里面，也可以储存在 localStorage。此后，客户端每次与服务器通信，都要带上这个 JWT。你可以把它放在 Cookie 里面自动发送，但是这样不能跨域，所以更好的做法是放在 HTTP 请求的头信息Authorization字段里面。
1.10 Knex

Knex.js是为Postgres，MSSQL，MySQL，MariaDB，SQLite3，Oracle和Amazon Redshift设计的“包含电池”SQL查询构建器，其设计灵活，便于携带并且使用起来非常有趣。它具有传统的节点样式回调以及用于清洁异步流控制的承诺接口，流接口，全功能查询和模式构建器，事务支持（带保存点），连接池 以及不同查询客户和方言之间的标准化响应。
二、系统概要设计

系统的设计主要前台和后台两个部分
2.1 系统需求分析

• 登录/登出
  
• 社团信息管理
  
  
  
  • 新增/查询/编辑/注销社团
    
  • 移除社团成员
    
  • 关键字查询社团信息
    
  
  

• 公告管理
  
  
  
  • 新增公告
    
  • 预览/查询/删除已创建的公告
    
  • 公告流量统计
    
  
  

• 管理员管理
  
  
  
  • 添加/删除/编辑管理员
    
  • 权限验证
    
  
  

• 个人信息管理
  
  
  
  • 用户名编辑
    
  • 修改密码
    
  
  

2.2 可行性分析

这里讲的可行性分析的任务是从技术上、经济上分析需解决的问题是否存在可行性。其目的是在尽可能短的时间内用尽可能小的代价确定问题是否有解。
技术上的可行性分析主要分析技术条件能否顺利完成开发工作，硬、软件能否满足开发者的需要等。
React是一个用于创建可重用且有吸引力的JavaScript框架。它非常适合代表经常变化的数据的组件。使用React，您可以通过将它们分解为组件而不是使用模板或HTML来构建可重用的用户界面。

• 灵活性和响应性：它提供最大的灵活性和响应能力
  
• 虚拟DOM：由于它基于文档对象模型，因此它允许浏览器友好地以HTML，XHTML或XML格式排列文档
  
• 丰富的JavaScript库：来自世界各地的贡献者正在努力添加更多功能
  
• 可扩展性：由于其灵活的结构和可扩展性，React已被证明对大型应用程序更好
  
• 不断发展： React得到了Facebook专业开发人员的支持，他们不断寻找改进方法
  
• Web或移动平台： React提供React Native平台，可通过相同的React组件模型为iOS和Android开发本机呈现的应用程序
  

无论是Web还是本机移动开发，React都是大多数用户界面设计平台的理想选择。
本系统数据库使用的MySQL，MySQL是最流行的关系型数据库管理系统，在WEB应用方面MySQL是最好的关系型数据库，轻量、开源、简便易用，使用Navicat Premium 12做数据库图形化管理更高效率进行前后端开发。
2.3 Server端模型





由前台客户端发起请求来请求数据，Egg服务器判断是否在白名单或请求头中的token是否有效，若满足条件之一，则放行请求，根据router访问对应的controller，controller为数据的处理层，将数据处理好后通过service对数据库进行访问与操作，然后将service返回的结果在controller进行再次处理与封装，然后将响应数据和状态码（默认200）返回前台
三、数据库设计

3.1 数据概念结构设计

E-R模型是数据进行第一层抽象的表示方法。它的主要成分包括：实体、联系和属性。我们可以用E-R图将内容表达出来，辅助设计的实现[6]。
3.2 数据库关系设计

该系统数据库关系图如下所示：



3.3 数据字典

管理员表(admin)

字段	类型	主键	允许空值	备注
id	int(11)	P	否	自动递增
login_name	varchar(255)	否
name	varchar(255)	否
password	varchar(255)	否
role	int(1)	否	1：超级管理员 2：管理员
isDel	int(1)	否	默认0

学生表(student)

字段	类型	主键	允许空值	备注
stu_id	varchar(255)	P	否
stu_name	varchar(255)	否
password	varchar(255)	否
sex	int(1)	否	0：男 1：女
role	int(1)	否	0：未审核 1：家庭成员 2：业主
tel	varchar(255)

社团表(community)

字段	类型	主键	允许空值	备注
id	int(11)	P	否	自动递增
title	varchar(255)	否
desp	varchar(255)	是
belong_dept	int(11)	否
manage_dept	int(11)	否
chairman_stu_id	int(11)	否
type	int(11)	否
create_time	varchar(13)	否
status	int(1)	否	0：未审核 ; 1：已审核 ; 2：已注销

社团-学生表(community_student)

字段	类型	主键	允许空值	备注
id	int(11)	P	否	自动递增
stu_id	int(11)	否
community_id	int(11)	否
role	int(11)	否	0：成员； 1：社团管理员
isDel	int(11)	否

社团类型表(community_type)

字段	类型	主键	允许空值	备注
id	int(11)	P	否	自动递增
type_name	varchar(255)	否
isDel	int(11)	否	默认0

部门表(dept)

字段	类型	主键	允许空值	备注
id	int(11)	P	否	自动递增
dept_name	varchar(255)	否
isDel	int(11)	否	默认0

公告表(notice)

字段	类型	主键	允许空值	备注
id	int(11)	P	否	自动递增
title	varchar(255)	否
author	varchar(255)	否
content	text	否
create_time	varchar(255)	否
isDel	int(11)	否

公告日志表(notice_log)

字段	类型	主键	允许空值	备注
id	int(11)	P	否	自动递增
notice_id	int(11)	否
stu_id	int(11)	否
create_time	varchar(255)	否

四、后台设计

在接口设计方面，使用restful API设计原则，访问同一资源的不同操作时，使用同一命名空间，使用不同的请求方式区分不同的操作。
数据中均没有使用物理删除，只做了逻辑删除，保证数据可回溯。
新增与更新，都使用同一个接口，根据是否有id去判断是更新还是新增
4.1 Egg

本系统后台采用egg.js编写，egg继承于koa，操作与配置更加简洁，每个请求发送至后台时，先通过编写好的中间件（middleware），然后根据访问的路由（router）去执行对应的控制器（controller），控制器中只做数据操作，不对数据库进行直接操作，将数据整理为服务（service）所需要的形式，直接发送给对应的服务，服务对数据库进行直接操作，然后将结果直接返回给控制器，控制器再将结果响应给前台。
如此，完成了一次请求
4.2 权限校验

已登录的用户，在请求时的请求头会带Authorization字段，若请求在白名单内，则不需要通过jwt中间件，直接放行，否则要校验此字段，字段里是bare + 登录时生成的json web token。
jwt中间件对token进行解码后，判断是否合法并且在有效期内，通过则放行，不通过则直接返回状态码401（无权限）。
代码实现：



4.3 连接数据库

本系统通过knex对数据库进行操作，以函数式编程的方式，简化了手写sql语句的操作，使代码更具语义化与可读性。
配置MySQL数据库



4.4 上传图片

前端将图片以表单提交的形式传至后台，后台接受一个文件流，将其重命名后存放到目的位置，之后将完整路径发送至前端。



五、页面设计

页面采用蚂蚁金服出品的Ant Design UI 组件库，提供了完善的设计原则、最佳实践和设计资源文件（Sketch 和 Axure），来帮助业务快速设计出高质量的产品原型。
5.1 登录页面





输入用户名密码，点击登录，在对密码进行MD5加密后将login_name和password发送至后台，后台进行校验，匹配后将Json Web Token响应回来，将这个token存至cookie中，设定7天的过期时间，当前端再次发起其他请求时，将这个token带到请求头的Authorization字段中，供后台解析。
若cookie中无请求头，则中止请求，使页面跳转回login页面，重新登录。



5.2 主页





antd支持layout和grid两种页面布局，这里采用layout布局，侧边栏通过递归一个JSON对象进行渲染对应的列表内容。



获取到用户信息时，判断用户的角色，只有超级管理员才可显示管理员管理页签。
顶部header下拉菜单可以直接跳转到个人信息或者退出登录。



侧边栏通过collapsed状态进行切换开启或关闭状态。





主题内容部分采用react-router-dom路由切换，根据url变化切换content内容。



当页面均无法匹配到对应路由的时候，则进入noFound页面
5.3 社团管理





社团列表页面，做了关键字查询与分页功能，分页功能默认每页10条，可更改。



点击编辑按钮可对当前社团进行更改。



对每一项均做了填写校验。



在选择社团主席时，输入学号进行远程搜索，动态选择。
此处使用Lodash中的防抖功能对输入进行了优化，减少了多次请求造成的性能问题，也避免因请求返回次序不同造成的数据错误。







当点击详情按钮时，可显示社团内成员，并进行了分组，可对成员进行直接移除。
5.4 公告管理

5.4.1 新增公告





此处使用react-draft-wysiwyg富文本编辑器制作新增公告功能。编辑好的内容会以HTML标签字符串的形式发送给后台。当发送空值时内容为 ’

’，此时发布会提示没有添加正文，是否确定提交。



由于富文本中添加图片是一个比较复杂的操作，此富文本编辑器默认仅可选择在线图片，可增加选取本地图片的选项，但是需要自己后台支持。



在此处选择图片时，图片限制不可超过500KB并且只可选择'jpg', 'jpeg', 'png', 'gif'这四种格式的图片，选择成功后，会自动将图片上传至服务器，服务器会将处理好的图片的url返回至前台并显示在虚框内，点击添加即可显示到富文本编辑器中，发布时此处会变为


标签。
5.4.2 公告列表





在此处使用了骨架屏，在数据未完整请求到时，显示骨架，并且为骨架添加必要的延迟，避免白页与页面闪烁。





当骨架结束后，页面显示内容，对数据进行必要的处理后，点击预览按钮可以显示手机模拟器，预览本条公告。



手机页面可以进行滚动，但由于在电脑浏览器端显示滚动会有滚动条，很难去掉，有兼容性问题，为了提高体验，显示滚动条，然后将内层盒子扩大出一个滚动条的宽高，再将外层盒子进行over-flow设置为hidden，超出部分不可见，更好地实现模拟手机的滚动功能。





点击删除按钮时会弹出提示。



确定后才会删除（逻辑删除）
5.4.3 流量统计





默认显示一周以内的公告流量数据，此处使用echarts制作环形图，点击右侧可进行过滤 上部时间picker可以选择时间范围，默认为一周内。通过此功能，可以对公告的阅读量进行统计，以便推出更受欢迎的公告资讯。
5.5 管理员管理

只有超级管理员可进入此tab，普通管理员进入不显示这个菜单项，如果在url处输入对应路径，会进入no permission（无权限）页面。





进入管理员管理页面后，可操作其他管理员但不可操作自己与其他超级管理员。





此处填写表单均做了表单校验，新增与编辑同理。
5.6 个人信息





此处分为基本信息模块与密码模块，基本信息模块可修改用户基本信息，此处只设置了姓名，还可以增加手机号，性别，个性签名，身份证号等等。
密码模块必须正确输入之前的密码，两次新密码必须一致，而且要满足以字母开头，长度在6~18之间，只能包含字母、数字和下划线才可提交。





原密码错误会提示错误。