7 快递员录入快递
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>
8 个人中心-昵称显示与修改
8.1 昵称显示
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>
9 懒人排行榜
定义一个专门用于排行榜的类，存储手机号，用户名，所拥有的快递数量：
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>
10 主页查询快递单号
我的思路是，当主页输入快递单号并查询时，调用后台根据单号查询是否有当前登录用户的对应的快递，有的话存入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; }
