基于Python(Flask)+sqlite3实现的(Web)管理信息系统【100011687】

# 基于 B/S 架构的管理信息系统 # 一、摘 要 在信息技术不断推陈出新的背景下, 针对传统人工管理学生信息方式效率低, 提出一种基于前后端分离设计的学生信息管理系统。 本设计前端部分采用基于 Bootstrap 框架设计，采用 Jquery 进行前后端数据的交互和传递，后端功能逻辑的实现采用 Python 的 Flask 框架实现，数据库采用较为轻量的 sqlite3。 本系统设计主要为对学生信息管理的增删改查，同时实现了数据合法性验证功能，操作结果提示功能，批量删除功能，数据显示分页，为登录页面添加验证码验证等相关功能，且进行了响应性设计，支持在不同设备下使用，本程序设计是在 B/S 架构下的较为简单的学生信息管理系统。 ## 1.1 关 键 词: 学生信息管理系统，flask，前后端分离，B/S 架构 # 二、ABSTRACT In the context of the continuous innovation of information technology, in view of the low efficiency of traditional manual management of student information, a student information management system based on the design of front-end and back-end separation is proposed. The front-end part of this design is designed based on Bootstrap framework, and Jquery is used for the interaction and transmission of front-end and back-end data, the realization of back-end functional logic is realized by Python’s Flask framework, and the database uses sqlite3,which is a relatively lightweight database. The system design is mainly for the addition, deletion, modification, and checking of student information management. At the same time, it realizes the data legality verification function, the operation result prompt function, the batch deletion function, the data display paging, and the verification code verification for the login page and other related functions.Responsive design is carried out to support the use of different devices. This program design is a relatively simple student information management system under the B/S architecture. Key words: student information management system,flask,front-end and back-end separation,the B/S architecture ## 2.1 实验目的 理解并掌握动态网页制作相关概念和技术，综合利用所学的 Web 技术，掌握基于 Flask 开发 B/S 架构系统的方法，做到知其然、知其所以然。 ## 2.2 实验系统分析 对于常见的学生信息系统而言，我们需要存储学生的许多相关信息，包括学生的学号、姓名、年龄、性别、籍贯、专业，这些数据要求能够按照一定的规则进行操作，同时也要对使用该系统的用户友好，便于其使用。 对于学生信息管理系统，可能需要进行的常见操作有如下几种： - 从数据库获取学生信息并展示 - 在程序中增加学生学生信息 - 删除单个或多个学生信息 - 修改已存储的某个学生的信息 - 根据条件查找学生的信息 因此，我们需要设计相关的功能，而这些功能的实现均需根据大作业的相关要求，于是我们实现在以上基础功能的前提下，在此基础上根据功能改进和优化系统，具体优化如下： - 增加数据合法性验证功能，包括客户端验证和服务端验证 - 实现操作结果显示功能，比如添加数据时提示添加成功/添加失败、删除时提示删除成功等 - 实现批量删除功能 - 实现数据显示分页功能 - 为登录页面添加验证码功能 - 适当页面美化工作 ## 2.3 实验系统设计环境 ### 2.3.1 系统环境配置 本系统设计采用的以及所需的相关环境如下： 表 3.1: 系统环境配置 | 名称 |具体信息 | |----|----| | PyCharm |2021.2.3 (Professional Edition) | | Python |版本：3.8.2 | | Flask |2.0.2 | | Flask_Sessionstore |0.4.5 | | Flask_SQLAlchemy |2.5.1 | | flask_session_captcha |1.2.0 | | Jquery |3.6.0 | | Bootstrap |3.4.1 | | toastr |2.1.4 | ### 2.3.2 系统设计简介 采用了完全前后端分离的开发模式，templates 文件夹存放页面模板，app.py 为服务器端的逻辑处理，show.js 负责在页面与服务器端之间充当代理。除登陆页面外，系统页面与后端逻辑不进行直接交互。 实验结果总览 以下是我们系统界面的一个简单的展示。 ### 2.3.3 登录界面 用户在此页面进行用户名、密码、验证码的填写，验证成功方可登陆系统。（图4.1）  图 4.1: 登录界面 ### 2.3.4 系统界面 登陆系统后，用户在本页面内进行学生信息管理，可以进行信息查找、新增、修改、删除、刷新操作，页面支持分页显示、批量删除、精确/模糊查找。（图4.2） ### 2.3.5 新增学生界面 用户点击新增按钮后，在此页面内填写学生信息，点击保存后新增学生并更新页面。（图4.3） 山东大学（威海）大作业报告  图 4.2: 系统界面  图 4.3: 新增学生信息 ### 2.3.6 修改信息界面 用户选择一个学生，点击修改按钮后，在此页面内修改学生信息，点击保存后保存修改并更新页面。（图4.4）  图 4.4: 修改学生信息 ### 2.3.7 删除学生界面 用户选择一个或多个学生，点击删除按钮后，弹出确认删除提示框，点击删除后删除学生并更新页面（也可以通过全选批量删除）。（图4.5）  图 4.5: 删除学生信息 ## 2.4 功能点展示及代码分析 ### 2.4.1 悬浮表单（模态框） 此页面悬浮于原页面之上，采用 Bootstrap+JavaScript 插件框架中的模态框 Modal 实现。（图5.1）  图 5.1: 悬浮表单展示 我们在使用 Bootstrap 框架时，首先在项目中导入源文件：（图5.2）  图 5.2: 导入源文件内容 模态框前端 HTML 页面代码（图5.3）（截取了部分）：对于（图5.3）红框之中的参数进行一些说明：  图 5.3: 前端页面代码  图 5.4: js 代码控制模态框 ```c++ class 中的.modal，用来把 <div> 的内容识别为模态框 ``` class 中的.fade当模态框被切换时，它会引起内容淡入淡出 class=”modal-header” modal-header是为模态窗口的头部定义样式的类 class=”close”，用于为模态窗口的关闭按钮设置样式 data-dismiss=”modal”，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口 aria-hidden=”true” 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上） class=”modal-body”，modal-body 是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。 随后在 show.js当中，通过（图5.4）所示代码控制模态框, 在代码中首先为模态框设置了标题，随后显示模态框。至此，模态框实现完毕。 ### 2.4.2 数据完整性验证 以新