第5章系统实现
一、技术路线:
开发语言:Java
前端技术:JavaScript、VUE.js(2.X)、css3
数据库:MySQL 5.7
数据库管理工具:Navicat或sqlyog
开发工具:IDEA或Ecplise
二、项目介绍:
https://www.bilibili.com/video/BV11a4y1m7p7/
三、运行截图:
3.1登录模块的实现
系统的登录窗口是用户的入口,用户只有在登录成功后才可以进入访问。通过在登录提交表单,后台处理判断是否为合法用户,进行页面跳转,进入系统中去。
登录合法性判断过程:用户输入账号和密码后,系统首先确定输入输入数据合法性,其不能为空,然后调用数据库查找alluser表中数据,进行匹配查看此账号是否存在和密码是否正确。
在主页中切入登录窗口页面,调用设计好的CSS、JS和IMAGES等文件对页面进行整体设计,创建表单,在login.jsp页面发送登录请求,通过applicationContext.xmll文件来指定所要执行的DispacherServlet分发器,分发器找到控制层下的hsgloginController文件。当系统判定账号密码都正确,系统会跳转到系统的首页。
用户登录模块的IPO如下所示:
输入:用户名和密码。
处理:
1)检验用户是否满足输入的要求,即检验用户名和密码文本框是否为空,若为空,则提示用户输入用户名和密码。
2)检验是否存在用户输入的用户名,并且密码是否正确。
3)从数据库中提取记录,并储存在本地的session中(timeout默认=30min)。
4)根据用户名,将其显示在系统首页上。
5)关闭窗口。
输出:是否成功的信息。
登录流程图如下所示。

图3-1登录流程图
系统登录界面如下所示。

