目錄
一,分頁清單
1,設計bootstrap-table可識别的格式
2,調整日期在控制台的顯示格式
3,在ExpressController中編寫處理清單請求的方法
4,修改list.html内容
5,運作效果
二,快遞錄入
1,修改add.html
2,在ExpressController中添加insert方法處理express/insert.do請求
三,修改和删除
1,修改update.html、delete.html
2,ExpressController中添加方法
完整項目在這裡實時更新<( ̄︶ ̄)↗[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/[email protected]/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/[email protected]/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;
}