赞
踩
第5章系统实现
一、技术路线:
开发语言:Java
前端技术:JavaScript、VUE.js(2.X)、css3
数据库:MySQL 5.7
数据库管理工具:Navicat或sqlyog
开发工具:IDEA或Ecplise
二、项目介绍:
https://www.bilibili.com/video/BV1TQ4y1h7Nt/
三、运行截图:
根据用户的需求分析设计系统的整体功能,系统实现主要介绍本系统如何实现功能的过程。
3.1登录模块的实现
系统的登录窗口是用户的入口,用户只有在登录成功后才可以进入访问。通过在登录提交表单,后台处理判断是否为合法用户,进行页面跳转,进入系统中去。
登录合法性判断过程:用户输入账号和密码后,系统首先确定输入输入数据合法性,其不能为空,然后调用数据库查找alluser表中数据,进行匹配查看此账号是否存在和密码是否正确。
在主页中切入登录窗口页面,调用设计好的CSS、JS和IMAGES等文件对页面进行整体设计,创建表单,在login.jsp页面发送登录请求,调用src下的mainctrl类的dopost方法来验证。当系统判定账号密码都正确,系统会跳转到系统的首页。
用户登录模块的IPO如下所示:
输入:用户名和密码。
处理:
1)检验用户是否满足输入的要求,即检验用户名和密码文本框是否为空,若为空,则提示用户输入用户名和密码。
2)检验是否存在用户输入的用户名,并且密码是否正确。
3)从数据库中提取记录,并储存在本地的session中(timeout默认=30min)。
4)根据用户名,将其显示在系统首页上。
5)关闭窗口。
输出:是否成功的信息。
登录流程图如下所示。
图3-1登录流程图
系统登录界面如下所示。
图3-2系统登录
用户登录的逻辑代码如下:
if(ac.equals("adminlogin"))
{
String username = request.getParameter("username");
String password = request.getParameter("pwd");
String utype = request.getParameter("cx");
String pagerandom = request.getParameter("pagerandom")==null?"":request.getParameter("pagerandom");
String random = (String)request.getSession().getAttribute("random");
if(!pagerandom.equals(random)&&request.getParameter("a")!=null)
{
request.setAttribute("random", "");
go("/login.jsp", request, response);
}
else{
String sql1 = "select * from allusers where username='"+username+"' and pwd='"+password+"' ";
List userlist1 = dao.select(sql1);
if(userlist1.size()==1)
{
request.getSession(). setAttribute("username", userlist1.get(0).get("username"));
request.getSession(). setAttribute("cx", userlist1.get(0).get("cx"));
gor("main.jsp", request, response);
}else{
request.setAttribute("error", "");
go("/login.jsp", request, response);
}
}
}
3.2.系统首页的实现
本系统的首页使用多个jsp页面组成,通过设置页面的长度和高度限制显示区域的大小,整个系统首页以图片为背景。在一个jsp页面中,使用css指定字体大小和字体类型以及其位置,垂直排列菜单栏,通过设置超链接的样式去掉下划线和鼠标移动到该选项时变颜色等等,编写javascript脚本在导航栏显示系统的当前日期,首先定义一个数组d存放周一至周日,创建一个获取时间的对象time后通过该对象的方法获取年月日,(time.getDay())%7计算得到的结果是数组的下标,通过数组下标就获取了数组的值,利用字符窜连接把年月日和星期转换成字符窜,通过document.getElementById("date")获取标签后使用innerHTML把该字符窜显示在jsp页面。利用标签包含设计好的头部和左边部分的网页。
如下图所示为系统首页界面。
图3-3系统首页
其中载入首页的主要代码如下:
返回确定要退出吗?')==true){parent.location.href='logout.html';}">
class="tuichu">退出
style="height: 100%; visibility: inherit; width: 182px;" allowtransparency="true">
3.3学生信息管理模块的实现
面对学生等数据,通过计算机化的管理这些信息,对其删除、修改,主要是在sql语句的基础上对数据库进行增删改查操作,同时能进行学生详细信息的打印和学生信息列表导出至excel表。
学生信息添加的界面如图3-4。
图3-4学生信息添加界面
学生信息管理的界面如同3-5
图3-5学生信息管理界面
3.4教师信息管理模块的实现
管理员添加教师信息是在教师信息添加的前提下操作。当页面显示查询的教师信息后,可以点击“添加课程”超级链接,既可跳转到jiaoshixinxi.jsp页添加教师信息。管理员在jiaoshixinxi_list.jsp进行教师信息管理,jiaoshixinxi_ list.jsp通过查询数据库的表列出所有教师信息管理,每条课程对应一个删除按钮和修改按钮,当管理员点击删除按钮,直接在数据库删除教师信息,并重定向当前页面,当管理员选择点击修改,则进入jiaoshixinxi_update.jsp页面,进行教师信息的修改。
教师信息添加界面设计效果如下图所示。
图3-6 教师信息添加界面
教师信息管理页面效果如下图所示。
图3-7教师信查询界面
3.5课程信息管理模块的实现
面对课程信息等数据,通过计算机化的管理这些信息,对其删除、修改,主要是在sql语句的基础上对数据库进行修删改查操作,同时能进行课程详细信息的打印和课题项目列表导出至excel表。
课程信息添加的界面如图3-8。
图3-8 课程信息添加界面
课程信息管理的界面如同3-9
图3-9课程信息查询界面
3.6学生成绩管理模块的实现
管理员在jingfei_list.jsp进行学生成绩管理,jingfei_ list.jsp通过查询数据库表列出所有学生成绩信息,每条学生成绩信息对应一个删除按钮和修改按钮,当管理员点击删除按钮,直接在数据库删除学生成绩信息,并重定向当前页面,当管理员选择点击修改,则进入jingfei_update.jsp页面,进行学生成绩信息的修改。
学生成绩查询界面设计效果如下图所示。
图3-10学生成绩查询界面
3.7考试信息管理模块的实现
管理员添加考试信息是在考试信息添加的前提下操作。当页面显示查询的考试信息后,可以点击“添加考试”超级链接,既可跳转到kaoshixinxi.jsp页添加考试信息。管理员在kaoshixinxi_list.jsp进行考试信息管理,kaoshixinxi_ list.jsp通过查询数据库的表列出所有考试信息管理,每条课程对应一个删除按钮和修改按钮,当管理员点击删除按钮,直接在数据库删除考试信息,并重定向当前页面,当管理员选择点击修改,则进入kaoshixinxi_update.jsp页面,进行考试信息的修改。
考试信息添加界面设计效果如下图所示。
图3-12考试信息添加界面
考试信息管理界面如下图所示:
图3-13考试信息管理界面
3.8通知公告管理模块的实现
面对通知公告等数据,通过计算机化的管理这些信息,对其添加、删除、修改,主要是在sql语句的基础上对数据库进行增删改查操作,同时能进行学生通知公告信息的打印和通知公告列表导出至excel表。
通知公告添加的界面如图3-14。
图3-14通知公告添加界面
通知公告管理的界面如同3-15
图3-15通知公告管理界面
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。