目录
3，在ExpressController中编写处理列表请求的方法
2，在ExpressController中添加insert方法处理express/insert.do请求
完整项目在这里实时更新<(￣︶￣)↗[GO!]：GitHub - GoodbyeFirefly/ExpressManagementSystem: 用GitHub一步步记录编码过程，实现一个相对完整的快递管理项目
一，分页列表
1，设计bootstrap-table可识别的格式
ResultData
package com.xxy.bean;
import java.util.ArrayList;
import java.util.List;
public class ResultData<T> {
// 每次查询的数据集合
private List<T> rows = new ArrayList<>();
// 总数量
private int total;
public List<T> getRows() {
return rows;
}
public void setRows(List<T> rows) {
this.rows = rows;
}
public int getTotal() {
return total;
}
public void setTotal(int total) {
this.total = total;
}
}
2，调整日期在控制台的显示格式
需要将Express实体类中Timestamp类型的inTime和outTime修改为yyyy-MM-dd HH:mm:ss格式。
新建BootstrapTableExpress实体类， 在获取到express列表后，将其逐个转换为BootstrapTableExpress对象
package com.xxy.bean;
import java.sql.Timestamp;
public class BootsrapTableExpress {
private int id;
private String number;
private String username;
private String userphone;
private String company;
private String code;
private String intime;
private String outtime;
private String status;
public BootsrapTableExpress() {
}
private String sysPhone;
public BootsrapTableExpress(int id, String number, String username, String userphone, String company, String code, String intime, String outtime, String status, String sysPhone) {
this.id = id;
this.number = number;
this.username = username;
this.userphone = userphone;
this.company = company;
this.code = code;
this.intime = intime;
this.outtime = outtime;
this.status = status;
this.sysPhone = sysPhone;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getNumber() {
return number;
}
public void setNumber(String number) {
this.number = number;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getUserphone() {
return userphone;
}
public void setUserphone(String userphone) {
this.userphone = userphone;
}
public String getCompany() {
return company;
}
public void setCompany(String company) {
this.company = company;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getIntime() {
return intime;
}
public void setIntime(String intime) {
this.intime = intime;
}
public String getOuttime() {
return outtime;
}
public void setOuttime(String outtime) {
this.outtime = outtime;
}
public String getStatus() {
return status;
}
public void setStatus(String status) {
this.status = status;
}
public String getSysPhone() {
return sysPhone;
}
public void setSysPhone(String sysPhone) {
this.sysPhone = sysPhone;
}
}
3，在ExpressController中编写处理列表请求的方法
@ResponseBody("/express/list.do")
public String list(HttpServletRequest req, HttpServletResponse resp) {
// 1，获取查询数据的起始索引值
int offset = Integer.parseInt(req.getParameter("offset"));
// 2，获取当前页要查询的数据量
int pageNumber = Integer.parseInt(req.getParameter("pageNumber"));
// 3，进行查询
List<Express> list = ExpressService.findAll(true, offset, pageNumber);
List<BootsrapTableExpress> list2 = new ArrayList<>();
for (Express e : list) {
String inTime = DateFormatUtil.format(e.getIntime());
String outTime = e.getOuttime() == null ? "未出库" : DateFormatUtil.format(e.getOuttime());
String status = e.getStatus() == 0 ? "待取件" : "已取件";
String code = e.getCode() == null ? "已取件" : e.getCode();
list2.add(new BootsrapTableExpress(e.getId(), e.getNumber(), e.getUsername(), e.getUserphone(), e.getCompany(), code, inTime, outTime, status, e.getSysPhone()));
}
List<Map<String, Integer>> console = ExpressService.console();
Integer total = console.get(0).get("data1_size");
// 4，将集合封装为bootstrap-table识别的格式(用于前后端分离)
ResultData<BootsrapTableExpress> data = new ResultData<>();
data.setRows(list2);
data.setTotal(total);
String json = JSONUtil.toJSON(data);
return json;
}4，修改list.html内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
<link rel="stylesheet" type="text/css" href="../../css/list.css"/>
<!--从cdn中引入资源，适用于有网络的条件，也可以提前下载，自行引入-->
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<table id="express_list"></table>
<script>
$(function () {
$("#express_list").bootstrapTable({
url:"/express/list.do", // 数据地址
striped:true, // 是否显示行的间隔
pageNumber:1, // 初始化加载第几页
pagination:true, // 是否分页
sidePagination:'server', // 分页方式，分为服务器分页和前端分页
pageSize:5,
pageList:[5,10,20],
showRefresh:true, // 是否提供刷新功能
queryParams:function (params) {
var temp = {
offset:params.offset,
pageNumber:params.limit
};
return temp;
},
columns:[
{
title:"编号",
field:"id",
sortable:false // 选择前端分页才能使用排序功能
},
{
title:"单号",
field:"number",
sortable:false
},
{
title:"姓名",
field:"username",
sortable:false
},
{
title:"电话",
field:"userphone", // 注意与自己定义的字段名是否一致（大小写）
sortable:false
},
{
title:"快递公司",
field:"company",
sortable:false
},
{
title:"取件码",
field:"code",
sortable:false
},
{
title:"入库时间",
field:"intime",
sortable:false
},
{
title:"出库时间",
field:"outtime",
sortable:false
},
{
title:"状态",
field:"status",
sortable:false
},
{
title:"录入人电话",
field:"sysPhone",
sortable:false
}
]
});
});
</script>
</body>
</html>
5，运行效果
关于快件取出后的取件码存在问题：数据库中该字段设计为unique保证取件码不重复，然而当取出快递后，取件码置空，当有多个快递取出时便会出错，因为null == null。但是不置空的话，可用的6位数取件码将越来越少。
暂时没有好的解决思路，这里先记一下。
二，快递录入
1，修改add.html
为表单添加id；
引入jQuery、layer；
通过js为表单添加提交方法，获取页面提供的参数、打包参数向后台传递、接收后台返回的数据；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="../../assets/css/layui.css">
<link rel="stylesheet" href="../../assets/css/view.css"/>
<title></title>
</head>
<body class="layui-view-body">
<div class="layui-content">
<div class="layui-row">
<div class="layui-card">
<div class="layui-card-header">录入快件</div>
<form id="form" class="layui-form layui-card-body" onsubmit="">
<div class="layui-form-item">
<label class="layui-form-label">单号</label>
<div class="layui-input-block">
<input type="text" name="code" required lay-verify="required" placeholder="请输入快递单号" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">快递公司</label>
<div class="layui-input-block">
<select name="company" lay-verify="" lay-search>
<option >安能快递</option><option >安能物流</option><option >澳大利亚邮政</option><option >阿根廷邮政</option><option >爱沙尼亚邮政</option><option >阿联酋邮政</option><option >奥地利邮政</option><option >阿尔巴尼亚邮政</option><option >Aramex</option><option >巴西邮政</option><option >比利时邮政</option><option >百世快运</option><option >波兰邮政</option><option >白俄罗斯邮政</option><option >保加利亚邮政</option><option >巴基斯坦邮政</option><option >百福东方</option><option >包裹信件</option><option >晟邦物流</option><option >城市100</option><option >City-Link</option><option >COE</option><option >传喜物流</option><option >德邦快递</option><option >大田物流</option><option >递四方</option><option >DHL德国</option><option >DHL全球</option><option >DHL中国</option><option >EMS</option><option >EMS国际</option><option >EMS经济快递</option><option >FedEx中国</option><option >FedEx国际</option><option >FedEx美国</option><option >飞豹快递</option><option >凡宇快递</option><option >飞远配送</option><option >飞远(爱彼西)</option><option >法国邮政</option><option >芬兰邮政</option><option >国通快递</option><option >postco</option><option >百世快递</option><option >恒路物流</option><option >黄马甲配送</option><option >黑猫宅急便</option><option >华企快运</option><option >韩国邮政</option><option >佳吉快运</option><option >京东快递</option><option >佳怡物流</option><option "jinguangsudikuaijian">京广速递</option><option >日本邮政</option><option >筋斗云物流</option><option >捷克邮政</option><option >嘉里大通</option><option >加运美</option><option >快捷快递</option><option >跨越速运</option><option >克罗地亚邮政</option><option >联昊通</option><option >龙邦速递</option><option >黎巴嫩邮政</option><option >民航快递</option><option >秘鲁邮政</option><option >毛里求斯邮政</option><option >马耳他邮政</option><option >摩尔多瓦邮政</option><option >马其顿邮政</option><option >民邦快递</option><option "szml56">明亮物流</option><option >挪威邮政</option><option >南非邮政</option><option >OnTrac</option><option >葡萄牙邮政</option><option >全峰快递</option><option >全一快递</option><option >如风达</option><option >申通快递</option><option selected="selected">顺丰速运</option><option >速尔快递</option><option >盛丰物流</option><option >圣安物流</option><option >盛辉物流</option><option >瑞士邮政</option><option >苏宁快递</option><option >斯洛伐克邮政</option><option >沙特邮政</option><option >斯洛文尼亚邮政</option><option >塞尔维亚邮政</option><option >天天快递</option><option >天地华宇</option><option >土耳其邮政</option><option >泰国邮政</option><option >TNT</option><option >UPS</option><option >USPS</option><option >万象物流</option><option >乌克兰邮政</option><option >万家物流</option><option >信丰物流</option><option >新邦物流</option><option >西班牙邮政</option><option >匈牙利邮政</option><option >圆通速递</option><option >韵达快递</option><option >优速物流</option><option >银捷速递</option><option >远成物流</option><option >运通中港快递</option><option >邮政国内小包</option><option >英国皇家邮政</option><option >意大利邮政</option><option >印度邮政</option><option >亚美尼亚邮政</option><option >越丰物流</option><option >亚风速递</option><option >邮政国际包裹</option><option >中通快递</option><option >宅急送</option><option >中铁物流</option><option >增益速递</option><option >中铁快运</option><option >芝麻开门</option><option >中国邮政</option><option >智利邮政</option><option >中速快递</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">收件人姓名</label>
<div class="layui-input-block">
<input type="text" name="username" required lay-verify="required" placeholder="请输入收货人姓名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">手机号码</label>
<div class="layui-input-block">
<input type="text" name="phonenumber" required lay-verify="required" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn layui-btn-blue" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="../../assets/layui.all.js"></script>
<script src="/js/jquery2.1.4.js"></script>
<script src="/layer/layer.js"></script>
<script>
var form = layui.form
,layer = layui.layer;
</script>
<script>
$(function () {
$("#form").submit(function () {
var windowId = layer.load();
var number = $("input:eq(0)").val();
var company = $("input:eq(1)").val();
var username = $("input:eq(2)").val();
var userphone = $("input:eq(3)").val();
$.post("/express/insert.do", {
number:number,
company:company,
username:username,
userphone:userphone
}, function (data) {
layer.close(windowId);
layer.msg(data.result);
if (data.status == 0) {
// 设置默认值
$("input").val("");
$("input:eq(1)").val("顺丰速运");
}
});
return false;// 不跳转页面
});
});
</script>
</body>
</html>2，在ExpressController中添加insert方法处理express/insert.do请求
@ResponseBody("/express/insert.do")
public String insert (HttpServletRequest req, HttpServletResponse resp) {
String number = req.getParameter("number");
String company = req.getParameter("company");
String username = req.getParameter("username");
String userphone = req.getParameter("userphone");
// 若没有对应的构造方法，可以重新创建一个
Express e = new Express(number, username, userphone, company, UserUtil.getUserphone(req.getSession()));
boolean flag = ExpressService.insert(e);
Message msg = new Message();
if (flag) {
msg.setStatus(0);
msg.setResult("录入成功！");
} else {
// 录入失败只可能是快递单号number重复，与其他三个参数基本无关
msg.setStatus(-1);
msg.setResult("录入失败！");
}
String json = JSONUtil.toJSON(msg);
return json;
}创建UserUtil工具提供录入人信息
package com.xxy.util;
import javax.servlet.http.HttpSession;
public class UserUtil {
public static String getUsername(HttpSession session) {
return "";
}
public static String getUserphone(HttpSession session) {
// 还未存储录入人的信息，这里先暂时代替一下
return "18888888888";
}
}
三，修改和删除
1，修改update.html、delete.html
引入jQuery、layer；
为指定的html组件添加id、value等属性；
编写脚本，提供快件查询、快件修改/删除功能；
（编写过程中需要完善后台的地方，再转回去完善。里面的逻辑也有点复杂，已经尽量做好备注）
update.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
<link rel="stylesheet" type="text/css" href="../../css/add.css"/>
</head>
<body>
<div id="app">
<div class="header">
<span>修改快递信息</span>
</div>
<div class="content">
<table>
<tr>
<td class="text-right">运单号</td><td class="content_right"><input class="input inline-input" id="number" placeholder="请输入运单号码"> <span class="btn btn-info" id="find">立即查找</span></td>
</tr>
</table>
</div>
<div class="header">
<span>查找信息如下</span>
</div>
<div class="content">
<table>
<tr>
<td class="text-right">快递单号</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="text-right">快递公司</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="text-right">收货人姓名</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="text-right">手机号码</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="text-right">快递状态</td><td class="content_right"><input type="radio" name="status" class="status" value="1">已签收 <input name="status" type="radio" class="status" value="0">未签收</td>
</tr>
<tr>
<td></td><td class="content_right"><span class="btn btn-info" id="update">立即修改</span> <span class="btn">重置</span> </td>
</tr>
</table>
</div>
</div>
</body>
<script src="/js/jquery2.1.4.js"></script>
<script src="/layer/layer.js"></script>
<script>
$(".header:eq(1), .content:eq(1)").hide();
var expressId = null;// 后面可能修改单号，但是id不会该，所以在这里进行标记
var g_userPhone = null;
$(function () {
$("#find").click(function () {
var windowId = layer.load();
var number = $("#number").val();
$.getJSON("/express/find.do", {number:number}, function (data) {
layer.close(windowId);
layer.msg(data.result);
if (data.status == 0) {
$(".header:eq(1), .content:eq(1)").fadeIn(1000);
expressId = data.data.id;
g_userPhone = data.data.userphone;
$("input:eq(1)").val(data.data.number);
$("input:eq(2)").val(data.data.company);
$("input:eq(3)").val(data.data.username);
$("input:eq(4)").val(data.data.userphone);
if (data.data.status == 0) {
// 未签收
$(".status:eq(1)").prop("checked", true);
} else {
// 已签收
$(".status:eq(0)").prop("checked", true);
}
}
})
});
});
$("#update").click(function () {
var windowId = layer.load();
var number = $("input:eq(1)").val();
var company = $("input:eq(2)").val();
var username = $("input:eq(3)").val();
var userphone = $("input:eq(4)").val();
var status = $(".status:checked").val();
// 后面检测修改时，判断userPhone是否为空来决定是否重发短信，但是查到手机号后就不可能为空
// 所以这里判断修改时手机号与查找时手机号不同时，表示手机号修改，将该字段赋值
var express = {
id:expressId,
number:number,
company:company,
username:username,
status:status
}
if (userphone != g_userPhone) {
express.userphone = userphone;
}
$.getJSON("/express/update.do", express, function (data) {
layer.close(windowId);
layer.msg(data.result);
if (data.status == 0) {
$(".header:eq(1), .content:eq(1)").hide();
}
})
});
</script>
</html>
delete.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
<link rel="stylesheet" type="text/css" href="../../css/add.css"/>
</head>
<body>
<div id="app">
<div class="header">
<span>删除快递信息</span>
</div>
<div class="content">
<table>
<tr>
<td class="text-right">运单号</td><td class="content_right"><input class="input inline-input" id="number" placeholder="请输入运单号码"> <span id="find" class="btn btn-info">立即查找</span></td>
</tr>
</table>
</div>
<div class="header">
<span>查找信息如下</span>
</div>
<div class="content">
<table>
<tr>
<td class="text-right">快递单号</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="text-right">快递公司</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="text-right">收货人姓名</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="text-right">手机号码</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="text-right">快递状态</td><td id="status" class="content_right"><input type="radio" name="status">已签收 <input name="status" type="radio">未签收</td>
</tr>
<tr>
<td></td><td class="content_right"><span class="btn btn-info" id="delete">立即删除</span> </td>
</tr>
</table>
</div>
</div>
</body>
<script src="/js/jquery2.1.4.js"></script>
<script src="/layer/layer.js"></script>
<script>
$(".header:eq(1), .content:eq(1)").hide();
var expressId = null;
$(function () {
$("#find").click(function () {
var windowId = layer.load();
var number = $("#number").val();
$.getJSON("/express/find.do", {number:number}, function (data) {
layer.close(windowId);
layer.msg(data.result);
if (data.status == 0) {
$(".header:eq(1), .content:eq(1)").fadeIn(1000);
expressId = data.data.id;
$("input:eq(1)").val(data.data.number);
$("input:eq(2)").val(data.data.company);
$("input:eq(3)").val(data.data.username);
$("input:eq(4)").val(data.data.userphone);
$("input:eq(1),input:eq(2),input:eq(3),input:eq(4)").prop("disabled", true);
if (data.data.status == 0) {
// 未签收
$("#status").html("未签收");
} else {
// 已签收
$("#status").html("已签收");
}
}
})
});
});
$("#delete").click(function(){
var windowId = layer.load();
$.getJSON("/express/delete.do",{id:expressId},function(data){
layer.close(windowId);
layer.msg(data.result);
if(data.status == 0){
$(".header:eq(1),.content:eq(1)").hide();
}
});
});
</script>
</html>
2，ExpressController中添加方法
新增三个处理请求的方法
@ResponseBody("/express/find.do")
public String find(HttpServletRequest req, HttpServletResponse resp) {
String number = req.getParameter("number");
Express e = ExpressService.findByNumber(number);
Message msg = new Message();
if (e == null) {
msg.setStatus(-1);
msg.setResult("单号不存在");
} else {
msg.setStatus(0);
msg.setResult("查找成功");
msg.setData(e);
}
String json = JSONUtil.toJSON(msg);
return json;
}
@ResponseBody("/express/update.do")
public String update(HttpServletRequest req, HttpServletResponse resp) {
int id = Integer.parseInt(req.getParameter("id"));
String number = req.getParameter("number");
String company = req.getParameter("company");
String username = req.getParameter("username");
String userphone = req.getParameter("userphone");
int status = Integer.parseInt(req.getParameter("status"));
Express e = new Express();
e.setNumber(number);
e.setCompany(company);
e.setUsername(username);
e.setUserphone(userphone);
e.setStatus(status);
boolean update = ExpressService.update(id, e);
Message msg = new Message();
if (update) {
msg.setStatus(0);
msg.setResult("修改成功");
} else {
msg.setStatus(-1);
msg.setResult("修改失败");
}
String json = JSONUtil.toJSON(msg);
return json;
}
@ResponseBody("/express/delete.do")
public String delete(HttpServletRequest request,HttpServletResponse response){
int id = Integer.parseInt(request.getParameter("id"));
boolean flag = ExpressService.delete(id);
Message msg = new Message();
if(flag){
msg.setStatus(0);
msg.setResult("删除成功");
}else{
msg.setStatus(-1);
msg.setResult("删除失败");
}
String json = JSONUtil.toJSON(msg);
return json;
}章节汇总在这里（づ￣3￣）づ╭❤～@&再见萤火虫&【07-项目训练】
对学习Java感兴趣的同学欢迎加入QQ学习交流群：1126298731
有问题欢迎提问，大家一起在学习Java的路上打怪升级！(o゜▽゜)o☆[BINGO!]
扫一扫
1236
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
