2.5　项目总结

项目实战2　学生管理系统

教学资源

2.1　需求描述

随着计算机和其应用软件的发展及当代学生管理办公自动化的需要，学校对学生管理信息化已经越来越得到重视。实现学生信息化管理，能够提高学校管理效率、减轻学校办公人员的工作压力、进而提高工作效率。

学生信息管理系统是各大高校所不可缺少的一部分，随着计算机水平的快速提高，学生信息管理系统也在不断地发展和完善。本管理系统主要包括了公告服务和基本信息服务以及学习中心等模块从基本上实现了学生管理信息系统所必须的功能。

2.2　需求分析

分析上面的需求，可以得出项目中应该有如下页面设计。

用于对学员在校信息数据管理，该项目总共3大模块，分别是（公告服务、基本信息服务、学习中心）

1.公告服务

公告管理：添加公告，修改公告，删除公告，查询公告

2.基本信息服务

➢ 查询学生信息：新增学员信息，修改学员信息，查询学员信息

➢ 班级信息查询：查询班级，新增班级，修改编辑，删除班级

3.学习中心

➢ 课表查询：查询课表，新增课表

➢ 课表修改：修改课表

2.3　相关技术与工具

完成项目所用技术：

（1） HTML+CSS基础

设计网页基本结构和样式

（2） jQuery +EasyUI 框架使用

➢ Layout布局

➢ Form表单使用

➢ Datagrid数据表格的使用

➢ Pagination分页控件的使用

工具：

HubilderX（其他可用于Web项目开发的IDE工具）

2.4　项目实现

公司管理系统实现阶段划分见表2.1。

表2.1　阶段任务及时间

2.4.1　第一阶段

实现：登录和主页面的设计。

（1） 使用HubilderX 创建web项目，命名为“StuProject”，如图2.1所示。

图2.1

（2） 在各个文件夹中导入EasyUI 框架初始需要的css和js及需要的图片等，如图2.2所示。

图2.2

（3） 所设计的系统为学生管理系统，其页面设计应清晰的展示功能菜单与操作界面为主，再兼顾头部用于展示横幅与登录等相关操作和脚部的基本信息。故一般使用jQuery+EasyUI完成三行两列式布局，可以得到如下所示的整体布局概览：

效果如图2.3所示。

图2.3主页面

在index文件中写入以下代码如下所示。

完成登录页面效果。

2.4.2　第二阶段

实现：公告服务模块包括公告管理。

分析公告管理页面，用表格显示所有的公告数据，可以使用EasyUI 的Datagrid数据表格实现。

新建html文件，命名为：managementAnnouce.html实现公告管理页面设计，在新建文件中编写如下代码：

最终效果如图2.4所示。

图2.4　公告管理页面

2.4.3　第三阶段

实现：基本信息服务模块包括查询学生信息和班级信息查询页面。

分析学生信息查询页面和班级信息查询页面，可以用表格展示所有的调岗数据和员工信息，使用EasyUI 的Datagrid数据表格可以快速实现。

（1） 新建html文件，命名为：studentinfo.html实现查询学生信息页面设计，在新建文件中编写如下代码：

最终效果如图2.5所示。

图2.5　查询学生信息页面

（2） 新建html文件，命名为：createClass.html实现查询班级信息页面设计，在新建文件中编写如下代码：

最终效果如图2.6示。

图2.6班级信息查询页码

2.4.4　第四阶段

实现：学习中心包括课表查询页码设计

分析课表查询页面，用表格展示所有课表详情信息，使用EasyUI 的Datagrid数据表格可以实现。

新建html文件，命名为：curriculumInfo.html实现课表查询页面设计，在新建文件中编写如下代码：

最终效果如图2.7所示。

图2.7课表查询页面

2.5　项目总结

同学们经过一段时间的学生信息管理系统的设计，在这次网页设计中锻炼了自我动手能力，增强了操作能力和页面设计能力。在本次的课程设计中，在学生基本信息管理系统分析与设计的基础上对系统设计有了更深刻的了解，也有了更强的巩固和加深了对HubilderX 软件的应用能力，对EasyUI框架的熟悉度。经过多页面设计，该系统能够完成班级，学生信息的相关管理。