《WEB架构及其应用开发》大二下学期课程设计论文.docx

广州商学院课 程 论 文题目：学生信息管理系统课 程 名 称 WEB架构及其应用开发 考 查 学 期 2015/2016学年 第 2 学期 考 查 方 式 课程论文 姓 名 梁植淋 学 号 201406114142 专 业 商业软件工程 成 绩 指 导 教 师 邹锋 一、 简介1. 本学生信息管理系统主要面向的使用者为学校内的管理人员，如辅导员、老师等，实现了简单便利且清晰有条理的学生管理功能。以学生信息管理为核心的一系列功能也较为完善，主要功能包括：用户管理。学生管理。奖励管理。处罚管理等。2. 本学生信息管理系统采用的主要架构模式为：Maven3.3.9 +Struts2.5 + Hibeernate4.1 +Spring4.2.6+Bootstrap3。都为目前市场上较为流行的框架版本，大大提高了本系统的性能及用户体验效果。3. 在本学生信息管理系统中，SSH框架的运用均采用注解方式，从而减少了各种xml配置文件的使用，几乎实现了“零配置”的概念，大大提高了开发效率，并且降低了项目的耦合性。4. 在本学生信息管理系统中，通过bootstrap等前端框架模板组件，实现了对传统弹框、特效、样式的优化，满足了美观且人性化的需求，很大程度上提高了用户体验效果。二、 功能说明1. 登录(图2.1.1) 如图2-1-1所示，登录界面的背景设计为一张广州商学院落日的照片，登录框的输入栏除账号密码外，还有验证码输入，旨在降低非法登录的可能，提高系统的安全性。 (图2.1.2)如图2-1-2所示，登录界面在验证码及账号密码输错时会弹出不同的提示框，目的是美化界面，提高用户体验。2. 学生管理 界面(图2.2.1)如图2-2-1所示，学生管理模块界面从上而下分为：导航条、添删改按钮、学生信息表格、上下页信息、尾部文字说明。 添加学生信息(图2.2.2) 如图图2-2-2所示，点击【添加】按钮时，会弹出一个表单弹框，按提示输入相应信息后点击该弹框内的【添加】按钮，即可实现对数据库添加一条学生信息的数据，并提示“添加成功”。 修改学生信息 (图2.2.3) 在学生信息管理页面，选择一条欲修改的数据，在其前面的选择框打钩，并点击【修改】按钮，即可弹出如图2-2-3的弹框，该弹框的表单会显示原来数据的信息，只需在原来的基础上修改并保存即可。 删除 本系统支持多条数据删除功能，只需在想要删除的数据前的多选框打钩，点击删除按钮，提示“删除成功”即可。 详细信息 由于表格能显示的数据有限，所以并不能显示学生的所有信息，欲要查看某学生的所有信息条目，只需点击该数据最右边的【详细信息】，即可在弹出的弹框中看到完整的学生信息。如图图2-2-4所示。(图2.2.4)3. 用户管理、奖励管理、惩罚管理这三个管理模块功能与学生管理功能类似，只是操作的对象及数据库表不同，这里就不再列举了。三、 功能实现1.登录(图3.1.1)首先，在jsp页面上通过js代码拿到用户提交的账号密码，并通过异步请求及struts2的注解机制找到相应的action类及方法，并把用户输入的账号密码提交到action类中。(图3.1.2)然后，在action中调用相应的service类中的方法，查询数据库用户表中有没有账号密码都符合的用户信息，若有，则把用户对象放到session中，以记录当前用户的登录状态。 最后，action类中通过response对象把用户匹配成功的结果返回到jsp页面中，jsp页面中的通过js代码跳转到学生管理的初始化数据的aciton中获取一页学生信息，并跳转到学生管理页面显示出来。致此，登录功能完成。2.学生管理页面初始化 (图3.2.1)首先，访问名为stumange的action方法，在其中先查看session中是否已有登录用户记录，没有则是还没登录，跳转到提示未登录页面，若在session中查询到登录用户记录，则已经登录，此时将会通过Dao层查询一页（10）条数据出来，返回到jsp页面，并通过struts标签迭代出来，jsp迭代代码如下图所示： (图3.2.2)3.添加学生信息通过js方法触发弹出添加学生信息的模态框，在点击模态框中的添加时，把表单的填写信息提交到名为addStudent的action中（代码如下图），调用Dao层的DBhelper类中的add方法，从而实现数据的插入。并把成功插入的结果返回到jsp页面中，弹出“成功插入”的提示。4.修改学生信息 (图4.1.1)该功能主要分为两步实现，第一步先通过action及service及Dao层查询将要被修改的学生数据，返回到jsp中，并在弹出的模态框中显示出来（效果如上图所示）。第二步在修改了数据后，点击【更新】，会通过js方法触发异步请求（代码如下图所示），把表单信息提交到名为updateStudent的action中，并在其中调用StudentManageService 类中的update 方法，实现对数据的更改，并将修改成功的结果返回到jsp页面，弹出修改成功的提示。 (图4.1.2)5.查看学生信息详情 (图5.1.1)如上图代码所示，先通过js方法拿到所点击的数据的id，通过js方法触发异步请求去action层，在action层调用service中的业务方法，在这个业务方法中再调用Dao层方法查询该id的数据，逐级返回到jsp页面中，再弹出的模态框中把数据信息显示出来。6.分页 (图6.1.1)当点击上一页或者下一页时，先触发相应的js方法（如上图所示），判断当前页面还能不能上一页/下一页，如果能，再通过struts2注解机制，访问相应的action方法（代码如下图所示），action中通过jsp请求提交过来的当前页数，去数据库中统计当前总行数，计算出总页数，并查询上一页/下一页的相应数据，通过list集合的形式返回给页面，然后在js方法中调用刷新页面的方法，即可刷新页面，显示最新页面的数据，从而实现分页及换页功能。(图6.1.2)7.判断是否已登录 (图7.1)理论上，没登录的时候是不能进行任何管理操作。由于在登录成功时会把用户对象放进session中（方法如上图），所以在每次页面跳转前，都会先看session域中有没有用户对象，如果没有，跳转到提示未登录的jsp页面（action中实现代码如下图）,如果有，则继续下一步操作。 (图7.2)8.注销登录 (图8.1) 由于功能较为简单，无需建一个新的action类，这里采用servlet来实现，首先在web.xml中配置好相应的servlet（代码如上图所示），在该servlet中清除session中的用户对象，并跳转到登录页面即可（servlet代码如下图所示）。 (图8.2)9.用户管理、奖励管理、处罚管理 这三个管理模块的功能实现类似与学生信息管理，这里不作一一列举，详情请参考前面学生信息管理相关内容。10.一对多关系映射 (图10.1)本系统中有些地方需要用到一对多关系映射，下面以学生与部门的关系为例。因为学生与部门之间存在一对多的关系，所以需要在学生的实体类中需要有部门实体类的对象属性及其setter、getter方法（如上图所示），用注解指定其一对多的主外键关系，并开启级联级别为所有，这样在每次查询学生信息时，就会同时查询出其对应的部门信息，实现代码如下图所示：11.对Dao层（数据访问层）的封装 (图11.1) 本学生信息管理系统对Dao层进行了封装，编写了通用Dao层方法HbHelper通过对泛型方法的使用，实现了Dao层方法的通用。Dao层中具有通用的添加、删除、修改、分页等方法，还具有事务管理、回滚、空值判断等方法。调用时只需赋予类名等参数即可完成相应的数据访问操作，也就是说后期无论要对哪个实体类对象、张数据库表进行操作，只需调用HbHelper类中的相应方法，并赋予相应参数即可，避免了每个实体类建立一个Dao层类的繁琐操作，大大提高了开发效率也便于管理维护。以分页查询学生信息为例，首先找到HbHelper类中的add方法，方法代码如下所示/* * 新增数据 */public static boolean addDate(Object entity) boolean result = false;Transaction ts = null;Session session = null;try session = openSession();ts = beginTransaction(session);session.save(entity);commitTransaction(ts);result = true; catch (Exception e) if (ts != null) / 事务回滚ts.rollback(); finally closeSession(session);return result; (图11.2)然后，在学生的service实现类中调用此方法，把学生实体类名、开始数据索引号、每页显示条数这三个信息作为参数（代码如下图所示），即可获得方法返回的学生实体对象的一个List集合，再将这个集合返回到Jsp视图页面，遍历出来即可显示。public List<Student> findPage(String className, int firstIdex, int resultSize) List<Student> students = HbHelper.findByPage("Student", firstIdex, resultSize);return students; (图11.3)四、 项目目录结构 (图13.1) (图13.2) (图13.3)五、 项目部署1. 安装Maven及jdk,并配置其环境变量。2. 在myeclipse上配置好maven相应配置,指定其本地jar包库路径。（以上两点可参考百度经验）3. 在myeclipse上导入本项目文件，等待自动加载依赖jar包到本地仓库中。4. 在Mysql中执行studentmanage.sql数据库脚本文件，完成数据库的导入。5. 在src/main/resource目录下的connection.properties配置文件中把数据库连接信息中的账号密码改成本地的账号密码，如下图所示： (图14.1)6.把项目部署到tomcat中，启动项目，在浏览器输入地址：http:/localhost:8080/StudentManagementSystem 即可跳转到登录页面，数据库中提供的一个用户账号为：admin,密码为：123456，当然，这个用户账号可在登录后进行添加和修改。六、数据库简要说明 具体数据表的表名及字段如下： (表15.1)表名含义t_user用户信息表t_student学生信息表t_reward奖励详细信息表t_punishment惩罚详细信息表t_grade成绩表t_course课程表t_department系部班级表七、 项目运行的流程及生命周期本系统项目的生命周期遵循常规SSH框架模式的运行机制，用得最多的一个调用流程机制如下图所示：Web.xml（action的识别格式为*.action）Action(多例的，每次访问action都会自动new一个新的对象)Sevice、Service.impl(服务层)hbHelper(封装好的Dao层，里面是一些通用的数据库操作方法)返回结果Jsp视图页面调用服务 (图15.2)八、总结本学生管理系统以实践为目的，整合了SSH框架，还用到了验证码生成插件、Bootstrap组件及样式等，尽可能地用上了学到的东西，达到学以致用的效果，也实现了对本学期WEB架构及其应用开发的学习成果检验。当然，在开发此系统过程中也遇到了很多难题，与一对多、多对一关系映射的运用，SSH框架的整合，通过注解达到“零配置”的实现等，都遇到了较难的问题，但在一次次的调试后，总算做出了一个较为完整的版本，达到了检验学习成果之余还获得了很多宝贵的经验，感谢课程老师一年来的悉心教导！课程论文成绩评定表指导老师评语：（评语50字左右，对论文选题、资料收集与处理、论证水平、写作能力和规范等进行评定。）成绩评定： 指导教师签名：邹锋2016年 7月2日