JavaWeb综合项目——快递e栈（微信前端部分）（一）-阿里云开发者社区

1 短信登录和退出登录

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 快递列表

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>

3 二维码展示

在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>

JavaWeb综合项目——快递e栈（微信前端部分）（一）

1 短信登录和退出登录

1.1 申请新的短信模板

1.2 短信登录，退出登录

2 快递列表

2.1 使用流（stream）来处理List

2.2 创建登录权限验证过滤器

2.3 微信端快递管理器

3 二维码展示

3.1 二维码相关的controller

3.2 前端代码

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

JavaWeb综合项目——快递e栈（微信前端部分）（一）

1 短信登录和退出登录

1.1 申请新的短信模板

1.2 短信登录，退出登录

2 快递列表

2.1 使用流（stream）来处理List

2.2 创建登录权限验证过滤器

2.3 微信端快递管理器

3 二维码展示

3.1 二维码相关的controller

3.2 前端代码

热门文章

最新文章

相关课程

相关电子书

相关实验场景