OMG，终于来到最后一部分了，实现一个简易班级管理系统。为啥不用java web?因为...我不会....只会flask web的菜鸟一枚。相信大家通过前几篇文章，写一个属于自己的flask web应该是相当easy了。那么，这篇文章将把我们之前提到的所有东西融合起来，做一个简单的网站来更深地了解上述技术。麻雀虽小五脏俱全，let's start!

一、实验目标

1. 用户可以注册和登录该网站（账户合法性检测）
2. 用户可以获取个人信息和相应的班级信息和成员信息
3. 管理员可以登录该网站（账户合法性检测）
4. 管理员可以获取班级信息和成员信息
5. root权限管理员可以新建普通权限管理员

二、系统分析

1. 业务流程

针对新系统的功能结构图，再结合原有系统的分析改进，可得到新系统的业务流程图如下所示：

2. 数据流程

系统规划后可以绘制出如下的数据流程图：

3. 数据字典

根据新系统中数据流图中描述的数据信息流，可以得到新系统中用到的信息表，对信息表进行细化后可以得到如下的数据字典，分三部分来描述：

三、总体设计

1.开发环境

为了降低实现难度，我们将代码运行在本地PC上，则需要环境如下所示：

1. Pycharm proffessional（运行服务器脚本）
2. 几款不同的浏览器（火狐/IE/Chrome）
3. Flask web开发组件
4. Anaconda 2.7.13 解释器（python脚本解释器）
5. Mysql 5.7.16解压缩版数据库

2.系统功能结构

3. 系统网络结构

四、详细设计

1. 服务器端主要代码框架

服务器端采用python语言编写，主要的工作是从客户端获取通过ajax发送过来的消息，查询数据库后获得相应的信息并通过json返回数据信息。可能会有变化的情况：接收数据是利用ajax还是form表格发送的，返回json 数据还是网页。

2. 客户端主要代码框架

客户端采用jquery方式编写，主要的工作是从网页获取信息，并发送给服务器端，接收服务器端的返回信息，并显示在网页上。可能会有变化的情况：是否需要利用ajax发送数据，返回json 数据还是网页。

3. 数据库设计

数据库设计主要包括概念设计、逻辑设计和物理设计三部分，因此，该部分将分别从这三部分出发来阐述整个数据库的设计过程。

3.1 概念结构设计

概念设计是对用户要求描述的现实世界(可能是一个工厂、一个商场或者一个学校等)，通过分类、聚集和概括，建立抽象的概念数据模型以扩充的实体。主要表现形式为（E-R模型），下面将绘制出本系统的E-R图。

3.2 逻辑结构设计

逻辑设计是将现实世界的概念数据模型设计成数据库的一种逻辑模式，即适应于某种特定数据库管理系统所支持的逻辑数据模式。主要表现形式为关系实体描述，下面将详细描述本系统的关系实体，用到的所有关系模式如下所示：

1. 用户（用户id，账户，密码，姓名，性别，居住地，电子邮箱）
2. 管理员（管理员id，账户，权限等级，密码）
3. 备忘录（备忘录id，标题，内容，日期）
4. 公告（公告id，标题，内容，日期）
5. 班级（班级id，名称）
6. 班级成员（班级id,用户id）

3.3 物理结构设计

物理设计是根据特定数据库管理系统所提供的多种存储结构和存取方法等依赖于具体计算机结构的各项物理设计措施。主要表现形式为具体的数据表描述（包括各个字段，主键/外键/数据类型等，主码为加粗选项）。

4. 输入输出界面设计

在完成了数据库后端设计后，如何设计UI界面，让系统使用者能够友好快速的使用该系统就成为了当前急需解决的问题。良好的UI界面不仅能增加用户对该系统的好感，也能够将系统的功能最大限度的展现在使用者面前。因此，接下来将从输入界面设计和输出界面设计两方面开始阐述该系统的输入输出界面设计。

4.1 输入界面设计

系统的输入主要是靠html的表格和模态框来完成的，并且输入输出界面有很大重合性（获得输入结果后又输出显示在当前界面上(通过对话框或是网页列表等)），典型的输入界面包括如下几个：

1. 注册登录页面

【用户注册登录页面】

用户使用系统前要完成注册和登录功能，因此，单独列出注册登录页面会比较方便，该页面原型如下(signin.html)

【管理员登录页面】

管理员只需要登录即可使用该系统，新管理员的产生是通过root权限管理员授权而得到的。因此采用对话框方式实现，具体如下所示：

【其余信息输入界面】

包括密码修改界面新密码的输入输出均采用对话框方式，类似于管理员登录页面，在此不做赘述.

4.2 输出界面设计

输出界面和输入界面都是在一个html文件里，区别在于：动态输出页面主要是通过改变html中的无序列表来设计的。

【个人信息界面】

用户个人信息界面总体上分两栏设计，左边放置用户个人信息，右边放置备忘录信息；管理员信息页面布局与用户界面布局类似，只是将个人信息转变为账户信息，备忘录转变为系统中所有管理员信息即可。

【班级信息界面】

班级信息主要包括班级公告和班级成员，两者采用的界面具有高度的相似性，具体如下所示：

相信通过这一系列图表你已经对整个系统的框架有了很清晰的了解了，接下来就是动手把它一点一点实现的时候了~