图3-2系统登录
用户登录的逻辑代码如下:
@RequestMapping("hsglogin.do")
public String checkAllusersLogin(Allusers allusers, HttpSession session) {
Map u=new HashMap();
System.out.println("name===" + allusers.getUsername());
u.put("username",allusers.getUsername());
//u.put("utype", "用户");
//Md3.MD5HexEncode(user.getPassword())
u.put("pwd",allusers.getPwd());
allusers = allusersService.allusersLogin(u);
if (allusers != null) {
session.setAttribute("username", allusers);
System.out.println("username=" + allusers);
session.removeAttribute("suc");
return "redirect:index.do";
} else {
System.out.println("usernafwfwwme=");
session.setAttribute("suc", "登录失败!用户名或密码错误!");
return "login";
}
3.2用户子系统模块的实现
3.2.1用户首页的实现
本系统的首页使用多个jsp页面组成,通过设置页面的长度和高度限制显示区域的大小,整个系统首页以图片为背景。在一个jsp页面中,使用css指定字体大小和字体类型以及其位置,水平排列菜单栏,通过设置超链接的样式去掉下划线和鼠标移动到该选项时变颜色等等,编写javascript脚本在导航栏显示系统的当前日期,首先定义一个数组d存放周一至周日,创建一个获取时间的对象time后通过该对象的方法获取年月日,(time.getDay())%7计算得到的结果是数组的下标,通过数组下标就获取了数组的值,利用字符窜连接把年月日和星期转换成字符窜,通过document.getElementById("date")获取标签后使用innerHTML把该字符窜显示在jsp页面。利用标签包含设计好的头部和左边部分的网页。
如下图所示为系统的首页界面。

图3-3系统首页
其中载入前台页面的主要代码如下:
3.2.2账单模块的实现
员工点击账单报销,使用getmap(id,"xinxi"),通过员工ID得到员工信息,将员工信息赋值给账单信息,添加账单则发出名为baoxiaozhangdan_add.jsp的action请求,找到BaoxiaozhangdanController控制层的addBaoxiaozhangdan()方法,然后调用业务逻辑层下的baoxiaozhangdanService类,将账单内容插入账单表中。
员工账单流程图如下所示。

图3-12员工账单流程图
员工账单界面如图所示。

图3-13员工账单
账单管理界面如图所示。

图3-14账单管理
账单添加关键代码为:
@RequestMapping("addBaoxiaozhangdan.do")
public String addBaoxiaozhangdan(HttpServletRequest request,Baoxiaozhangdanbaoxiaozhangdan,HttpSession session) throws SQLException{
Timestamp time=new Timestamp(System.currentTimeMillis());
baoxiaozhangdan.setAddtime(time.toString().substring(0, 19));
baoxiaozhangdanService.add(baoxiaozhangdan);
session.setAttribute("backxx", "添加成功");
session.setAttribute("backurl", request.getHeader("Referer"));
//session.setAttribute("backurl", "baoxiaozhangdanList.do");
return "redirect:postback.jsp";
//return "redirect:baoxiaozhangdanList.do";
}
3.3管理员子系统模块的实现
3.3.1用户管理模块的实现
用户在yhzhgl查看用户信息,先使用sql语句查询出所有用户表的数据,然后调用PageManager.getPages(url,4,sql, request ),返回一个ArrayList的对象,在for循环里,使用jsp得到每个ArrayList对象的数据,然后放入页面模板中,添加用户则将添加的用户数据封装在HashMap,中然后调用action包下Action类的insert方法将用户内容插入用户表中。
系统用户管理界面如下图所示。

图3-17系统用户管理
员工管理界面如下图所示。
图3-18员工管理
系统用户管理关键代码为:
@RequestMapping("allusersList.do")
public String goodList(@RequestParam(value="page",required=false)String page,
ModelMap map,HttpSession session,Allusers allusers, String username, String pwd, String cx){
/*if(session.getAttribute("user")==null){
return "login";
}*/
if(page==null||page.equals("")){
page="1";
}
PageBean pageBean=new PageBean(Integer.parseInt(page), 15);
Map pmap=new HashMap();
pmap.put("pageno", pageBean.getStart());
pmap.put("pageSize", 15);
Map bmap=new HashMap();
Map cmap=new HashMap();
/*pmap.put("uid", ((Users)session.getAttribute("user")).getId());
bmap.put("uid", ((Users)session.getAttribute("user")).getId());*/
if(username==null||username.equals("")){pmap.put("username", null);cmap.put("username", null);}else{pmap.put("username", username);cmap.put("username", username);}
if(pwd==null||pwd.equals("")){pmap.put("pwd", null);cmap.put("pwd", null);}else{pmap.put("pwd", pwd);cmap.put("pwd", pwd);}
if(cx==null||cx.equals("")){pmap.put("cx", null);cmap.put("cx", null);}else{pmap.put("cx", cx);cmap.put("cx", cx);}
int total=allusersService.getCount(bmap);
pageBean.setTotal(total);
List list=allusersService.getByPage(pmap);
map.put("page", pageBean);
map.put("list", list);
session.setAttribute("p", 1);
return "allusers_list";
}
3.3.2密码修改模块的实现
修改用户密码是将用户的原密码用新密码替换,用户在原密码输入正确的情况下,更新用户信息表中的密码以及确认密码字段,密码修改成功之后页面跳转到密码修改界面,下次登录使用新密码。
密码修改流程图如下所示。

图3-19密码修改流程图
密码修改关键代码为:
if(ac.equals("uppass"))
{
String olduserpass = request.getParameter("ymm");
String userpass = request.getParameter("xmm1");
String copyuserpass = request.getParameter("xmm2");
HashMap m = dao.getmaps("yonghuming",(String)request.getSession().getAttribute("username"), "yonghuzhuce");
if(!(((String)m.get("mima")).equals(olduserpass)))
{
request.setAttribute("error", "");
go("mod2.jsp", request, response);
}else{
//String id = (String)user.get("id");
String sql = "update yonghuzhuce set mima='"+userpass+"' where yonghuming='"+(String)request.getSession().getAttribute("username")+"'";
dao.commOper(sql);
request.setAttribute("suc", "");
go("mod2.jsp", request, response);
}
}
3.3.3员工管理模块的实现
用户在yuangongxinxi_list查看员工信息,先使用sql语句查询出所有员工表的数据,然后调用PageManager.getPages(url,4,sql, request ),返回一个ArrayList的对象,在for循环里,使用jsp得到每个ArrayList对象的数据,然后放入页面模板中。
用户点击添加员工则跳转至yuangongxinxi_add.jsp,添加员工则将添加的员工数据封装在HashMap,中然后调用action包下Action类的insert方法将员工内容插入员工表中。
员工管理流程图如下所示。

图3-21员工管理流程图
员工添加如下图所示:

图3-22员工添加
员工查询如下图所示:

图3-23员工查询
员工信息添加关键代码为:
@RequestMapping("addYuangongxinxi.do")
public String addYuangongxinxi(HttpServletRequest request,Yuangongxinxiyuangongxinxi,HttpSession session) throws SQLException{
Timestamp time=new Timestamp(System.currentTimeMillis());
yuangongxinxi.setAddtime(time.toString().substring(0, 19));
yuangongxinxiService.add(yuangongxinxi);
session.setAttribute("backxx", "添加成功");
session.setAttribute("backurl", request.getHeader("Referer"));
//session.setAttribute("backurl", "yuangongxinxiList.do");
return "redirect:postback.jsp";
//return "redirect:yuangongxinxiList.do";
}
3.3.4公告管理模块的实现
管理员发布新的公告信息,系统前台显示公告信息,公告信息添加功能主要指对其编号等一些基本信息的添加、删除和修改。公告查询能根据公告编号等多种条件对公告信息进行查询。
公告管理流程图如下所示。

图3-24公告管理流程图
公告添加如下图所示:

图3-25公告添加
公告查询如下图所示:

图3-26公告查询
公告信息添加关键代码为:
@RequestMapping("addHuodongxinxi.do")
public String addHuodongxinxi(HttpServletRequest request,Huodongxinxihuodongxinxi,HttpSession session) throws SQLException{
Timestamp time=new Timestamp(System.currentTimeMillis());
huodongxinxi.setAddtime(time.toString().substring(0, 19));
huodongxinxiService.add(huodongxinxi);
session.setAttribute("backxx", "添加成功");
session.setAttribute("backurl", request.getHeader("Referer"));
//session.setAttribute("backurl", "huodongxinxiList.do");
return "redirect:postback.jsp";
//return "redirect:huodongxinxiList.do";
}
本文详细描述了一个基于Java、JavaScript、VUE.js和MySQL5.7的系统实现,涉及登录验证、用户子系统(包括首页、账单和员工管理)、管理员权限(用户管理、密码修改、员工和公告管理)等功能的开发和流程。
1万+

被折叠的 条评论
为什么被折叠?



