本文承接 JavaWeb综合项目——快递e栈（后台部分）一文。
1.1 申请新的短信模板
在短信工具类SMSUtil中添加用于登录的方法，和send方法相比，只是变了模板码：
public static boolean loginSMS(String phoneNumber,String code) {
DefaultProfile profile = DefaultProfile.getProfile("cn-hangzhou", "LTAI4GKsiFzUmLZ8Qnx1Sfza", "jUhIqqk3wwvhm2T1HOUVbCmIOWNE0O");
IAcsClient client = new DefaultAcsClient(profile);
CommonRequest request = new CommonRequest();
request.setSysMethod(MethodType.POST);
request.setSysDomain("dysmsapi.aliyuncs.com");
request.setSysVersion("2017-05-25");
request.setSysAction("SendSms");
request.putQueryParameter("RegionId", "cn-hangzhou");
request.putQueryParameter("PhoneNumbers", phoneNumber);
request.putQueryParameter("SignName", "快递e栈");
request.putQueryParameter("TemplateCode", "SMS_204295076");
request.putQueryParameter("TemplateParam", "{\"code\":\""+ code +"\"}");
try {
CommonResponse response = client.getCommonResponse(request);
System.out.println(response.getData());
String json = response.getData();
Gson g = new Gson();
HashMap result = g.fromJson(json, HashMap.class);
if("OK".equals(result.get("Message"))) {
return true;
}else{
System.out.println("短信发送失败，原因："+result.get("Message"));
}
} catch (ServerException e) {
e.printStackTrace();
} catch (ClientException e) {
e.printStackTrace();
}
return false;
}1.2 短信登录，退出登录
在UserUtil中定义一些登录退出可能会用到的方法：
/** * 获取登录验证码 * @param session * @param userPhone * @return */
public static String getLoginSms(HttpSession session, String userPhone){
return (String) session.getAttribute(userPhone);
}
/** * 设置登录验证码 * @param session * @param userPhone * @param code */
public static void setLoginSms(HttpSession session, String userPhone, String code){
session.setAttribute(userPhone, code);
}
/** * 方法重载，当前登录的可能是用户也可能是快递员 * @param session * @param user */
public static void setWxUser(HttpSession session, User user){
session.setAttribute("wxUser", user);
}
public static void setWxUser(HttpSession session, Courier courier){
session.setAttribute("wxUser", courier);
}
/** * 获取当前登录的用户or快递员 * @param session * @return */
public static Object getWxUser(HttpSession session){
return session.getAttribute("wxUser");
}新建wx包，创建UserController类，用于控制微信端的用户和快递员：
package com.wangjiawei.wx;
import com.wangjiawei.bean.Courier;
import com.wangjiawei.bean.Message;
import com.wangjiawei.bean.User;
import com.wangjiawei.mvc.ResponseBody;
import com.wangjiawei.service.CourierService;
import com.wangjiawei.service.UserService;
import com.wangjiawei.util.JSONUtil;
import com.wangjiawei.util.RandomUtil;
import com.wangjiawei.util.SMSUtil;
import com.wangjiawei.util.UserUtil;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/** * 2 * @Author: 小王同学 * 3 * @Date: 2020/10/9 18:51 * 4 */
public class UserController {
@ResponseBody("/wx/loginSms.do")
public String sendSms(HttpServletRequest request, HttpServletResponse response){
String userPhone = request.getParameter("userPhone");
// TODO:为了调试的时候不浪费钱，先把这两行注释了
// String code = RandomUtil.getCode() + "";
// boolean flag = SMSUtil.loginSMS(userPhone, code);
String code = "111111";
boolean flag = true;
Message msg = new Message();
if (flag){
// 短信发送成功
msg.setStatus(0);
msg.setResult("验证码已发送，请查收！");
}else {
// 短信发送失败
msg.setStatus(-1);
msg.setResult("验证码发送失败，请检查手机号或稍后再试");
}
UserUtil.setLoginSms(request.getSession(), userPhone, code);
String json = JSONUtil.toJSON(msg);
return json;
}
@ResponseBody("/wx/login.do")
public String login(HttpServletRequest request, HttpServletResponse response){
String userPhone = request.getParameter("userPhone");
String userCode = request.getParameter("code");
String sysCode = UserUtil.getLoginSms(request.getSession(), userPhone);
Message msg = new Message();
if (sysCode == null){
msg.setStatus(-1);
msg.setResult("手机号码未获取短信");
}else if (sysCode.equals(userCode)){
// 验证码一致
// TODO:判断是快递员还是用户，如果都不是则默认注册为用户，如果都是则以快递员身份登录
User user1 = UserService.findByUserPhone(userPhone);
Courier courier1 = CourierService.findByPhone(userPhone);
if (user1 == null && courier1 == null){
// 新注册为用户
msg.setStatus(0);
User u = new User();
u.setUserPhone(userPhone);
UserService.insert(u);
UserUtil.setWxUser(request.getSession(), u);
}else if (user1 != null && courier1 != null){
// 以快递员身份登录
msg.setStatus(1);
UserUtil.setWxUser(request.getSession(), courier1);
}else if (user1 != null && courier1 == null){
// 用户登录
msg.setStatus(0);
UserUtil.setWxUser(request.getSession(), user1);
}else if (user1 == null && courier1 != null){
// 快递员登录
msg.setStatus(1);
UserUtil.setWxUser(request.getSession(), courier1);
}
}else {
// 验证码不一致
msg.setStatus(-2);
msg.setResult("验证码不一致，请检查");
}
String json = JSONUtil.toJSON(msg);
return json;
}
/** * 判断当前登陆的是用户还是快递员 * @param request * @param response * @return */
@ResponseBody("/wx/userInfo.do")
public String userInfo(HttpServletRequest request, HttpServletResponse response){
Object loginUser = UserUtil.getWxUser(request.getSession());
boolean isUser = loginUser instanceof User;
Message msg = new Message();
if (isUser){
msg.setStatus(0);
msg.setResult(((User)loginUser).getUserPhone());
}else {
msg.setStatus(1);
msg.setResult(((Courier)loginUser).getCourierPhone());
}
String json = JSONUtil.toJSON(msg);
return json;
}
@ResponseBody("/wx/logout.do")
public String logout(HttpServletRequest request, HttpServletResponse response){
// 销毁session
request.getSession().invalidate();
Message msg = new Message(0);
String json = JSONUtil.toJSON(msg);
return json;
}
}登录界面login.html：
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>快件e栈用户登陆</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body style="">
<section class="aui-flexView">
<header class="aui-navBar aui-navBar-fixed">
<a href="javascript:;" class="aui-navBar-item">
</a>
<div class="aui-center">
<span class="aui-center-title"></span>
</div>
</header>
<section class="aui-scrollView">
<div class="aui-ver-head">
<img src="images/head.png" alt="">
</div>
<div class="aui-ver-form"><img class="logo" src="images/logo.png">
<div class="aui-flex">
<div class="aui-flex-box">
<i class="icon icon-phone"></i>
<input id="phone1" type="text" autocomplete="off" placeholder="手机号码">
</div>
</div>
<div class="aui-flex">
<div class="aui-flex-box">
<i class="icon icon-code"></i>
<input id="code1" type="text" autocomplete="off" placeholder="验证码">
</div>
<div class="aui-button-code">
<input id="btnSendCode1" type="button" class="btn btn-default" value="获取验证码" onclick="sendMessage1()">
</div>
</div>
<div class="aui-ver-button">
<button onclick="binding()">立即登录 / 注册</button>
</div>
<div class="aui-cell-box">
<label class="cell-right">
<input type="checkbox" value="1" name="checkbox" checked="checked">
<i class="cell-checkbox-icon"></i>
<em>同意快递e栈注册协议</em>
</label>
</div>
</div>
</section>
</section>
<script src="js/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<script type="text/javascript"> var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/; var count = 10; var InterValObj1; var curCount1; function sendMessage1() { curCount1 = count; var phone = $.trim($('#phone1').val()); if (!phoneReg.test(phone)) { alert(" 请输入有效的手机号码"); return false; } $("#btnSendCode1").attr("disabled", "true"); $("#btnSendCode1").val( + curCount1 + "秒再获取"); InterValObj1 = window.setInterval(SetRemainTime1, 1000); var windowId = layer.load(); // 发送短信 $.getJSON("/wx/loginSms.do",{ userPhone:phone},function (data) { // {status:0,result:"成功/失败"} layer.close(windowId); layer.msg(data.result); }); } function SetRemainTime1() { if (curCount1 == 0) { window.clearInterval(InterValObj1); $("#btnSendCode1").removeAttr("disabled"); $("#btnSendCode1").val("重新发送"); } else { curCount1--; $("#btnSendCode1").val( + curCount1 + "秒再获取"); } } function binding(){ if(!$(":checkbox").prop("checked")){ layer.msg("未勾选协议,无法登陆"); return; } //alert("正在登陆") // window.location.href="index.html"; var userPhone = $.trim($('#phone1').val()); var code = $.trim($('#code1').val()); var windowId = layer.load(); $.post("/wx/login.do",{ userPhone:userPhone,code:code},function (data) { layer.close(windowId); layer.msg(data.result) layer.msg(data.result); if (data.status == 0 || data.status == 1){ // 以用户身份登录 window.location.href = "index.html"; } },"JSON"); } </script>
</body>
</html>2.1 使用流（stream）来处理List
按照快递状态进行过滤（只保留某些状态的快递）：
Stream<Express> status1Express = list.stream().filter(express -> {
if (express.getStatus() == 1) {
return true;
} else {
return false;
}
});对上面的过滤结果根据入库时间进行排序：
Stream<Express> status1Express = list.stream().filter(express -> {
if (express.getStatus() == 1) {
return true;
} else {
return false;
}
}).sorted((o1,o2) -> {
long o1Time = o1.getInTime().getTime();
long o2Time = o2.getInTime().getTime();
return (int)(o1Time - o2Time);
});2.2 创建登录权限验证过滤器
wx包下新建filter包：
package com.wangjiawei.wx.filter;
import com.wangjiawei.util.UserUtil;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
/** * 2 * @Author: 小王同学 * 3 * @Date: 2020/10/10 10:02 * 4 */
@WebFilter({ "/index.html"})
public class UserFilter implements Filter {
@Override
public void destroy() {
}
@Override
public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
HttpSession session = ((HttpServletRequest)req).getSession();
Object wxUser = UserUtil.getWxUser(session);
if (wxUser != null){
chain.doFilter(req, resp);
}else {
((HttpServletResponse)resp).sendRedirect("login.html");
}
}
@Override
public void init(FilterConfig config) throws ServletException {
}
}2.3 微信端快递管理器
将后台管理中定义过的DateFormatUtil中添加将时间字符串转long数据的方法：
public static long toTime(String formatString){
try {
return format.parse(formatString).getTime();
} catch (ParseException e) {
e.printStackTrace();
}
return 0;
}wx.conmtroller包下新建ExpressController，添加根据手机号码查询快递方法：
@ResponseBody("/wx/findExpressByUserPhone.do")
public String findByUserPhone(HttpServletRequest request, HttpServletResponse response){
Object temp = UserUtil.getWxUser(request.getSession());
String userPhone="";
if (temp instanceof User){
User wxUser = (User) temp;
userPhone = wxUser.getUserPhone();
}else if (temp instanceof Courier){
Courier wxUser = (Courier) temp;
userPhone = wxUser.getCourierPhone();
}
System.out.println(temp);
System.out.println(userPhone);
List<Express> list = ExpressService.findByUserPhone(userPhone);
// 转变为更好显示的格式
List<BootStrapTableExpress> 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();
BootStrapTableExpress e2 = new BootStrapTableExpress(e.getId(),e.getNumber(),e.getUsername(),e.getUserPhone(),e.getCompany(),code,inTime,outTime,status,e.getSysPhone());
list2.add(e2);
}
Message msg = new Message();
if (list.size() == 0){
msg.setStatus(-1);
}else {
msg.setStatus(0);
// 只保留未取件的快递，并按照入库时间排序
Stream<BootStrapTableExpress> status0Express = list2.stream().filter(express -> {
if (express.getStatus().equals("待取件")) {
return true;
} else {
return false;
}
}).sorted((o1,o2) -> {
long o1Time = DateFormatUtil.toTime(o1.getInTime());
long o2Time = DateFormatUtil.toTime(o2.getInTime());
return (int)(o1Time - o2Time);
});
// 只保留已取件的快递，并按照入库时间排序
Stream<BootStrapTableExpress> status1Express = list2.stream().filter(express -> {
if (express.getStatus().equals("已取件")) {
return true;
} else {
return false;
}
}).sorted((o1,o2) -> {
long o1Time = DateFormatUtil.toTime(o1.getInTime());
long o2Time = DateFormatUtil.toTime(o2.getInTime());
return (int)(o1Time - o2Time);
});
Object[] s0 = status0Express.toArray();
Object[] s1 = status1Express.toArray();
Map data = new HashMap<>();
data.put("status0",s0);
data.put("status1",s1);
msg.setData(data);
}
String json = JSONUtil.toJSON(msg);
return json;
}对应的前端展示代码expressList.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<style type="text/css"> body{ margin: 0; padding: 0; background-color: #eeeeee; font-family: "楷体"; } .item{ margin: 20px; margin-bottom: 50px; } .imte_top{ text-align: center; } .imte_top>span{ font-size:14px; display: inline-block; padding: 5px 12px; background-color: #ddd; color:#fff; border-radius: 5px; } .item_content{ background-color: #fff; padding: 25px 15px; margin-top: 6px; } .item_content_top_1{ font-size: 24px; font-weight: bold; } .item_content_top_2{ color:#eee; font-size: 14px; margin: 5px 0px; } .item_content_top_3{ margin: 10px 0px; } .item_content_top_4{ margin: 10px 0px; } .item_content_bottom>a{ text-decoration: none; color:#33e; } </style>
</head>
<body>
<div id="status0Content" class="content"></div>
<div id="status1Content" class="content"></div>
</body>
<script src="js/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<script> $(function () { $.getJSON("/wx/findExpressByUserPhone.do",null,function (data) { console.log(data); // { // "status": 0, // "data": { // "status0": [ // { // "id": 17, // "number": "123112", // "username": "顾一", // "userPhone": "15371998972", // "company": "顺丰快递", // "code": "666002", // "inTime": "2020-10-10 09:45:56", // "outTime": "未出库", // "status": "待取件", // "sysPhone": "18888888888" // } // ], // "status1": [ // { // "id": 13, // "number": "12311", // "username": "顾一", // "userPhone": "15371998972", // "company": "顺丰快递", // "code": "已取件", // "inTime": "2020-10-10 09:45:38", // "outTime": "2020-10-10 09:43:53", // "status": "已取件", // "sysPhone": "18888888888" // } // ] // } var data0 = data.data.status0; for(var i = 0;i < data0.length; i++){ var item = '<div class="item">\n' + '\t\t\t<div class="imte_top"><span>'+data0[i].inTime+'</span></div>\n' + '\t\t\t<div class="item_content">\n' + '\t\t\t\t<div class="item_content_top">\n' + '\t\t\t\t\t<div class="item_content_top_1">取件通知</div>\n' + '\t\t\t\t\t<div class="item_content_top_2">'+data0[i].inTime+'</div>\n' + '\t\t\t\t\t<div class="item_content_top_3">您有一个包裹到e栈了!</div>\n' + '\t\t\t\t\t<div class="item_content_top_4">\n' + '\t\t\t\t\t\t取件码:<span style="color:#05a">'+data0[i].code+'</span><br>\n' + '\t\t\t\t\t\t快递公司:'+data0[i].company+'<br>\n' + '\t\t\t\t\t\t运单号码:'+data0[i].number+'<br>\n' + '\t\t\t\t\t\t站点电话:'+data0[i].sysPhone+'<br>\n' + '\t\t\t\t\t</div>\n' + '\t\t\t\t</div>\n' + '\t\t\t\t<hr>\n' + '\t\t\t\t<div class="item_content_bottom">\n' + '\t\t\t\t\t<a href="/wx/createQRCode.do?type=express&code='+data0[i].code+'">二维码</a>\n' + '\t\t\t\t</div>\n' + '\t\t\t</div>\n' + '\t\t</div>'; $("#status0Content").append($(item)); } var data1 = data.data.status1; for(var i = 0;i < data1.length; i++){ var item = '<div class="item">\n' + '\t\t\t<div class="imte_top"><span>'+ data1[i].outTime +'</span></div>\n' + '\t\t\t<div class="item_content">\n' + '\t\t\t\t<div class="item_content_top">\n' + '\t\t\t\t\t<div class="item_content_top_1">取件成功通知</div>\n' + '\t\t\t\t\t<div class="item_content_top_2">'+ data1[i].outTime +'</div>\n' + '\t\t\t\t\t<div class="item_content_top_3">您有一个包裹从e栈取出了!</div>\n' + '\t\t\t\t\t<div class="item_content_top_4">\n' + '\t\t\t\t\t\t快递公司:'+ data1[i].company +'<br>\n' + '\t\t\t\t\t\t运单号码:'+ data1[i].number +'<br>\n' + '\t\t\t\t\t\t站点电话:'+ data1[i].sysPhone +'<br>\n' + '\t\t\t\t\t</div>\n' + '\t\t\t\t</div>\n' + '\t\t\t\t<hr>\n' + '\t\t\t\t<div class="item_content_bottom">\n' + '\t\t\t\t\t<a href="#">有疑问 ? 点了也没用</a>\n' + '\t\t\t\t</div>\n' + '\t\t\t</div>\n' + '\t\t</div>'; $("#status1Content").append($(item)); } }); }); </script>
</html>在session中存储要展示的二维码。点击【我的快件】中某个快递对应的二维码以及点击【取货二维码】时，由页面发送ajax来进行请求。 用户二维码被扫后，快递员（柜子）端展示用户所有快递 快递二维码被扫后，展示单个快递信息
3.1 二维码相关的controller
生成二维码存储文字内容的方法：
@ResponseView("/wx/createQRCode.do")
public String createQrcode(HttpServletRequest request, HttpServletResponse response){
String code = request.getParameter("code");
// 通过快递列表点进来是express，通过主页点进来是user
String type = request.getParameter("type");
String userPhone = null;
String qrCodeContent = null;
if ("express".equals(type)){
// 快递二维码
//code
qrCodeContent = "express_" + code;
}else {
// 用户二维码
// userPhone
Object temp = UserUtil.getWxUser(request.getSession());
if (temp instanceof User){
User wxUser = (User) temp;
userPhone = wxUser.getUserPhone();
}else if (temp instanceof Courier){
Courier wxUser = (Courier) temp;
userPhone = wxUser.getCourierPhone();
}
qrCodeContent = "userPhone_" + userPhone;
}
HttpSession session = request.getSession();
session.setAttribute("qrcode",qrCodeContent);
return "/personQRcode.html";
}获取二维码要展示的内容的方法：
@ResponseBody("wx/qrcode.do")
public String getQRCode(HttpServletRequest request, HttpServletResponse response){
HttpSession session = request.getSession();
String qrcode = (String) session.getAttribute("qrcode");
Message msg = new Message();
if (qrcode == null){
msg.setStatus(-1);
msg.setResult("取件码获取出错，请用户重新操作");
}else {
msg.setStatus(0);
msg.setResult(qrcode);
}
String json = JSONUtil.toJSON(msg);
return json;
}3.2 前端代码
主页index.html点击【取货二维码】时跳转到/wx/createQRCode.do
case(2): window.location.href= "/wx/createQRCode.do?type=user"; break;快递展示页面点击【二维码时】也跳转到/wx/createQRCode.do
<a href="/wx/createQRCode.do?type=express&code=" + data0[i].code + ">二维码</a>二维码展示页面personQRcode中先从服务器获取二维码存储的文字，再调用方法生成二维码。
$.getJSON("/wx/qrcode.do",null,function (data) {
if (data.status == -1){
layer.msg(data.result);
}
setQRcode(data.result);
});expressList.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<style type="text/css"> body{ margin: 0; padding: 0; background-color: #eeeeee; font-family: "楷体"; } .item{ margin: 20px; margin-bottom: 50px; } .imte_top{ text-align: center; } .imte_top>span{ font-size:14px; display: inline-block; padding: 5px 12px; background-color: #ddd; color:#fff; border-radius: 5px; } .item_content{ background-color: #fff; padding: 25px 15px; margin-top: 6px; } .item_content_top_1{ font-size: 24px; font-weight: bold; } .item_content_top_2{ color:#eee; font-size: 14px; margin: 5px 0px; } .item_content_top_3{ margin: 10px 0px; } .item_content_top_4{ margin: 10px 0px; } .item_content_bottom>a{ text-decoration: none; color:#33e; } </style>
</head>
<body>
<div id="status0Content" class="content"></div>
<div id="status1Content" class="content"></div>
</body>
<script src="js/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<script> $(function () { $.getJSON("/wx/findExpressByUserPhone.do",null,function (data) { console.log(data); // { // "status": 0, // "data": { // "status0": [ // { // "id": 17, // "number": "123112", // "username": "顾一", // "userPhone": "15371998972", // "company": "顺丰快递", // "code": "666002", // "inTime": "2020-10-10 09:45:56", // "outTime": "未出库", // "status": "待取件", // "sysPhone": "18888888888" // } // ], // "status1": [ // { // "id": 13, // "number": "12311", // "username": "顾一", // "userPhone": "15371998972", // "company": "顺丰快递", // "code": "已取件", // "inTime": "2020-10-10 09:45:38", // "outTime": "2020-10-10 09:43:53", // "status": "已取件", // "sysPhone": "18888888888" // } // ] // } var data0 = data.data.status0; for(var i = 0;i < data0.length; i++){ var item = '<div class="item">\n' + '\t\t\t<div class="imte_top"><span>'+data0[i].inTime+'</span></div>\n' + '\t\t\t<div class="item_content">\n' + '\t\t\t\t<div class="item_content_top">\n' + '\t\t\t\t\t<div class="item_content_top_1">取件通知</div>\n' + '\t\t\t\t\t<div class="item_content_top_2">'+data0[i].inTime+'</div>\n' + '\t\t\t\t\t<div class="item_content_top_3">您有一个包裹到e栈了!</div>\n' + '\t\t\t\t\t<div class="item_content_top_4">\n' + '\t\t\t\t\t\t取件码:<span style="color:#05a">'+data0[i].code+'</span><br>\n' + '\t\t\t\t\t\t快递公司:'+data0[i].company+'<br>\n' + '\t\t\t\t\t\t运单号码:'+data0[i].number+'<br>\n' + '\t\t\t\t\t\t站点电话:'+data0[i].sysPhone+'<br>\n' + '\t\t\t\t\t</div>\n' + '\t\t\t\t</div>\n' + '\t\t\t\t<hr>\n' + '\t\t\t\t<div class="item_content_bottom">\n' + '\t\t\t\t\t<a href="/wx/createQRCode.do?type=express&code='+data0[i].code+'">二维码</a>\n' + '\t\t\t\t</div>\n' + '\t\t\t</div>\n' + '\t\t</div>'; $("#status0Content").append($(item)); } var data1 = data.data.status1; for(var i = 0;i < data1.length; i++){ var item = '<div class="item">\n' + '\t\t\t<div class="imte_top"><span>'+ data1[i].outTime +'</span></div>\n' + '\t\t\t<div class="item_content">\n' + '\t\t\t\t<div class="item_content_top">\n' + '\t\t\t\t\t<div class="item_content_top_1">取件成功通知</div>\n' + '\t\t\t\t\t<div class="item_content_top_2">'+ data1[i].outTime +'</div>\n' + '\t\t\t\t\t<div class="item_content_top_3">您有一个包裹从e栈取出了!</div>\n' + '\t\t\t\t\t<div class="item_content_top_4">\n' + '\t\t\t\t\t\t快递公司:'+ data1[i].company +'<br>\n' + '\t\t\t\t\t\t运单号码:'+ data1[i].number +'<br>\n' + '\t\t\t\t\t\t站点电话:'+ data1[i].sysPhone +'<br>\n' + '\t\t\t\t\t</div>\n' + '\t\t\t\t</div>\n' + '\t\t\t\t<hr>\n' + '\t\t\t\t<div class="item_content_bottom">\n' + '\t\t\t\t\t<a href="#">有疑问 ? 点了也没用</a>\n' + '\t\t\t\t</div>\n' + '\t\t\t</div>\n' + '\t\t</div>'; $("#status1Content").append($(item)); } }); }); </script>
</html>personQRcode.html：
<!DOCTYPE html>
<html>
<head>
<title>快递助手 -- 快件e栈服务平台</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link href="css/normalize.css" type="text/css" rel="stylesheet" />
<link href="css/common.css" type="text/css" rel="stylesheet" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/qrcode.min.js" type="text/javascript"></script>
<script src="js/common.js" type="text/javascript"></script>
<script src="layer/layer.js"></script>
<style type="text/css"> body{ background: #f4f4f4; } .content{ background: #82b927; } .userQRcodeTitle{ width: 70%; margin: 20px auto; line-height: 40px; border: 2px solid #000; text-align: center; border-radius: 20px; font-size: 18px; font-weight: bolder; display: none; } .userQRcodeCont{ width: 100%; padding: 20px 0; margin: 0 auto; background: #82b927; } #qrcode{ width: calc(70% - 40px - 20px); margin: 0 auto; padding: 20px; border: 10px solid #2f4e25; background: #fff; border-radius: 8px; position: relative; } #qrcode .refresh{ width: 40px; height: 40px; position: absolute; left: calc(50% - 20px); top: calc(50% - 20px); background: url(images/refreshicon.png) rgba(0,0,0,0.8) no-repeat center center; background-size: 35px 35px; border-radius: 5px; } .userQRcodeCont .userQRcodeDescTxt{ width: 70%; line-height: 50px; margin: 0 auto; font-size: 25px; font-weight: bolder; text-align: center; color: #fff; border-bottom: 4px dotted #fff; } .userQRcodeCont .useStepCont{ width: 70%; margin: 20px auto 0px; } .userQRcodeCont .useStepCont ul{ margin: 0px; padding: 0px; list-style-type: none; overflow: hidden; } .userQRcodeCont .useStepCont ul li{ width: calc(33.3% - 20px); padding: 10px 10px; float: left; } .userQRcodeCont .useStepCont ul li .useStepTitle{ width: 30px; line-height: 30px; border-radius: 15px; margin: 0 auto; font-size: 14px; background: #fff; text-align: center; } .userQRcodeCont .useStepCont ul li .useStepTxt{ height: 30px; font-size: 12px; text-align: center; color: #fff; margin: 0px; } .userQRcodeCont .useStepCont ul li .useStepIcon{ width: 100%; height: 50px; margin: 5px 0; } .userQRcodeCont .useStepCont ul li:nth-child(1) .useStepIcon{ background: url(images/qrcodeicon.png) no-repeat center center; background-size: 40px 40px; } .userQRcodeCont .useStepCont ul li:nth-child(2) .useStepIcon{ background: url(images/scanQRicon.png) no-repeat center center; background-size: 40px 40px; } .userQRcodeCont .useStepCont ul li:nth-child(3) .useStepIcon{ background: url(images/completeIcon.png) no-repeat center center; background-size: 40px 40px; } .userQRcodeCont .userInfoCont{ width: 60%; overflow: hidden; font-size: 14px; margin: 0 auto; padding: 0 5%; background: #fff; display: none; } .userQRcodeCont .userInfoCont p{ margin: 0px; padding: 0px; line-height: 30px; } .userQRcodeCont .userInfoCont .userName{ float: left; background: url(images/uname.png) no-repeat center left; background-size: 18px; padding-left: 23px; } .userQRcodeCont .userInfoCont .userPhone{ float: right; background: url(images/uphone.png) no-repeat center left; background-size: 18px; padding-left: 23px; } </style>
</head>
<body>
<div class="content">
<div class="headerNav">
<div class="headerNavTop"><div class="headerNavIcon headerNavIconOut"><span></span><span></span></div></div>
<div class="headerNavCont">
<a href="index.html">快递首页</a>
<a href="userhome.html">个人中心</a>
<a href="delivery.html">送货上门</a>
<a href="sendexpress.html">我要寄件</a>
<a href="lazyboard.html">懒人排行</a>
<a href="expassistant.html">快递助手</a>
</div>
</div>
<div class="userQRcodeCont">
<div id="qrcode"><div class="refresh"></div></div>
<p class="userQRcodeDescTxt">手机扫码，快捷取货</p>
<div class="useStepCont">
<ul>
<li>
<p class="useStepTitle">1</p>
<p class="useStepIcon"></p>
<p class="useStepTxt">向工作人员出示二维码</p>
</li>
<li>
<p class="useStepTitle">2</p>
<p class="useStepIcon"></p>
<p class="useStepTxt">工作人员扫描二维码</p>
</li>
<li>
<p class="useStepTitle">3</p>
<p class="useStepIcon"></p>
<p class="useStepTxt">完成取货</p>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript"> $(function() { var windowH = $(window).height(); var contentH = $(".content").height(); if (contentH < windowH) { $(".content").css({ "height":windowH+"px"}); } var qrcodeWH = $("#qrcode").width(); // 数据生成 var rTextData = $("#rTextData").val(); var setQRcode = function(textdata){ // 设置参数方式 var qrcode = new QRCode('qrcode', { text: textdata, width: qrcodeWH, height: qrcodeWH, colorDark : '#000000', colorLight : '#ffffff', correctLevel : QRCode.CorrectLevel.H }); //alert(textdata); //alert(qrcodeWH); }; $.getJSON("/wx/qrcode.do",null,function (data) { if (data.status == -1){ layer.msg(data.result); } setQRcode(data.result); }); $(".refresh").click(function(){ //qrcode.clear(); //setQRcode(textdata); location.reload(); }) }); </script>
</body>
</html>
下载后启动服务器 
输入隧道id：ae2d4bac22…
当访问http://wjwezhan.free.idcfengye.com时会跳转到本地。 为了防止free.idcfengye.com域名被别人恶意使用后被举报，重新编辑一下域名
此时再浏览器中输入 即可访问主页。
5.1 微信JSSDK引入
5.1.1 前置需求
申请个人微信公众号
5.1.2 引入并修改工具类
在wx包下创建servlet包，并导入配置类。
package com.wangjiawei.wx.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.wangjiawei.wx.util.SignatureUtil;
@WebServlet("/wxconf.do")
public class WXConfig extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter pw = response.getWriter();
String urlText = request.getParameter("xurl");
try {
String json = SignatureUtil.getConfig(urlText ).toJSON();
pw.println(json);
} catch (Exception e) {
e.printStackTrace();
}
pw.close();
}
/** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}在wx包下创建util包，并导入三个工具类，SignatureUtil.java，TicketUtil.java，TokenUtil.java
进行如下修改：
- SignatureUtil类 88 行的appid 否则无法调用api
- TokenUtil类的34行的appid
- TokenUtil类的35行的secret
appid和密钥来自于: mp.weixin.qq.com --> 基本配置
5.1.3 添加js安全域名
公众号设置 —> 功能设置 —> JS接口安全域名
按照给出的提示设置上面定义过的wjwezhan.zaixianke.cn
5.1.4 添加白名单ip
映射服务器地址：64.69.43.237 
本机ip地址: 211.162.81.72 
5.1.5 设置自动回复
公众号设置自动回复后连接到http://wjwezhan.zaixianke.cn/login.html，登录后是用快递助手，点击扫码按钮即可跳出扫码界面。
设计两种取件方式： 第一种是扫描用户的二维码，展示出该用户所有的快递，再对每一个快递可以有取件的操作。 第二种是快递员扫描某个快递的二维码，再将其显示后可以有一个取件的操作。
6.1 完善后台代码
BaseExpressDao中添加根据手机号和快递状态查询的方法：
/** * 根据用户手机号和快递状态查询所有快递 * @param userPhone 手机号 * @param status 快递状态 * @return 查询的快递信息，手机号不存在时返回null */
List<Express> findByUserPhoneAndStatus(String userPhone, int status);在接口实现类中进行实现：
@Override
public List<Express> findByUserPhoneAndStatus(String userPhone, int status) {
ArrayList<Express> data = new ArrayList<>();
Connection conn = DruidUtil.getConnection();
PreparedStatement state = null;
ResultSet result = null;
try {
state = conn.prepareStatement(SQL_FIND_BY_USERPHONE_AND_STATUS);
state.setString(1,userPhone);
state.setInt(2,status);
result = state.executeQuery();
while (result.next()){
int id = result.getInt("id");
String number = result.getString("number");
String username = result.getString("username");
String company = result.getString("company");
String code = result.getString("code");
Timestamp inTime = result.getTimestamp("inTime");
Timestamp outTime = result.getTimestamp("outTime");
String sysPhone = result.getString("sysPhone");
Express e = new Express(id, number, username, userPhone, company, code, inTime, outTime, status, sysPhone);
data.add(e);
}
}catch (SQLException throwables){
throwables.printStackTrace();
}finally {
DruidUtil.close(conn,state,result);
}
return data;
}service中添加相应方法：
public static List<Express> findByUserPhoneAndStatus(String userPhone, int status) {
return dao.findByUserPhoneAndStatus(userPhone, status);
}6.2 微信端后台实现
6.2.1 快递展示操作
wx包下ExpressController中添加查询快递的方法，如果用户扫描的是个人二维码，则展示其所有快递：
@ResponseBody("/wx/userExpressList.do")
public String expressList(HttpServletRequest request, HttpServletResponse response){
String userPhone = request.getParameter("userPhone");
List<Express> list = ExpressService.findByUserPhoneAndStatus(userPhone, 0);
// 转变为更好显示的格式
List<BootStrapTableExpress> 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();
BootStrapTableExpress e2 = new BootStrapTableExpress(e.getId(),e.getNumber(),e.getUsername(),e.getUserPhone(),e.getCompany(),code,inTime,outTime,status,e.getSysPhone());
list2.add(e2);
}
Message msg = new Message();
if (list.size() == 0){
msg.setStatus(-1);
msg.setResult("未查询到快递");
}else {
msg.setStatus(0);
msg.setResult("查询成功");
msg.setData(list2);
}
String json = JSONUtil.toJSON(msg);
return json;
}6.2.2 取件操作（更新status）
QRCodeController中添加取件的操作：
@ResponseBody("/wx/updateStatus.do")
public String updateExpressStatus(HttpServletRequest request, HttpServletResponse response){
String code = request.getParameter("code");
boolean flag = ExpressService.updateStatus(code);
Message msg = new Message();
if (flag){
msg.setStatus(0);
msg.setResult("取件成功");
}else {
msg.setStatus(-1);
msg.setResult("取件码不存在，请更新二维码");
}
String json = JSONUtil.toJSON(msg);
return json;
}
QRCodeController中添加根据取件码输入框中的取件码查询快递的操作（应用于第二种取件方式）：
@ResponseBody("/wx/findExpressByCode.do")
public String findExpressByCode(HttpServletRequest request, HttpServletResponse response){
String code = request.getParameter("code");
Express e = ExpressService.findByCode(code);
BootStrapTableExpress e2 = null;
if (e != null){
String inTime = DateFormatUtil.format(e.getInTime());
String status = "待取件";
e2 = new BootStrapTableExpress(e.getId(),e.getNumber(),e.getUsername(),e.getUserPhone(),e.getCompany(),code,inTime,null,status,e.getSysPhone());
}
Message msg = new Message();
if (e == null){
msg.setStatus(-1);
msg.setResult("取件码不存在");
}else {
msg.setStatus(0);
msg.setResult("查询成功");
msg.setData(e2);
}
String json = JSONUtil.toJSON(msg);
return json;
}wx包下ExpressController添加快递员增加快递的方法：
@ResponseBody("/wx/addExpress.do")
public String addExpress(HttpServletRequest request, HttpServletResponse response){
String expressNumber = request.getParameter("expressNumber");
String username = request.getParameter("username");
String userPhone = request.getParameter("userPhone");
String company = request.getParameter("company");
String sysPhone = ((Courier)UserUtil.getWxUser(request.getSession())).getCourierPhone();
Message msg = new Message();
Express e = ExpressService.findByNumber(expressNumber);
if (e != null){
// 单号重复
msg.setStatus(-1);
msg.setResult("快递单号重复");
}else {
Express e2 = new Express(expressNumber,username,userPhone,company,sysPhone);
boolean flag = ExpressService.insert(e2);
if (flag){
// 快递插入成功
msg.setStatus(0);
msg.setResult("快递插入成功");
}else {
// 快递插入失败
msg.setStatus(-1);
msg.setResult("快递插入失败");
}
}
String json = JSONUtil.toJSON(msg);
return json;
}对应前端界面：
<!DOCTYPE html>
<html>
<head>
<title>录入快递 -- 快件e栈服务平台</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link href="css/normalize.css" type="text/css" rel="stylesheet" />
<link href="css/common.css" type="text/css" rel="stylesheet" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/common.js" type="text/javascript"></script>
<script src="js/notice.js" type="text/javascript"></script>
<script src="js/regexp.js" type="text/javascript"></script>
<script src="js/jweixin-1.2.0.js" type="text/javascript"></script>
<script src="layer/layer.js"></script>
<style type="text/css"> .content{ position: relative; } .expEnterCont{ padding-bottom: 20px; } .expEnterCont .expEnterIcon{ width: 20%; margin: 0 auto; } .expEnterCont .expEnterIcon p{ text-align: center; font-weight: bold; } .submitBtn{ width: 90%; margin: 0 auto; text-align: center; line-height: 46px; border-radius: 23px; background: #1f72ff; color: #fff; font-weight: bolder; } .stopvoicerecord{ width: 40%; height: 50px; position: absolute; top: 20px; right: 40px; display: none; background:purple; } .stopvoicerecord{ position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1001; display: none; } .stopvoicerecord .voiceRecordCont{ width: 60%; background: #fff; border-radius: 8px; position: absolute; top: calc((100% - 216px) / 2); /*30 + 110 +30 + 10 +36 == 216*/ left: 20%; padding: 20px 0px 10px; } .stopvoicerecord .voiceRecordCont img{ display: block; margin: 0 auto; width: 110px; } .stopvoicerecord .voiceRecordCont .voiceRecordState{ margin: 0px; text-align: center; font-size: 14px; color: #777777; line-height: 30px; } .stopvoicerecord .voiceRecordCont #stopVoiceRecordBtn{ margin: 10px auto 0px; width: 90%; text-align: center; line-height: 36px; background: #3eb94e; font-size: 14px; color: #fff; font-weight: bold; border-radius: 18px; } #submitBtn{ cursor: pointer; } </style>
</head>
<body>
<div class="content">
<div class="headerNav">
<div class="headerNavTop"><div class="headerNavIcon headerNavIconOut"><span></span><span></span></div></div>
<div class="headerNavCont">
<a href="index.html">快递首页</a>
<a href="userhome.html">个人中心</a>
<a href="delivery.html">送货上门</a>
<a href="sendexpress.html">我要寄件</a>
<a href="lazyboard.html">懒人排行</a>
<a href="expassistant.html">快递助手</a>
</div>
</div>
<div class="expEnterCont">
<div class="expEnterIcon">
<img src="images/expentericon.png" width="100%">
<p>录入快递</p>
</div>
<div class="expEnterInput">
<input id="timestamp" type="hidden" value="${timestamp}" />
<input id="noncestr" type="hidden" value="${nonceStr}" />
<input id="signature" type="hidden" value="${signature}" />
<input id="appId" type="hidden" value="${appId}" />
<form>
<input id="PageContext" type="hidden" value="${pageContext.request.contextPath}" />
<input id="wxCode" type="hidden" value="${wxCode}" />
<div class="userInputCont">
<div class="inputTypeCont">
<div class="inputTitle">单号</div>
<input type="text" id="expressId" class="commonInputFunc" name="expressId" placeholder="请输入快递单号...">
</div>
<div class="inputTypeCont">
<div class="inputTitle">姓名</div>
<input type="text" id="username" class="commonInputFunc" name="phone" placeholder="请输入收件人姓名">
</div>
<div class="inputTypeCont">
<div class="inputTitle">手机</div>
<input type="text" id="phone" class="commonInputFunc" name="phone" placeholder="录入后短信自动提醒">
</div>
<div class="inputTypeCont">
<div class="inputTitle">公司</div>
<select id="company" name="company">
<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>
</form>
<div class="submitBtn" id="submitBtn">录入信息</div>
</div>
</div>
</div>
<script type="text/javascript"> function checkNumber(){ var expressNumber = $("#expressId").val(); if (expressNumber.length == 0){ alert("请输入正确的快递单号"); return false; } return true; } function checkName(){ var username = $("#username").val(); if (username.length == 0){ alert("请输入正确的收件人姓名"); return false; } return true; } function checkUserPhone(){ var userPhone = $("#phone").val(); var reg = /^1[3456789]\d{9}$/; if (!reg.test(userPhone)){ alert("请输入正确的手机号"); return false; } return true; } $(function () { $("#submitBtn").click(function () { var expressNumber = $("#expressId").val(); var username = $("#username").val(); var userPhone = $("#phone").val(); var company = $("#company option:selected").text(); if (checkNumber() && checkName() && checkUserPhone()){ var windowId = layer.load(); $.post("/wx/addExpress.do",{ expressNumber:expressNumber,username:username,userPhone:userPhone,company:company},function (data) { layer.close(windowId); $("input").val(""); layer.msg(data.result); }); } }); }); </script>
</body>
</html>wx包下UserController中添加获取当前登录用户的姓名：
@ResponseBody("/wx/userName.do")
public String userName(HttpServletRequest request, HttpServletResponse response){
Object loginUser = UserUtil.getWxUser(request.getSession());
boolean isUser = loginUser instanceof User;
Message msg = new Message();
if (isUser){
msg.setStatus(0);
msg.setResult(((User)loginUser).getUserName());
}else {
msg.setStatus(1);
msg.setResult(((Courier)loginUser).getCourierName());
}
String json = JSONUtil.toJSON(msg);
return json;
}前端网页进行展示wxUserhome.html：
$.getJSON("/wx/userName.do",{ },function (data) {
var name = data.result;
$("#name").text(name);
});8.2 信息修改
快递修改页面也要有手机验证码进行验证，所以需要在UserUtil中添加 记录 / 获取 这个验证码的操作。
/** * 获取修改信息验证码 * @param session * @param userPhone * @return */
public static String getUpdateSms(HttpSession session, String userPhone){
return (String) session.getAttribute(userPhone+"_update");
}/** * 设置修改验证码 * @param session * @param userPhone * @param code */
public static void setUpdateSms(HttpSession session, String userPhone, String code){
session.setAttribute(userPhone+"_update", code);
}UserController中添加发送修改短信验证码的方法：
@ResponseBody("/wx/updateSms.do")
public String updateSms(HttpServletRequest request, HttpServletResponse response){
String newPhone = request.getParameter("newPhone");
// TODO:为了调试的时候不浪费钱，先把这两行注释了
// String code = RandomUtil.getCode() + "";
// boolean flag = SMSUtil.loginSMS(userPhone, code);
String code = "222222";
boolean flag = true;
Message msg = new Message();
if (flag){
// 短信发送成功
msg.setStatus(0);
msg.setResult("验证码已发送，请查收！");
}else {
// 短信发送失败
msg.setStatus(-1);
msg.setResult("验证码发送失败，请检查手机号或稍后再试");
}
UserUtil.setUpdateSms(request.getSession(), newPhone, code);
String json = JSONUtil.toJSON(msg);
return json;
}UserController中添加修改个人信息页面的方法：
/** * 修改个人信息页面 * @param request * @param response * @return */
@ResponseBody("/wx/update.do")
public String update(HttpServletRequest request, HttpServletResponse response){
String newName = request.getParameter("newName");
String newPhone = request.getParameter("newPhone");
String verify = request.getParameter("verify");
String sysCode = UserUtil.getUpdateSms(request.getSession(), newPhone);
Message msg = new Message();
if (sysCode == null){
msg.setStatus(-1);
msg.setResult("手机号码未获取短信");
}else if (sysCode.equals(verify)){
Object wxUser = UserUtil.getWxUser(request.getSession());
if (wxUser instanceof User){
User oldUser = UserService.findByUserPhone(((User) wxUser).getUserPhone());
int id = oldUser.getId();
oldUser.setUserName(newName);
oldUser.setUserPhone(newPhone);
boolean flag = UserService.update(id, oldUser);
if (flag){
msg.setStatus(0);
msg.setResult("修改成功");
}else {
msg.setStatus(-3);
msg.setResult("修改失败");
}
}else if (wxUser instanceof Courier){
Courier oldUser = CourierService.findByPhone(((Courier)wxUser).getCourierPhone());
int id = oldUser.getId();
oldUser.setCourierName(newName);
oldUser.setCourierPhone(newPhone);
boolean flag = CourierService.update(id, oldUser);
if (flag){
msg.setStatus(0);
msg.setResult("修改成功");
}else {
msg.setStatus(-3);
msg.setResult("修改失败");
}
}
}else {
// 验证码不一致
msg.setStatus(-2);
msg.setResult("验证码不一致，请检查");
}
String json = JSONUtil.toJSON(msg);
return json;
}前端页面wxIdCardUserInfoModify.html：
<!DOCTYPE html>
<html>
<head>
<title>用户详情 -- 快件e栈服务平台</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link href="css/normalize.css" type="text/css" rel="stylesheet" />
<link href="css/common.css" type="text/css" rel="stylesheet" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/notice.js" type="text/javascript"></script>
<script src="js/common.js" type="text/javascript"></script>
<script src="js/regexp.js" type="text/javascript"></script>
<script src="layer/layer.js"></script>
<style type="text/css"> .userInfoEditCont{ width: 100%; } .userInfoEditCont .userInfoIcon{ width: 20%; margin: 0px auto 10px; } .userInfoEditCont .nickName{ font-size: 14px; text-align: center; font-weight: bold; } /* ----- cover ----- */ #coverCont{ position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1000; display: none; } .userTypeCont{ position: absolute; top: 0px; left: 0px; z-index: 1001; width: 80%; background: #f4f4f4; border: 1px solid #f1f1f1; border-radius: 5px; padding: 20px 0px 30px; display: none; } .userTypeCont .userTypeTitle{ text-align: center; font-size: 18px; font-weight: bold; padding: 10px 0px; } .userTypeCont .userType{ width: 90%; margin: 5px auto; overflow: hidden; } .userTypeCont .userType .teacherType{ width: 45%; padding: 10px 2%; float: left; border: 1px solid #f1f1f1; background: #fff; } .userTypeCont .userType .studentType{ width: 45%; padding: 10px 2%; float: right; border: 1px solid #f1f1f1; background: #fff; } .userType .typeImg{ width: 50%; margin: 0px auto 5px; } .userType .typeTitle{ text-align: center; line-height: 30px; font-weight: bold; color: #333333; } .userType .typeDesc{ font-size: 12px; color: #888888; line-height: 20px; text-align: center; } .submitBtn{ width: 90%; margin: 0 auto 20px; text-align: center; line-height: 46px; border-radius: 23px; background: #888888; color: #fff; font-weight: bolder; } .userSelectCont{ width: 100%; background: #fff; font-size: 14px; overflow: hidden; position: fixed; left: 0px; bottom: 0px; display: none; z-index: 999; } .userSelectCont .userSelectTitle{ width: 90%; padding: 0px 5%; background: #fff; overflow: hidden; border-bottom: 1px solid #f1f1f1; } .userSelectCont .userSelectTitle .selectCancelBtn{ float: left; color: #1f72ff; font-weight: bold; line-height: 35px; } .userSelectCont .userSelectTitle .selectOkBtn{ float: right; color: #1f72ff; font-weight: bold; line-height: 35px; } .userSelectCont .selectNumCont{ width: 90%; padding: 0px 5%; } .userSelectCont .selectNumCont .selectNum{ overflow: hidden; padding: 10px 0px; } .userSelectCont .selectNumCont .selectNum .selectTitle{ float: left; width: 100px; } .userSelectCont .selectNumCont .selectNum .selectNumDiv{ float: left; width: calc(100% - 100px); } .userSelectCont .selectNumCont .selectNum .selectNumDiv ul{ list-style: none; margin: 0px; padding: 0px; } .userSelectCont .selectNumCont .selectNum .selectNumDiv ul li{ float: left; width: 24%; margin: 0px 0px 5px 1%; text-align: center; line-height: 25px; } .selectNum .selectNumDiv ul li.unselect{ background: #f1f1f1; color: #000; } .selectNum .selectNumDiv ul li.select{ background: #1f72ff; color: #fff; } .userNewPhoneDiv{ display: none; } .gapText{ text-align: center; font-size: 14px; color: #888888; margin-top: 10px; } </style>
</head>
<body>
<div class="content">
<div class="headerNav">
<div class="headerNavTop"><div class="headerNavIcon headerNavIconOut"><span></span><span></span></div></div>
<div class="headerNavCont">
<a href="index.html">快递首页</a>
<a href="userhome.html">个人中心</a>
<a href="delivery.html">送货上门</a>
<a href="sendexpress.html">我要寄件</a>
<a href="lazyboard.html">懒人排行</a>
<a href="expassistant.html">快递助手</a>
</div>
</div>
<div class="userInfoEditCont">
<div class="userInfoIcon">
<img src="images/userInfoIcon.png" width="100%">
</div>
<div class="nickName">用户姓名</div>
<form>
<input id="PageContext" type="hidden" value="${pageContext.request.contextPath}" />
<input id="wxCode" type="hidden" value="${wxCode}" />
<input type="hidden" id="userId" name="userId" value="${sysWxUser.id}">
<div class="userInputCont">
<div class="inputTypeCont">
<div class="inputTitle">新名称</div>
<input type="text" class="commonInput" name="name" id="name" placeholder="请输入真实姓名...">
</div>
<div class="inputTypeCont">
<div class="inputTitle">新手机</div>
<input type="text" class="commonInputFunc userOldPhone" id="usernum" name="usernum" placeholder="请输入新手机号码">
<div class="commonFuncBtnModify userModifyPhone"></div>
</div>
<div class="inputTypeCont">
<div class="inputTitle">短信</div>
<input type="text" class="verifiInput" id="verify" name="verify" placeholder="请输入验证码...">
<input type="button" id="btnSendCode1" class="verifiBtn" onclick="sendMessage1()" value="发送验证码">
</div>
</div>
</form>
<div class="submitBtn" onclick="update()">修改信息</div>
</div>
</div>
</body>
<script> var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/; var count = 10; var verify = $("#verify").val(); function sendMessage1() { var newPhone = $("#usernum").val(); console.log(newPhone); curCount1 = count; if (!phoneReg.test(newPhone)) { alert(" 请输入有效的手机号码"); return false; } $("#btnSendCode1").attr("disabled", "true"); $("#btnSendCode1").val( + curCount1 + "秒再获取"); InterValObj1 = window.setInterval(SetRemainTime1, 1000); var windowId = layer.load(); // 发送短信 $.getJSON("/wx/updateSms.do",{ newPhone:newPhone},function (data) { // {status:0,result:"成功/失败"} layer.close(windowId); layer.msg(data.result); }); } function SetRemainTime1() { if (curCount1 == 0) { window.clearInterval(InterValObj1); $("#btnSendCode1").removeAttr("disabled"); $("#btnSendCode1").val("重新发送"); } else { curCount1--; $("#btnSendCode1").val( + curCount1 + "秒再获取"); } } function update() { var newName = $("#name").val(); var newPhone = $("#usernum").val(); var verify = $("#verify").val(); var windowId = layer.load(); console.log(newName); console.log(newPhone); console.log(verify); $.post("/wx/update.do",{ newName:newName,newPhone:newPhone,verify:verify},function (data) { layer.close(windowId); layer.msg(data.result) },"JSON"); } </script>
</html>
定义一个专门用于排行榜的类，存储手机号，用户名，所拥有的快递数量：
package com.wangjiawei.bean;
/** * 2 * @Author: 小王同学 * 3 * @Date: 2020/10/14 9:17 * 4 用于显示懒人榜的类 */
public class LazyBoardUser implements Comparable<LazyBoardUser>{
private String userPhone;
private String userName;
private int expressNumber;
@Override
public int compareTo(LazyBoardUser lu){
// 先按照快递数量排序
int i = lu.getExpressNumber() - this.getExpressNumber();
if (i == 0){
return this.getUserName().compareTo(lu.getUserName());
}
return i;
}
// get，set等省略
}在数据库dao中添加按年和月查询快递的方法： 接口：
/** * 查询一年内所有快递 * @param userPhone * @return */
List<Express> findAllAmongYearByPhone(String userPhone);
/** * 查询一个月内所有快递 * @param userPhone * @return */
List<Express> findAllAmongMonthByPhone(String userPhone);实现类：
/** * 通过手机号查一年内的快递 */
public static final String SQL_FIND_BY_PHONE_YEAR = "SELECT * FROM EXPRESS WHERE USERPHONE=? AND YEAR(NOW())-YEAR(INTIME)<1";
/** * 通过手机号查一个月内的快递 */
public static final String SQL_FIND_BY_PHONE_MONTH = "SELECT * FROM EXPRESS WHERE USERPHONE=? AND MONTH(NOW())-MONTH(INTIME)<1";/** * 查询一年内所有快递 * * @param userPhone * @return */
@Override
public List<Express> findAllAmongYearByPhone(String userPhone) {
ArrayList<Express> data = new ArrayList<>();
Connection conn = DruidUtil.getConnection();
PreparedStatement state = null;
ResultSet result = null;
try {
state = conn.prepareStatement(SQL_FIND_BY_PHONE_YEAR);
state.setString(1, userPhone);
result = state.executeQuery();
while (result.next()){
int id = result.getInt("id");
String number = result.getString("number");
String username = result.getString("username");
String company = result.getString("company");
String code = result.getString("code");
Timestamp inTime = result.getTimestamp("inTime");
Timestamp outTime = result.getTimestamp("outTime");
int status = result.getInt("status");
String sysPhone = result.getString("sysPhone");
Express e = new Express(id, number, username, userPhone, company, code, inTime, outTime, status, sysPhone);
data.add(e);
}
}catch (SQLException throwables){
throwables.printStackTrace();
}finally {
DruidUtil.close(conn,state,result);
}
return data;
}
/** * 查询一个月内所有快递 * * @param userPhone * @return */
@Override
public List<Express> findAllAmongMonthByPhone(String userPhone) {
ArrayList<Express> data = new ArrayList<>();
Connection conn = DruidUtil.getConnection();
PreparedStatement state = null;
ResultSet result = null;
try {
state = conn.prepareStatement(SQL_FIND_BY_PHONE_MONTH);
state.setString(1, userPhone);
result = state.executeQuery();
while (result.next()){
int id = result.getInt("id");
String number = result.getString("number");
String username = result.getString("username");
String company = result.getString("company");
String code = result.getString("code");
Timestamp inTime = result.getTimestamp("inTime");
Timestamp outTime = result.getTimestamp("outTime");
int status = result.getInt("status");
String sysPhone = result.getString("sysPhone");
Express e = new Express(id, number, username, userPhone, company, code, inTime, outTime, status, sysPhone);
data.add(e);
}
}catch (SQLException throwables){
throwables.printStackTrace();
}finally {
DruidUtil.close(conn,state,result);
}
return data;
}service层中添加响应实现：
/** * 根据用户手机号查询一年内所有快递 * @param userPhone 手机号 * @return 查询的快递信息，手机号不存在时返回null */
public static List<Express> findAllAmongYearByPhone(String userPhone){
return dao.findAllAmongYearByPhone(userPhone);
}
/** * 根据用户手机号查询一个月内所有快递 * @param userPhone 手机号 * @return 查询的快递信息，手机号不存在时返回null */
public static List<Express> findAllAmongMonthByPhone(String userPhone){
return dao.findAllAmongMonthByPhone(userPhone);
}在wx/UserController中添加懒人排行榜总榜、年榜、月榜查询方法：
@ResponseBody("/wx/lazyboardTotal.do")
public String lazyboardTotal(HttpServletRequest request, HttpServletResponse response){
List<User> userList = UserService.findAll(false, 0, 0);
List<LazyBoardUser> result = new ArrayList<>();
for (User u : userList){
List<Express> byUserPhone = ExpressService.findByUserPhone(u.getUserPhone());
LazyBoardUser lu = new LazyBoardUser(u.getUserPhone(), u.getUserName(), byUserPhone.size());
result.add(lu);
}
Collections.sort(result);
Message msg = new Message();
if (!result.isEmpty()){
msg.setStatus(0);
msg.setResult("查询成功");
msg.setData(result);
}else{
msg.setStatus(-1);
msg.setResult("查询失败");
}
String json = JSONUtil.toJSON(msg);
return json;
}
@ResponseBody("/wx/lazyboardYear.do")
public String lazyboardYear(HttpServletRequest request, HttpServletResponse response){
List<User> userList = UserService.findAll(false, 0, 0);
List<LazyBoardUser> result = new ArrayList<>();
for (User u : userList){
List<Express> byUserPhone = ExpressService.findAllAmongYearByPhone(u.getUserPhone());
LazyBoardUser lu = new LazyBoardUser(u.getUserPhone(), u.getUserName(), byUserPhone.size());
result.add(lu);
}
Collections.sort(result);
Message msg = new Message();
if (!result.isEmpty()){
msg.setStatus(0);
msg.setResult("查询成功");
msg.setData(result);
}else{
msg.setStatus(-1);
msg.setResult("查询失败");
}
String json = JSONUtil.toJSON(msg);
return json;
}
@ResponseBody("/wx/lazyboardMonth.do")
public String lazyboardMonth(HttpServletRequest request, HttpServletResponse response){
List<User> userList = UserService.findAll(false, 0, 0);
List<LazyBoardUser> result = new ArrayList<>();
for (User u : userList){
List<Express> byUserPhone = ExpressService.findAllAmongMonthByPhone(u.getUserPhone());
LazyBoardUser lu = new LazyBoardUser(u.getUserPhone(), u.getUserName(), byUserPhone.size());
result.add(lu);
}
Collections.sort(result);
Message msg = new Message();
if (!result.isEmpty()){
msg.setStatus(0);
msg.setResult("查询成功");
msg.setData(result);
}else{
msg.setStatus(-1);
msg.setResult("查询失败");
}
String json = JSONUtil.toJSON(msg);
return json;
}前端界面lazyboard.html：
<!DOCTYPE html>
<html>
<head>
<title>e栈懒人排行 -- 快件e栈服务平台</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link href="css/normalize.css" type="text/css" rel="stylesheet" />
<link href="css/common.css" type="text/css" rel="stylesheet" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/notice.js" type="text/javascript"></script>
<script src="js/common.js" type="text/javascript"></script>
<script src="layer/layer.js"></script>
<style type="text/css"> .lazyboardCont{ width: 100%; overflow: hidden; } .lazyboardCont .lazyboardHead{ width: 100%; background-image: linear-gradient(to top, #424890, #f4f4f4); box-shadow: 0px 3px 5px #666666; } .lazyboardHead .lazyboardHeadTitle{ text-align: center; font-size: 16px; line-height: 30px; color: #fff; font-weight: bold; background: url(/wximages/sidaibg.png) no-repeat center center; background-size: cover; } .lazyboardCont .lazyboardHead .lazyboardRank{ width: 100%; margin-top: 10px; padding-bottom: 10px; overflow: hidden; } .lazyboardCont .lazyboardHead .lazyboardRank .ranknumDiv{ width: 32%; margin-left: 1%; padding: 10px 0px; float: left; position: relative; } .lazyboardHead .lazyboardRank .ranknumDiv .ranknum2{ width: 40%; margin: calc(50% - 40%) auto; border-radius: calc(50%); border: 2px solid #72d664; overflow: hidden; box-shadow: 0px 0px 3px #72d664; } .lazyboardHead .lazyboardRank .ranknumDiv .ranknum1{ width: 50%; margin: 0 auto calc(50% - 40%); border-radius: calc(50%); border: 2px solid #f8ca03; box-shadow: 0px 0px 3px #f8ca03; overflow: hidden; } .lazyboardHead .lazyboardRank .ranknumDiv .ranknum3{ width: 40%; margin: calc(50% - 40%) auto; border-radius: calc(50%); border: 2px solid #b66ff3; box-shadow: 0px 0px 3px #b66ff3; overflow: hidden; } .lazyboardHead .lazyboardRank .ranknumDiv .rankNum2Icon{ position: absolute; bottom: 30px; left: calc(50% - 15px); width: 30px; height: 30px; background: url(/wximages/ranknum2.png) no-repeat center center; background-size: 100%; } .lazyboardHead .lazyboardRank .ranknumDiv .rankNum1Icon{ position: absolute; bottom: 30px; left: calc(50% - 17px); width: 34px; height: 34px; background: url(wximages/ranknum1.png) no-repeat center center; background-size: 100%; } .lazyboardHead .lazyboardRank .ranknumDiv .rankNum3Icon{ position: absolute; bottom: 30px; left: calc(50% - 15px); width: 30px; height: 30px; background: url(wximages/ranknum3.png) no-repeat center center; background-size: 100%; } .lazyboardHead .lazyboardRank .ranknumDiv .rankNumName{ font-size: 12px; width: 90%; margin: 15px auto 0px; line-height: 20px; color: #fff; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .lazyboardCont .lazyboardNavCont{ width: 88%; margin: 30px auto 20px; overflow: hidden; border: 1px solid #4099eb; border-radius: 19px; box-shadow: 0px 0px 2px #888888; } .lazyboardCont .lazyboardNavCont .lazyboardNav{ width: 33.3%; line-height: 38px; float: left; text-align: center; color: #333333; font-size: 14px; font-weight: bold; } .lazyboardCont .lazyboardNavCont .lazyboardNavFocus{ background-image: linear-gradient(to top, #424890, #4099eb); color: #fff; } .boardRankScroll{ width: 300%; margin: 20px 0px; overflow: hidden; } .lazyboardCont .lazyboardRankCont{ width: calc(100% / 3); float: left; } .lazyboardCont .lazyboardRankCont .lazyboardRankDiv{ width: 96%; height: 52px; padding: 10px 2%; margin-top: 5px; overflow: hidden; background: #fff; border-top: #f4f4f4; border-bottom: #f4f4f4; box-shadow: 0px 0px 2px #e1e1e1; } .lazyboardRankCont .lazyboardRankDiv .lazyboardRankNumTxt{ width: 35px; padding-right:15px; line-height: 52px; text-align: center; font-size: 16px; font-weight: bolder; font-style: italic; float: left; color: #333333; } .lazyboardRankCont .lazyboardRankDiv .lazyboardRankIcon{ width: 50px; height: 50px; float: left; border: 2px solid #4099eb; border-radius: 25px; overflow: hidden; } .lazyboardRankCont .lazyboardRankDiv .lazyboardRankNameTxt{ width: calc(100% - 50px - 52px - 85px - 10px - 25px); color: #333333; padding-left: 10px; line-height: 52px; font-size: 14px; float: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .lazyboardRankCont .lazyboardRankDiv .lazyboardRankScore{ width: 95px; padding-right: 10px; line-height: 52px; font-size: 20px; font-weight: bolder; float: right; color: #4099eb; text-align: right; } .tab2,.tab3{ } </style>
</head>
<body>
<div class="content">
<div class="headerNav">
<div class="headerNavTop"><div class="headerNavIcon headerNavIconOut"><span></span><span></span></div></div>
<div class="headerNavCont">
<a href="./index.html">快递首页</a>
<a href="./userhome.html">个人中心</a>
<a href="./delivery.html">送货上门</a>
<!-- <a href="./sendexpress.html">我要寄件</a> --> <a href="./lazyboard.html">懒人排行</a>
<a href="./expassistant.html">快递助手</a>
</div>
</div>
<input id="PageContext" type="hidden" value="${pageContext.request.contextPath}" />
<div class="lazyboardCont">
<div class="lazyboardHead">
<div class="lazyboardHeadTitle">e栈懒人榜</div>
<div class="lazyboardRank">
<div class="ranknumDiv">
<div class="ranknum2">
<img src="images/userHeadImg.jpg" width="100%">
</div>
<div class="rankNum2Icon"></div>
<div class="rankNumName" id="rank2">苍井老师</div>
</div>
<div class="ranknumDiv">
<div class="ranknum1">
<img src="images/userHeadImg.jpg" width="100%">
</div>
<div class="rankNum1Icon"></div>
<div class="rankNumName" id="rank1">天海翼老师</div>
</div>
<div class="ranknumDiv">
<div class="ranknum3">
<img src="images/userHeadImg.jpg" width="100%">
</div>
<div class="rankNum3Icon"></div>
<div class="rankNumName" id="rank3">加藤老师</div>
</div>
</div>
</div>
<div class="lazyboardNavCont">
<div class="lazyboardNav lazyboardNavFocus">总排名</div>
<div class="lazyboardNav">年排名</div>
<div class="lazyboardNav">月排名</div>
</div>
<div class="boardRankScroll">
<div class="lazyboardRankCont tab1" id="tab1"></div>
<div class="lazyboardRankCont tab2" id="tab2"></div>
<div class="lazyboardRankCont tab3" id="tab3"></div>
</div>
</div>
</div>
<script type="text/javascript"> $(function() { $(".lazyboardNavCont .lazyboardNav").click(function(){ var windowW = $(window).width(); if (windowW > 600) { windowW = 600; } var indexnum = $(this).index(); var focusnum = $(".lazyboardNavCont .lazyboardNav").index($(".lazyboardNavFocus")); $(this).siblings().removeClass("lazyboardNavFocus"); $(this).addClass("lazyboardNavFocus"); if (indexnum != focusnum) { $(".boardRankScroll").stop(); switch(indexnum){ case 0 : $(".boardRankScroll").animate({ "margin-left": "0px"}); break; case 1 : $(".boardRankScroll").animate({ "margin-left": -windowW+"px"}); break; case 2 : $(".boardRankScroll").animate({ "margin-left": -windowW*2+"px"}); break; } } }); $.getJSON("/wx/lazyboardTotal.do",{ },function (data) { // { // "status": 0, // "result": "查询成功", // "data": [{ // "userPhone": "18373110779", // "userName": "王家尉", // "expressNumber": 9 // }, { // "userPhone": "13035455880", // "userName": "张三", // "expressNumber": 3 // }, { // "userPhone": "15371998972", // "userName": "顾一", // "expressNumber": 3 // }, { // "userPhone": "15837791921", // "userName": "李四", // "expressNumber": 2 // }, { // "userPhone": "13838438438", // "userName": "陈二", // "expressNumber": 2 // }, { // "userPhone": "15605183070", // "userName": "钱六", // "expressNumber": 0 // }] // } var lazyboardTotal = data.data; $("#rank1").text(lazyboardTotal[0].userName); $("#rank2").text(lazyboardTotal[1].userName); $("#rank3").text(lazyboardTotal[2].userName); for(var i = 0; i < lazyboardTotal.length; i ++){ var item = '<div class="lazyboardRankDiv">\n' + '\t\t\t\t\t\t\t<div class="lazyboardRankNumTxt">'+ (i+1) +'</div>\n' + '\t\t\t\t\t\t\t<div class="lazyboardRankIcon">\n' + '\t\t\t\t\t\t\t\t<img src="images/userHeadImg.jpg" width="100%">\n' + '\t\t\t\t\t\t\t</div>\n' + '\t\t\t\t\t\t\t<div class="lazyboardRankNameTxt">'+ lazyboardTotal[i].userName +'</div>\n' + '\t\t\t\t\t\t\t<div class="lazyboardRankScore">'+ lazyboardTotal[i].expressNumber +'</div>\n' + '\t\t\t\t\t\t</div>'; $("#tab1").append($(item)); } }); $.getJSON("/wx/lazyboardYear.do",{ },function (data) { var lazyboardYear = data.data; for(var i = 0; i < lazyboardYear.length; i ++){ var item = '<div class="lazyboardRankDiv">\n' + '\t\t\t\t\t\t\t<div class="lazyboardRankNumTxt">'+ (i+1) +'</div>\n' + '\t\t\t\t\t\t\t<div class="lazyboardRankIcon">\n' + '\t\t\t\t\t\t\t\t<img src="images/userHeadImg.jpg" width="100%">\n' + '\t\t\t\t\t\t\t</div>\n' + '\t\t\t\t\t\t\t<div class="lazyboardRankNameTxt">'+ lazyboardYear[i].userName +'</div>\n' + '\t\t\t\t\t\t\t<div class="lazyboardRankScore">'+ lazyboardYear[i].expressNumber +'</div>\n' + '\t\t\t\t\t\t</div>'; $("#tab2").append($(item)); } }); $.getJSON("/wx/lazyboardMonth.do",{ },function (data) { var lazyboardMonth = data.data; for(var i = 0; i < lazyboardMonth.length; i ++){ var item = '<div class="lazyboardRankDiv">\n' + '\t\t\t\t\t\t\t<div class="lazyboardRankNumTxt">'+ (i+1) +'</div>\n' + '\t\t\t\t\t\t\t<div class="lazyboardRankIcon">\n' + '\t\t\t\t\t\t\t\t<img src="images/userHeadImg.jpg" width="100%">\n' + '\t\t\t\t\t\t\t</div>\n' + '\t\t\t\t\t\t\t<div class="lazyboardRankNameTxt">'+ lazyboardMonth[i].userName +'</div>\n' + '\t\t\t\t\t\t\t<div class="lazyboardRankScore">'+ lazyboardMonth[i].expressNumber +'</div>\n' + '\t\t\t\t\t\t</div>'; $("#tab3").append($(item)); } }); }); </script>
</body>
</html>
我的思路是，当主页输入快递单号并查询时，调用后台根据单号查询是否有当前登录用户的对应的快递，有的话存入session中然后页面跳转至searchExpress.html页面，并调用后台从session中取出该快递，做对应显示。
主页index.html重点代码：
$("#submBtn").click(function () {
var expressNum = $("#expressNum").val();
console.log(expressNum);
if (expressNum == null || expressNum.length == 0){
alert("请输入快递单号")
}else{
$.post("/wx/searchExpress.do",{ expressNum:expressNum},function (data) {
});
window.location.href="/searchExpress.html";
}
});根据单号和手机号查询相应快递的方法/wx/searchExpress.do：
@ResponseBody("/wx/searchExpress.do")
public String searchExpress(HttpServletRequest request, HttpServletResponse response){
String expressNum = request.getParameter("expressNum");
Object wxUser = UserUtil.getWxUser(request.getSession());
String userPhone = "";
Message msg = new Message();
if (wxUser instanceof User){
userPhone = ((User) wxUser).getUserPhone();
}else if (wxUser instanceof Courier){
userPhone = ((Courier) wxUser).getCourierPhone();
}
Express express = ExpressService.findByNumber(expressNum);
System.out.println(express);
if (express != null && express.getUserPhone().equals(userPhone)){
HttpSession session = request.getSession();
session.setAttribute("searchExpress",express);
}
msg.setStatus(0);
msg.setResult("查询成功");
String json = JSONUtil.toJSON(msg);
return json;
}跳转到的页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<style type="text/css"> body{ margin: 0; padding: 0; background-color: #eeeeee; font-family: "楷体"; } .item{ margin: 20px; margin-bottom: 50px; } .imte_top{ text-align: center; } .imte_top>span{ font-size:14px; display: inline-block; padding: 5px 12px; background-color: #ddd; color:#fff; border-radius: 5px; } .item_content{ background-color: #fff; padding: 25px 15px; margin-top: 6px; } .item_content_top_1{ font-size: 24px; font-weight: bold; } .item_content_top_2{ color:#eee; font-size: 14px; margin: 5px 0px; } .item_content_top_3{ margin: 10px 0px; } .item_content_top_4{ margin: 10px 0px; } .item_content_bottom>a{ text-decoration: none; color:#33e; } </style>
</head>
<body>
<div id="status0Content" class="content"></div>
<div id="status1Content" class="content"></div>
</body>
<script src="js/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<script> $(function () { $.getJSON("/wx/findSearchExpress.do",null,function (data) { if (data == null){ alert("查询无结果") } var e = data.data; console.log(e.status); if (e.status == "待取件"){ // 未取件 var item = '<div class="item">\n' + '\t\t\t<div class="imte_top"><span>'+e.inTime+'</span></div>\n' + '\t\t\t<div class="item_content">\n' + '\t\t\t\t<div class="item_content_top">\n' + '\t\t\t\t\t<div class="item_content_top_1">取件通知</div>\n' + '\t\t\t\t\t<div class="item_content_top_2">'+e.inTime+'</div>\n' + '\t\t\t\t\t<div class="item_content_top_3">您有一个包裹到e栈了!</div>\n' + '\t\t\t\t\t<div class="item_content_top_4">\n' + '\t\t\t\t\t\t取件码:<span style="color:#05a">'+e.code+'</span><br>\n' + '\t\t\t\t\t\t快递公司:'+e.company+'<br>\n' + '\t\t\t\t\t\t运单号码:'+e.number+'<br>\n' + '\t\t\t\t\t\t站点电话:'+e.sysPhone+'<br>\n' + '\t\t\t\t\t</div>\n' + '\t\t\t\t</div>\n' + '\t\t\t\t<hr>\n' + '\t\t\t\t<div class="item_content_bottom">\n' + '\t\t\t\t\t<a href="/wx/createQRCode.do?type=express&code='+e.code+'">二维码</a>\n' + '\t\t\t\t</div>\n' + '\t\t\t</div>\n' + '\t\t</div>'; $("#status0Content").append($(item)); }else{ var item = '<div class="item">\n' + '\t\t\t<div class="imte_top"><span>'+ e.outTime +'</span></div>\n' + '\t\t\t<div class="item_content">\n' + '\t\t\t\t<div class="item_content_top">\n' + '\t\t\t\t\t<div class="item_content_top_1">取件成功通知</div>\n' + '\t\t\t\t\t<div class="item_content_top_2">'+ e.outTime +'</div>\n' + '\t\t\t\t\t<div class="item_content_top_3">您有一个包裹从e栈取出了!</div>\n' + '\t\t\t\t\t<div class="item_content_top_4">\n' + '\t\t\t\t\t\t快递公司:'+ e.company +'<br>\n' + '\t\t\t\t\t\t运单号码:'+ e.number +'<br>\n' + '\t\t\t\t\t\t站点电话:'+ e.sysPhone +'<br>\n' + '\t\t\t\t\t</div>\n' + '\t\t\t\t</div>\n' + '\t\t\t\t<hr>\n' + '\t\t\t\t<div class="item_content_bottom">\n' + '\t\t\t\t\t<a href="#">有疑问 ? 点了也没用</a>\n' + '\t\t\t\t</div>\n' + '\t\t\t</div>\n' + '\t\t</div>'; $("#status1Content").append($(item)); } }); }); </script>
</html>从session中取出待查询快递的方法：
@ResponseBody("/wx/findSearchExpress.do")
public String findSearchExpress(HttpServletRequest request, HttpServletResponse response){
Express e = (Express)request.getSession().getAttribute("searchExpress");
Message msg = new Message();
if (e != null){
int status = e.getStatus();
String inTime = DateFormatUtil.format(e.getInTime());
String outTime = e.getOutTime()==null?"未出库":DateFormatUtil.format(e.getOutTime());
String statusStr = status == 0 ? "待取件":"已取件";
String code = e.getCode()==null ? "已取件":e.getCode();
BootStrapTableExpress e2 = new BootStrapTableExpress(e.getId(),e.getNumber(),e.getUsername(),e.getUserPhone(),e.getCompany(),code,inTime,outTime,statusStr,e.getSysPhone());
msg.setStatus(0);
msg.setResult("查询成功");
msg.setData(e2);
}else {
msg.setStatus(-1);
msg.setResult("查询失败");
}
String json = JSONUtil.toJSON(msg);
return json;
}本文为互联网自动采集或经作者授权后发布，本文观点不代表立场，若侵权下架请联系我们删帖处理！文章出自：https://wangjiawei.blog.csdn.net/article/details/109104650