第5章系统实现
一、技术路线:
开发语言:Java
前端技术:JavaScript、VUE.js(2.X)、css3
数据库:MySQL 5.7
数据库管理工具:Navicat或sqlyog
开发工具:IDEA或Ecplise
二、项目介绍:
https://www.bilibili.com/video/BV18H4y1q7vT/
三、运行截图:
第1章系统实现
1.1登录模块的实现
该登录模块利用js进行设计,JavaScript函数CheckSubmit()对输入框是否为空进行验证,使用js的技术结合Mysql 2012数据库的查询语句进行登录信息的验证。首先从文本框中分别获得账号user_name和密码user_pw,使用Sql语句“select * from t_user where user_name=‘”+user_name+“’ and user_pw=‘”+user_pw+“’”将查询结果赋给rs结果集,若rs.next()返回值为空,表示数据库找不到该用户数据,若rs.next()返回值不为空,则显示登录成功,进入主界面。
用户登录流程图如下所示。
图5-1用户登录流程
用户登录流程:用户只有输入正确的用户名和密码才会成功进入系统,用户输入用户名密码后点击登录按钮,系统会进行校验该用户名是否存在,如果用户名与密码不匹配或者用户名不存在,则返回主界面。
系统登录界面如下图所示。
图5-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);
}
}
}
1.2用户子系统模块的实现
1.2.1用户首页模块
在浏览器的地址栏里输入http://localhost:8080/index.jsp 地址,就可以跳转到校园快递代领系统的首页,首页是由4个页面组成的,包括top、left、down和center等页面,这里也是浏览者访问系统的入口,通过@ include引入。
首页载入流程图如下所示。
图5-3首页载入流程
首页载入流程:系统先连接数据库,显示界面参数初始化,读取数据库的数据表,读取html显示模板,对数据按添加时间排序,按照模板设计位置显示数据,刷新显示界面,断开数据库连接。
首页如下图所示。
图5-4首页界面
其中载入首页的主要代码如下。
1.2.2用户注册模块
系统的用户通过自行注册生成,在系统首页点击用户注册菜单,系统跳转到对应的注册页面。点击重置按钮,清空所填数据,点击注册按钮完成注册。
用户注册流程图如下所示。
图5-5用户注册流程
注册个人信息实现流程为:填写个人信息,系统使用JQuery选择器获取在网页中输入的注册信息,再对联系方式、登录密码等信息进行验证,验证通过后用Ajax异步请求方式向服务器发送请求并把数据传送到后台,然后验证用户名是否已存在,如果已存在则注册失败提示“用户名已存在”;如果用户表中没有该用户名则把用户信息加入数据库,把操作状态以json字符串方式返回到前台。Ajax请求成功接收到返回的数据时会触发成功回调函数,然后解析返回的json字符串,系统根据返回信息弹出提示框,注册成功后返回登录页。
用户注册界面如下图所示。
图5-6用户注册界面
用户注册页面的逻辑代码如下。
HashMap ext = new HashMap();
ext.put("issh","否");
new CommDAO().insert(request,response,"yonghuzhuce",ext,true,false,"index.jsp");
%>
1.2.3留言模块
系统使用_SESSION先判断当前是否有用户登录到系统,如果得到空值,则提示用户进行账号登录。liuyanban.jsp获取用户输入的(title,content),使用sql写入数据库中的(liuyanxinxi)表。在系统前台,未登录的游客用户只能查看留言,不能在线添加留言。管理员在系统后台回复用户的留言,在lyb_hf.jsp实现留言回复。
在线留言流程图如下所示。
图5-7在线留言流程
留言添加界面如下图所示。
图5-8留言添加界面
留言回复界面如下图所示。
图5-9留言回复界面
留言的主要代码如下。
HashMap ext = new HashMap();
ext.put("issh","否");
new CommDAO().insert(request,response,"yonghuzhuce",ext,true,false,"index.jsp");
%>
1.2.4代领订单取单模块
管理员发布代领订单后,代领订单在系统前台显示,用户浏览代领订单信息,包括订单号、发单人、价格、接收地址、取货码、手机号、物品名称、物品图片、重量,选择相应的代领订单取单,通过id传参,找到该代领订单,在qudanadd.jsp提交取单表单,生成取单记录。
代领订单取单流程如下图所示。
图5-15代领订单取单流程
代领订单取单界面如下图所示。
图5-17代领订单取单界面
代领订单取单的主要逻辑代码:
HashMap ext = new HashMap();
if(request.getParameter("f")!=null){
ext.put("issh","否");
new CommDAO().insert(request,response,"shujujilu",ext,true,false,"");
}
%>
1.3管理员子系统模块的实现
1.3.1管理员主页模块
经过用户登录后,页面跳转至首页,main.jsp,首页是由2个页面组成的,包括top、left和center等页面,通过@ include引入,系统首页主要介绍系统的基本信息,包括当前用户、当前日期、当前访问浏览器的版本、服务器的端口数、当前用户的权限、当前电脑的ip、当前电脑的操作系统名称、本系统的开发日期、系统作者、指导教师、开发日期等。其中left部分是系统菜单,本系统菜单包括1级菜单和2级菜单,使用jquery实现1级菜单展开为2级菜单。
主界面如下图所示。
图5-1主界面
1.3.2系统用户管理模块
管理员对系统用户的管理,在yhzhgl.jsp实现管理员用户的管理,包括录入、删除、修改,修改密码通过SESSION获取用户名,然后输入新密码,提交到mod.jsp中,使用sql命令更新密码。
管理员用户管理的界面如下图所示。
图5-2管理员用户管理界面
登录密码修改界面如下图所示。
图5-4登录密码修改界面
登录密码修改的逻辑代码如下。
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);
}
}
}
1.3.3代领订单管理模块
用户在dailingdingdan_add.jsp发布代领订单,跳转至代领订单添加表单,提交代领订单信息,包括订单号、发单人、价格、接收地址、取货码、手机号、物品名称、物品图片、重量等,代领订单提交后,数据库的代领订单信息表刷新数据,系统将代领订单信息展示出来。
代领订单管理的流程如所示。
图5-7代领订单管理流程
代领订单添加的界面如所示。
图5-8代领订单添加界面
代领订单管理的界面如所示。
图5-9代领订单管理界面
代领订单信息添加的逻辑代码如下。
HashMap ext = new HashMap();
if(request.getParameter("f")!=null){
ext.put("issh","否");
new CommDAO().insert(request,response,"shujujilu",ext,true,false,"");
}
%>
1.3.4代领员管理模块
代领员管理包括新增代领员、删除代领员、修改代领员、查询代领员等,以代领员新增为例,在视图层请求代领员信息新增,反馈后,调用业务逻辑层,通过业务逻辑层的接口调用底层的数据逻辑层完成数据库联动操作。
代领员管理的流程如所示。
图5-10代领员管理流程
代领员管理的界面如所示。
图5-9代领员管理界面
代领员信息添加的逻辑代码如下。
HashMap ext = new HashMap();
if(request.getParameter("f")!=null){
ext.put("issh","否");
new CommDAO().insert(request,response,"shujujilu",ext,true,false,"");
}
%>