JavaWeb综合项目——快递e栈（后台部分）（三）-阿里云开发者社区

11 阿里云短信集成

创建SMSUtil：

package com.wangjiawei.util;
import com.aliyuncs.CommonRequest;
import com.aliyuncs.CommonResponse;
import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.IAcsClient;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.exceptions.ServerException;
import com.aliyuncs.http.MethodType;
import com.aliyuncs.profile.DefaultProfile;
import com.google.gson.Gson;
import java.util.HashMap;
/**
 * 2 * @Author: 小王同学
 * 3 * @Date: 2020/10/5 11:19
 * 4
 */
public class SMSUtil {
    public static boolean send(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_204115757");
        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;
    }
}

把发送短信的功能集成到ExpressService的insert方法中：

public static boolean insert(Express e) {
    // 生成取件码
    e.setCode(RandomUtil.getCode() + "");
    try {
        boolean flag =  dao.insert(e);
        if (flag){
            // 录入成功，发送短信
            SMSUtil.send(e.getUserPhone(), e.getCode());
        }
        return flag;
    } catch (DuplicateCodeException duplicateCodeException) {
        // 取件码重复
        return insert(e);
    }
}

12 控制台部分

12.1 管理器

12.1.1 快递管理器 ExpressController

package com.wangjiawei.controller;
import com.wangjiawei.bean.Express;
import com.wangjiawei.bean.Message;
import com.wangjiawei.mvc.ResponseBody;
import com.wangjiawei.service.ExpressService;
import com.wangjiawei.util.JSONUtil;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.List;
import java.util.Map;
/**
 * 2 * @Author: 小王同学
 * 3 * @Date: 2020/10/5 12:38
 * 4
 */
public class ExpressController {
    @ResponseBody("/express/console.do")
    public String console(HttpServletRequest request, HttpServletResponse response){
        List<Map<String, Integer>> data = ExpressService.console();
        Message msg = new Message();
        if (data.size() == 0){
            msg.setStatus(-1);
        }else {
            msg.setStatus(0);
        }
        msg.setData(data);
        String json = JSONUtil.toJSON(msg);
        return json;
    }
}

12.1.2 快递员管理器CourierController

package com.wangjiawei.controller;
import com.wangjiawei.bean.Message;
import com.wangjiawei.mvc.ResponseBody;
import com.wangjiawei.service.CourierService;
import com.wangjiawei.service.ExpressService;
import com.wangjiawei.util.JSONUtil;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.List;
import java.util.Map;
/**
 * 2 * @Author: 小王同学
 * 3 * @Date: 2020/10/8 18:40
 * 4
 */
public class CourierController {
    @ResponseBody("/courier/console.do")
    public String console(HttpServletRequest request, HttpServletResponse response){
        List<Map<String, Integer>> data = CourierService.console();
        Message msg = new Message();
        if (data.size() == 0){
            msg.setStatus(-1);
        }else {
            msg.setStatus(0);
        }
        msg.setData(data);
        String json = JSONUtil.toJSON(msg);
        return json;
    }  
}

12.1.3 用户管理器

package com.wangjiawei.controller;
import com.wangjiawei.bean.Message;
import com.wangjiawei.mvc.ResponseBody;
import com.wangjiawei.service.CourierService;
import com.wangjiawei.service.UserService;
import com.wangjiawei.util.JSONUtil;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.List;
import java.util.Map;
/**
 * 2 * @Author: 小王同学
 * 3 * @Date: 2020/10/9 14:07
 * 4
 */
public class UserController {
    @ResponseBody("/user/console.do")
    public String console(HttpServletRequest request, HttpServletResponse response){
        List<Map<String, Integer>> data = UserService.console();
        Message msg = new Message();
        if (data.size() == 0){
            msg.setStatus(-1);
        }else {
            msg.setStatus(0);
        }
        msg.setData(data);
        String json = JSONUtil.toJSON(msg);
        return json;
    }
}

12.2 对应的前端代码admin/views/user/console.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../assets/css/layui.css">
    <link rel="stylesheet" href="../assets/css/view.css"/>
    <script src="../assets/echarts.min.js"></script>
    <script src="../../qrcode/jquery2.1.4.js"></script>
    <title></title>
</head>
<body class="layui-view-body">
    <div class="layui-content">
        <div class="layui-row layui-col-space20">
            <div class="layui-col-sm6 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-body chart-card">
                        <div class="chart-header">
                            <div class="metawrap">
                                <div class="meta">
                                    <span>用户人数</span>
                                </div>
                                <div id="user_size" class="total">-</div>
                            </div>
                        </div>
                        <div class="chart-body">
                            <div class="contentwrap">
                            </div>
                        </div>
                        <div class="chart-footer">
                            <div class="field">
                                <span>日注册量</span>
                                <span id="user_day">-</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-body chart-card">
                        <div class="chart-header">
                            <div class="metawrap">
                                <div class="meta">
                                    <span>快递员人数</span>
                                </div>
                                <div id="courier_size" class="total">-</div>
                            </div>
                        </div>
                        <div class="chart-body">
                            <div class="contentwrap">
                            </div>
                        </div>
                        <div class="chart-footer">
                            <div class="field">
                                <span>日注册量</span>
                                <span id="courier_day">-</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-body chart-card">
                        <div class="chart-header">
                            <div class="metawrap">
                                <div class="meta">
                                    <span>总快件数</span>
                                </div>
                                <div id="data1_size" class="total">-</div>
                            </div>
                        </div>
                        <div class="chart-body">
                            <div class="contentwrap">
                            </div>
                        </div>
                        <div class="chart-footer">
                            <div class="field">
                                <span>日派单量</span>
                                <span id="data1_day">-</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-body chart-card">
                        <div class="chart-header">
                            <div class="metawrap">
                                <div class="meta">
                                    <span>待取件数</span>
                                </div>
                                <div id="data2_size" class="total">-</div>
                            </div>
                        </div>
                        <div class="chart-body">
                            <div class="contentwrap">
                            </div>
                        </div>
                        <div class="chart-footer">
                            <div class="field">
                                <span>新增数量</span>
                                <span id="data2_day">-</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md12">
                <div class="layui-card">
                    <div class="layui-tab layui-tab-brief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">实时快件区域分布图</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                               <iframe src="map.html" style="width:100%;height:600px;"></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../assets/layui.all.js"></script>
    <script>
     var element = layui.element;
    </script>
    <script>
        $(function () {
            //1.    ajax与服务器交互
            // 地址最左边的斜杠表示从根目录开始的路径
            $.post("/express/console.do",null,function(data){
                if (data.status == 0){
                    // [{size:总数, day:新增},{size:总数, day:新增}]
                    $("#data1_size").html(data.data[0].data1_size);
                    $("#data1_day").html(data.data[0].data1_day);
                    $("#data2_size").html(data.data[1].data2_size);
                    $("#data2_day").html(data.data[1].data2_day);
                }
            },"JSON");
            $.post("/courier/console.do",null,function (data) {
                $("#courier_size").html(data.data[0].data_size);
                $("#courier_day").html(data.data[0].data_day);
            },"JSON");
            $.post("/user/console.do",null,function (data) {
                $("#user_size").html(data.data[0].data_size);
                $("#user_day").html(data.data[0].data_day);
            },"JSON");
        });
    </script>
</body>
</html>

13 分页列表

13.1 快递列表

存储分页相关数据的类：（可以被bootstrap-table识别）

package com.wangjiawei.bean;
import java.util.ArrayList;
import java.util.List;
/**
 * 2 * @Author: 小王同学
 * 3 * @Date: 2020/10/5 19:55
 * 4
 */
public class ResultData<T> {
    /**
     * 每次查询的数据集合
      */
    private List<T> rows = new ArrayList<>();
    /**
     * 总数量
     */
    private int total;
    public List<T> getRows() {
        return rows;
    }
    public void setRows(List<T> rows) {
        this.rows = rows;
    }
    public int getTotal() {
        return total;
    }
    public void setTotal(int total) {
        this.total = total;
    }
}

相应的ExpressController中添加list方法，用于分页查询：

@ResponseBody("/express/list.do")
public String list(HttpServletRequest request, HttpServletResponse response){
    // 获取查询数据的起始索引值
    int offset = Integer.parseInt(request.getParameter("offset"));
    // 获取当前页要查询的数据量
    int pageNumber = Integer.parseInt(request.getParameter("pageNumber"));
    // 查询
    List<Express> list = ExpressService.findAll(true, offset, pageNumber);
    List<Map<String, Integer>> console = ExpressService.console();
    Integer total = console.get(0).get("data1_size");
    // 将集合封装为 bootstrap-table识别的格式
    ResultData<Express> data = new ResultData<>();
    data.setRows(list);
    data.setTotal(total);
    String json = JSONUtil.toJSON(data);
    return json;
}

在前端配置bootsrtap来自动实现分页：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
      <link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/list.css"/>
      <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.css" rel="stylesheet">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.js"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/locale/bootstrap-table-zh-CN.min.js"></script>
   </head>
   <body>
      <table id="express_list"></table>
      <script>
         $(function () {
            $("#express_list").bootstrapTable({
               url:"/express/list.do",    // 数据地址
               striped:true,  // 是否显示行的间隔
               pageNumber:1,  // 初始化加载第几页
               pagination:true,   // 是否分页
               sidePagination:'server',
               pageSize:5,
               pageList:[5,10,20],    // 允许选择的每页显示条目数
               showRefresh:true,  // 显示刷新按钮
               queryParams:function(params){  // 给服务器发参数
                  var temp = {
                     offset:params.offset,
                     pageNumber:params.limit
                  };
                  return temp;
               },
               columns:[  // 配置有哪些列
                  {
                     title:"编号",
                     field:"id",
                     sortable:false
                  },
                  {
                     title:"单号",
                     field:"number",
                     sortable:false
                  },
                  {
                     title:"姓名",
                     field:"username",
                     sortable:false
                  },
                  {
                     title:"电话",
                     field:"userPhone",
                     sortable:false
                  },
                  {
                     title:"快递公司",
                     field:"company",
                     sortable:false
                  },
                  {
                     title:"取件码",
                     field:"code",
                     sortable:false
                  },
                  {
                     title:"入库时间",
                     field:"inTime",
                     sortable:false
                  },
                  {
                     title:"出库时间",
                     field:"outTime",
                     sortable:false
                  },
                  {
                     title:"状态",
                     field:"status",
                     sortable:false
                  },
                  {
                     title:"录入人电话",
                     field:"sysPhone",
                     sortable:false
                  }
               ]
            });
         });
      </script>
   </body>
</html>

展示效果如下：

为了使得入库时间和出库时间以及状态显示变得更易懂，单独创建一个快递类用于分页显示，这个快递类的不同之处在于这三个变量改为字符串形式：

package com.wangjiawei.bean;
import java.sql.Timestamp;
/**
 * 2 * @Author: 小王同学
 * 3 * @Date: 2020/10/6 10:36
 * 4
 */
public class BootStrapTableExpress {
    private int id;
    private String number;
    private String username;
    private String userPhone;
    private String company;
    private String code;
    private String inTime;
    private String outTime;
    private String status;
    private String sysPhone;
    // 构造方法，set，get省略
}

创建完成新类之后，改写ExpressController中的list方法：

@ResponseBody("/express/list.do")
public String list(HttpServletRequest request, HttpServletResponse response){
    // 获取查询数据的起始索引值
    int offset = Integer.parseInt(request.getParameter("offset"));
    // 获取当前页要查询的数据量
    int pageNumber = Integer.parseInt(request.getParameter("pageNumber"));
    // 查询
    List<Express> list = ExpressService.findAll(true, offset, pageNumber);
    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);
    }
    List<Map<String, Integer>> console = ExpressService.console();
    Integer total = console.get(0).get("data1_size");
    // 将集合封装为 bootstrap-table识别的格式
    ResultData<BootStrapTableExpress> data = new ResultData<>();
    data.setRows(list2);
    data.setTotal(total);
    String json = JSONUtil.toJSON(data);
    return json;
}

13.2 快递员列表

定义专门用于网页展示的类：

package com.wangjiawei.bean;
import java.sql.Timestamp;
/**
 * 2 * @Author: 小王同学
 * 3 * @Date: 2020/10/8 19:54
 * 4
 */
public class BootStrapTableCourier {
    private int id;
    private String courierName;
    private String courierPhone;
    private String courierIdNumber;
    private String courierPassword;
    private String courierSendNumber;
    private String enrollTime;
    private String loginTime;
    // 构造方法，set，get省略
}

快递员控制器CourierController中添加list方法：

@ResponseBody("/courier/list.do")
public String list(HttpServletRequest request, HttpServletResponse response){
    int offset = Integer.parseInt(request.getParameter("offset"));
    // 获取当前页要查询的数据量
    int pageNumber = Integer.parseInt(request.getParameter("pageNumber"));
    List<Courier> list = CourierService.findAll(true, offset, pageNumber);
    List<BootStrapTableCourier> list2 = new ArrayList<>();
    for (Courier c : list){
        String enrollTime = DateFormatUtil.format(c.getEnrollTime());
        String loginTime = c.getLoginTime()==null?"未登录":DateFormatUtil.format(c.getLoginTime());
        String sendNumber = null;
        int courierSendNumber = c.getCourierSendNumber();
        if (courierSendNumber <= 10000){
            sendNumber = courierSendNumber + "";
        }else{
            sendNumber = courierSendNumber/10000 + "w+";
        }
        BootStrapTableCourier c2 = new BootStrapTableCourier(c.getId(),c.getCourierName(),c.getCourierPhone(),"******",c.getCourierPassword(),sendNumber,enrollTime,loginTime);
        list2.add(c2);
    }
    List<Map<String, Integer>> console = CourierService.console();
    Integer total = console.get(0).get("data_size");
    ResultData<BootStrapTableCourier> data = new ResultData<>();
    data.setRows(list2);
    data.setTotal(total);
    String json = JSONUtil.toJSON(data);
    return json;
}

对应的前端代码list.html：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
      <link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/list.css"/>
      <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.css" rel="stylesheet">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.js"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/locale/bootstrap-table-zh-CN.min.js"></script>
   </head>
   <body>
   <table id="courier_list"></table>
   <script>
      $(function () {
         $("#courier_list").bootstrapTable({
            url:"/courier/list.do",
            striped:true,  // 是否显示行的间隔
            pageNumber:1,  // 初始化加载第几页
            pagination:true,   // 是否分页
            sidePagination:'server',
            pageSize:5,
            pageList:[5,10,20],    // 允许选择的每页显示条目数
            showRefresh:true,  // 显示刷新按钮
            queryParams: function (params) {   // 给服务器发参数
               var temp = {
                  offset:params.offset,
                  pageNumber:params.limit
               };
               return temp;
            },
            columns:[  // 配置有哪些列
               {
                  title:"编号",
                  field:"id"
               },
               {
                  title:"姓名",
                  field:"courierName"
               },
               {
                  title:"手机号码",
                  field:"courierPhone"
               },
               {
                  title:"身份证",
                  field:"courierIdNumber"
               },
               {
                  title:"密码",
                  field:"courierPassword"
               },
               {
                  title:"派件数",
                  field:"courierSendNumber"
               },
               {
                  title:"注册时间",
                  field:"enrollTime"
               },
               {
                  title:"上次登录时间",
                  field:"loginTime"
               }
            ]
         });
      });
   </script>
   </body>
</html>

13.3 用户列表

定义专门用于网页展示的类：

public class BootStrapTableUser {
    private int id;
    private String userName;
    private String userPhone;
    private String userIdNumber;
    private String userPassword;
    private String enrollTime;
    private String loginTime;
    // 构造方法，set，get省略
}

用户控制器UserController中添加list方法：

@ResponseBody("/user/list.do")
public String list(HttpServletRequest request, HttpServletResponse response){
    // 获取查询数据的起始索引值
    int offset = Integer.parseInt(request.getParameter("offset"));
    // 获取当前页要查询的数据量
    int pageNumber = Integer.parseInt(request.getParameter("pageNumber"));
    // 查询
    List<User> list = UserService.findAll(true, offset, pageNumber);
    List<BootStrapTableUser> list2 = new ArrayList<>();
    for(User u : list){
        String enrollTime = DateFormatUtil.format(u.getEnrollTime());
        String loginTime = u.getLoginTime()==null?"未登录":DateFormatUtil.format(u.getLoginTime());
        BootStrapTableUser u2 = new BootStrapTableUser(u.getId(),u.getUserName(),u.getUserPhone(),u.getUserIdNumber(),"******",enrollTime,loginTime);
        list2.add(u2);
    }
    List<Map<String, Integer>> console = UserService.console();
    Integer total = console.get(0).get("data_size");
    // 将集合封装为 bootstrap-table识别的格式
    ResultData<BootStrapTableUser> data = new ResultData<>();
    data.setRows(list2);
    data.setTotal(total);
    String json = JSONUtil.toJSON(data);
    return json;
}

对应的前端代码 list.html：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
      <link rel="stylesheet" type="text/css" href="../../../../css/reset.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/list.css"/>
      <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.css" rel="stylesheet">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.js"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/locale/bootstrap-table-zh-CN.min.js"></script>
   </head>
   <body>
      <table id="user_list"></table>
      <script>
         $(function () {
            $("#user_list").bootstrapTable({
               url:"/user/list.do",    // 数据地址
               striped:true,  // 是否显示行的间隔
               pageNumber:1,  // 初始化加载第几页
               pagination:true,   // 是否分页
               sidePagination:'server',
               pageSize:5,
               pageList:[5,10,20],    // 允许选择的每页显示条目数
               showRefresh:true,  // 显示刷新按钮
               queryParams:function(params){  // 给服务器发参数
                  var temp = {
                     offset:params.offset,
                     pageNumber:params.limit
                  };
                  return temp;
               },
               columns:[  // 配置有哪些列
                  {
                     title:"编号",
                     field:"id",
                  },
                  {
                     title:"昵称",
                     field:"userName",
                  },
                  {
                     title:"手机号码",
                     field:"userPhone",
                  },
                  {
                     title:"密码",
                     field:"userPassword",
                  },
                  {
                     title:"注册时间",
                     field:"enrollTime",
                  },
                  {
                     title:"登录时间",
                     field:"loginTime",
                  }
               ]
            });
         });
      </script>
   </body>
</html>

14 增删改查

14.1 快递相关

14.1.1 快递录入

express/add.html

前端页面向后台传入number，company，username，userPhone

新建工具类，根据session获取当前管理员的用户名与手机号：

package com.wangjiawei.util;
import javax.servlet.http.HttpSession;
/**
 * 2 * @Author: 小王同学
 * 3 * @Date: 2020/10/6 11:32
 * 4
 */
public class UserUtil {
    public static String getUserName(HttpSession session){
        return "";
    }
    public static String getUserPhone(HttpSession session){
        // TODO: 还没有编写柜子端，未存储任何录入人信息
        return "";
    }
}

ExpressController中添加insert方法：

@ResponseBody("/express/insert.do")
public String insert(HttpServletRequest request, HttpServletResponse response){
    String number = request.getParameter("number");
    String company = request.getParameter("company");
    String username = request.getParameter("username");
    String userPhone = request.getParameter("userPhone");
    Express e = new Express(number, username, userPhone, company, UserUtil.getUserPhone(request.getSession()));
    boolean flag = ExpressService.insert(e);
    Message msg = new Message();
    if (flag){
        msg.setStatus(0);
        msg.setResult("快递录入成功");
    }else{
        msg.setStatus(-1);
        msg.setResult("快递录入失败");
    }
    String json = JSONUtil.toJSON(msg);
    return json;
}

对应的前端代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../assets/css/layui.css">
    <link rel="stylesheet" href="../../assets/css/view.css"/>
    <title></title>
</head>
<body class="layui-view-body">
    <div class="layui-content">
        <div class="layui-row">
            <div class="layui-card">
                <div class="layui-card-header">录入快件</div>
                <form id="form" class="layui-form layui-card-body">
                  <div class="layui-form-item">
                    <label class="layui-form-label">单号</label>
                    <div class="layui-input-block">
                      <input type="text" name="code" required  lay-verify="required" placeholder="请输入快递单号" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">快递公司</label>
                    <div class="layui-input-block">
                      <select name="company" lay-verify="" lay-search>
                  <option >安能快递</option><option >安能物流</option><option >澳大利亚邮政</option><option >阿根廷邮政</option><option >爱沙尼亚邮政</option><option >阿联酋邮政</option><option >奥地利邮政</option><option >阿尔巴尼亚邮政</option><option >Aramex</option><option >巴西邮政</option><option >比利时邮政</option><option >百世快运</option><option >波兰邮政</option><option >白俄罗斯邮政</option><option >保加利亚邮政</option><option >巴基斯坦邮政</option><option >百福东方</option><option >包裹信件</option><option >晟邦物流</option><option >城市100</option><option >City-Link</option><option >COE</option><option >传喜物流</option><option >德邦快递</option><option >大田物流</option><option >递四方</option><option >DHL德国</option><option >DHL全球</option><option >DHL中国</option><option >EMS</option><option >EMS国际</option><option >EMS经济快递</option><option >FedEx中国</option><option >FedEx国际</option><option >FedEx美国</option><option >飞豹快递</option><option >凡宇快递</option><option >飞远配送</option><option >飞远(爱彼西)</option><option >法国邮政</option><option >芬兰邮政</option><option >国通快递</option><option >postco</option><option >百世快递</option><option >恒路物流</option><option >黄马甲配送</option><option >黑猫宅急便</option><option >华企快运</option><option >韩国邮政</option><option >佳吉快运</option><option >京东快递</option><option >佳怡物流</option><option "jinguangsudikuaijian">京广速递</option><option >日本邮政</option><option >筋斗云物流</option><option >捷克邮政</option><option >嘉里大通</option><option >加运美</option><option >快捷快递</option><option >跨越速运</option><option >克罗地亚邮政</option><option >联昊通</option><option >龙邦速递</option><option >黎巴嫩邮政</option><option >民航快递</option><option >秘鲁邮政</option><option >毛里求斯邮政</option><option >马耳他邮政</option><option >摩尔多瓦邮政</option><option >马其顿邮政</option><option >民邦快递</option><option "szml56">明亮物流</option><option >挪威邮政</option><option >南非邮政</option><option >OnTrac</option><option >葡萄牙邮政</option><option >全峰快递</option><option >全一快递</option><option >如风达</option><option >申通快递</option><option selected="selected">顺丰速运</option><option >速尔快递</option><option >盛丰物流</option><option >圣安物流</option><option >盛辉物流</option><option >瑞士邮政</option><option >苏宁快递</option><option >斯洛伐克邮政</option><option >沙特邮政</option><option >斯洛文尼亚邮政</option><option >塞尔维亚邮政</option><option >天天快递</option><option >天地华宇</option><option >土耳其邮政</option><option >泰国邮政</option><option >TNT</option><option >UPS</option><option >USPS</option><option >万象物流</option><option >乌克兰邮政</option><option >万家物流</option><option >信丰物流</option><option >新邦物流</option><option >西班牙邮政</option><option >匈牙利邮政</option><option >圆通速递</option><option >韵达快递</option><option >优速物流</option><option >银捷速递</option><option >远成物流</option><option >运通中港快递</option><option >邮政国内小包</option><option >英国皇家邮政</option><option >意大利邮政</option><option >印度邮政</option><option >亚美尼亚邮政</option><option >越丰物流</option><option >亚风速递</option><option >邮政国际包裹</option><option >中通快递</option><option >宅急送</option><option >中铁物流</option><option >增益速递</option><option >中铁快运</option><option >芝麻开门</option><option >中国邮政</option><option >智利邮政</option><option >中速快递</option>
               </select>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">收件人姓名</label>
                    <div class="layui-input-block">
                      <input type="text" name="username" required  lay-verify="required" placeholder="请输入收货人姓名" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">手机号码</label>
                    <div class="layui-input-block">
                      <input type="text" name="phonenumber" required  lay-verify="required" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <div class="layui-input-block">
                      <button class="layui-btn layui-btn-blue" lay-submit lay-filter="formDemo">立即提交</button>
                      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                  </div>
                </form>  
            </div>
        </div>
    </div>
    <script src="../../assets/layui.all.js"></script>
    <script src="/qrcode/jquery2.1.4.js"></script>
    <script src="/layer/layer.js"></script>
    <script>
      var form = layui.form
        ,layer = layui.layer;
    </script>
    <script>
        $(function () {
            $("#form").submit(function () {
                var windowId = layer.load();
                var number = $("input:eq(0)").val();
                var company = $("input:eq(1)").val();
                var username = $("input:eq(2)").val();
                var userPhone = $("input:eq(3)").val();
                $.post("/express/insert.do",{
                    number:number,
                    company:company,
                    username:username,
                    userPhone:userPhone
                }, function (data) {
                    layer.close(windowId);
                    layer.msg(data.result);
                    if (data.status == 0){
                        // 录入成功，恢复默认
                        $("input").val("");
                        $("input:eq(1)").val("顺丰速运");
                    }else{
                        // 录入失败
                    }
                });
                return false;
            });
        });
    </script>
</body>
</html>

14.1.2 删除和修改

删除和修改之前，要先根据快递单号查询出来这个快递，再进行相应的操作。

查询相关的ExpressController中的方法find：

@ResponseBody("/express/find.do")
public String find(HttpServletRequest request, HttpServletResponse response){
    String number = request.getParameter("number");
    Express e = ExpressService.findByNumber(number);
    Message msg = new Message();
    if (e == null){
        msg.setStatus(-1);
        msg.setResult("单号不存在");
    }else {
        msg.setStatus(0);
        msg.setResult("查询成功");
        msg.setData(e);
    }
    String json = JSONUtil.toJSON(msg);
    return json;
}

更新相关的ExpressController中的方法update：

@ResponseBody("/express/update.do")
public String update(HttpServletRequest request, HttpServletResponse response){
    int id = Integer.parseInt(request.getParameter("id"));
    String number = request.getParameter("number");
    String company = request.getParameter("company");
    String username = request.getParameter("username");
    String userPhone = request.getParameter("userPhone");
    int status = Integer.parseInt(request.getParameter("status"));
    Express newExpress = new Express();
    newExpress.setNumber(number);
    newExpress.setCompany(company);
    newExpress.setUsername(username);
    newExpress.setUserPhone(userPhone);
    newExpress.setStatus(status);
    Message msg = new Message();
    boolean flag = ExpressService.update(id, newExpress);
    if (flag){
        msg.setStatus(0);
        msg.setResult("修改成功");
    }else {
        msg.setStatus(-1);
        msg.setResult("修改失败");
    }
    String json = JSONUtil.toJSON(msg);
    return json;
}

删除相关的ExpressController中的方法delete：

@ResponseBody("/express/delete.do")
public String delete(HttpServletRequest request, HttpServletResponse response){
    int id = Integer.parseInt(request.getParameter("id"));
    boolean flag = ExpressService.delete(id);
    Message msg = new Message();
    if (flag){
        msg.setStatus(0);
        msg.setResult("删除成功");
    }else {
        msg.setStatus(-1);
        msg.setResult("删除失败");
    }
    String json = JSONUtil.toJSON(msg);
    return json;
}

更新界面update.html：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
      <link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/add.css"/>
      <style>
         .layui-layer-content{
            color: #fff;
         }
      </style>
   </head>
   <body>
      <div id="app">
         <div class="header">
            <span>修改快递信息</span>
         </div>
         <div class="content">
            <table>    
               <tr>
                  <td class="text-right">运单号</td><td class="content_right"><input id="number" class="input inline-input" placeholder="请输入运单号码"> <span id="find" class="btn btn-info">立即查找</span></td>
               </tr>
            </table>
         </div>
         <div class="header">
            <span>查找信息如下</span>
         </div>
         <div class="content">
            <table>
               <tr>
                  <td class="text-right">快递单号</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
               </tr>
               <tr>
                  <td class="text-right">快递公司</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
               </tr>
               <tr>
                  <td class="text-right">收货人姓名</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
               </tr>
               <tr>
                  <td class="text-right">手机号码</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
               </tr>
               <tr>
                  <td class="text-right">快递状态</td><td class="content_right"><input type="radio" name="status" class="status" value="1">已签收  <input name="status" type="radio" class="status" value="0">未签收</td>
               </tr>
               <tr>
                  <td></td><td class="content_right"><span id="update" class="btn btn-info">立即修改</span> <span class="btn">重置</span> </td>
               </tr>
            </table>
         </div>
      </div>
   </body>
   <script src="/qrcode/jquery2.1.4.js"></script>
   <script src="/layer/layer.js"></script>
   <script>
      $(".header:eq(1), .content:eq(1)").hide();
      var expressId = null;
      var g_userPhone = null;
      $(function () {
         $("#find").click(function () {
            var windowId = layer.load();
            var number = $("#number").val();
            $.getJSON("/express/find.do",{number:number},function (data) {
               layer.close(windowId);
               // {
               //     "status": 0,
               //        "result": "查询成功",
               //        "data": {
               //           "id": 2,
               //                 "number": "124",
               //                 "username": "张三",
               //                 "userPhone": "13843838438",
               //                 "company": "京东快递",
               //                 "code": "213456",
               //                 "inTime": "Oct 3, 2020 2:34:30 PM",
               //                 "status": 0,
               //                 "sysPhone": "18888888888"
               //        }
               // }
               layer.msg(data.result);
               if (data.status == 0){
                  // 淡入效果
                  $(".header:eq(1), .content:eq(1)").fadeIn(1000);
                  expressId = data.data.id;
                  g_userPhone = data.data.userPhone;
                  $("input:eq(1)").val(data.data.number);
                  $("input:eq(2)").val(data.data.company);
                  $("input:eq(3)").val(data.data.username);
                  $("input:eq(4)").val(data.data.userPhone);
                  if (data.data.status == 0){
                     // 未签收
                     $(".status:eq(1)").prop("checked", true);
                  }else {
                     // 已签收
                     $(".status:eq(0)").prop("checked", true);
                  }
               }
            });
         });
         $("#update").click(function () {
            var windowId = layer.load();
            var number = $("input:eq(1)").val();
            var company = $("input:eq(2)").val();
            var username = $("input:eq(3)").val();
            var userPhone = $("input:eq(4)").val();
            var status = $(".status:checked").val();
            var express = {
               id:expressId,
               number:number,
               company:company,
               username:username,
               status:status
            };
            if (userPhone != g_userPhone){
               express.userPhone = userPhone;
            }
            console.log(express);
            $.getJSON("/express/update.do",express,function (data) {
               layer.close(windowId);
               layer.msg(data.result);
               if (data.status == 0){
                  // 修改成功
                  $(".header:eq(1), .content:eq(1)").hide();
               }
            });
         });
      });
   </script>
</html>

删除界面delete.html：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
      <link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/add.css"/>
      <style>
         /*单独设置弹窗字体颜色使其显示*/
         .layui-layer-content{
            color: #fff;
         }
      </style>
   </head>
   <body>
      <div id="app">
         <div class="header">
            <span>删除快递信息</span>
         </div>
         <div class="content">
            <table>    
               <tr>
                  <td class="text-right">运单号</td><td class="content_right"><input id="number" class="input inline-input" placeholder="请输入运单号码"> <span id="find" class="btn btn-info">立即查找</span></td>
               </tr>
            </table>
         </div>
         <div class="header">
            <span>查找信息如下</span>
         </div>
         <div class="content">
            <table>
               <tr>
                  <td class="text-right">快递单号</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
               </tr>
               <tr>
                  <td class="text-right">快递公司</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
               </tr>
               <tr>
                  <td class="text-right">收货人姓名</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
               </tr>
               <tr>
                  <td class="text-right">手机号码</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
               </tr>
               <tr>
                  <td class="text-right">快递状态</td><td class="content_right" id="status">已签收</td>
               </tr>
               <tr>
                  <td></td><td class="content_right"><span id="delete" class="btn btn-info">立即删除</span></td>
               </tr>
            </table>
         </div>
      </div>
   </body>
   <script src="/qrcode/jquery2.1.4.js"></script>
   <script src="/layer/layer.js"></script>
   <script>
      $(".header:eq(1), .content:eq(1)").hide();
      var expressId = null;
      $(function () {
         $("#find").click(function () {
            var windowId = layer.load();
            var number = $("#number").val();
            $.getJSON("/express/find.do",{number:number},function (data) {
               layer.close(windowId);
               // {
               //     "status": 0,
               //        "result": "查询成功",
               //        "data": {
               //           "id": 2,
               //                 "number": "124",
               //                 "username": "张三",
               //                 "userPhone": "13843838438",
               //                 "company": "京东快递",
               //                 "code": "213456",
               //                 "inTime": "Oct 3, 2020 2:34:30 PM",
               //                 "status": 0,
               //                 "sysPhone": "18888888888"
               //        }
               // }
               layer.msg(data.result);
               if (data.status == 0){
                  // 淡入效果
                  $(".header:eq(1), .content:eq(1)").fadeIn(1000);
                  expressId = data.data.id;
                  $("input:eq(1)").val(data.data.number);
                  $("input:eq(2)").val(data.data.company);
                  $("input:eq(3)").val(data.data.username);
                  $("input:eq(4)").val(data.data.userPhone);
                  $("input:eq(1),input:eq(2),input:eq(3),input:eq(4)").prop("disabled",true)
                  if (data.data.status == 0){
                     // 未签收
                     $("#status").html("未签收");
                  }else {
                     // 已签收
                     $("#status").html("已签收");
                  }
               }
            });
         });
         $("#delete").click(function () {
            if (confirm("确定要删除吗？")){
               var windowId = layer.load();
               $.getJSON("/express/delete.do",{id:expressId},function (data) {
                  layer.close(windowId);
                  layer.msg(data.result);
                  if (data.status == 0){
                     $(".header:eq(1), .content:eq(1)").hide();
                  }
               });
            }
         });
      });
   </script>
</html>

14.2 快递员相关

14.2.1 快递员录入

CourierController中添加insert方法：

@ResponseBody("/courier/insert.do")
public String insert(HttpServletRequest request, HttpServletResponse response){
    String courierName = request.getParameter("courierName");
    String courierPhone = request.getParameter("courierPhone");
    String courierIdNumber = request.getParameter("courierIdNumber");
    String courierPassword = request.getParameter("courierPassword");
    Courier c = new Courier(courierName,courierPhone,courierIdNumber,courierPassword);
    boolean flag = CourierService.insert(c);
    Message msg = new Message();
    if (flag){
        msg.setStatus(0);
        msg.setResult("快递员录入成功");
    }else {
        msg.setStatus(-1);
        msg.setResult("快递员录入失败");
    }
    String json = JSONUtil.toJSON(msg);
    return json;
}

对应的前端代码：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
      <link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/add.css"/>
      <style>
         .layui-layer-content{
            color: #fff;
         }
         #add_btn{
            cursor: pointer;
         }
         #reset_btn{
            cursor: pointer;
         }
      </style>
   </head>
   <body>
      <div id="app">
         <div class="header">
            <span>添加快递员</span>
         </div>
         <div class="content">
            <table>
               <tr>
                  <td class="text-right">姓名</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
               </tr>
               <tr>
                  <td class="text-right">手机号码</td><td class="content_right"><input class="input" placeholder="请输入手机号码"></td>
               </tr>
               <tr>
                  <td class="text-right">身份证号码</td><td class="content_right"><input class="input" placeholder="请输入身份证号码"></td>
               </tr>
               <tr>
                  <td class="text-right">密码</td><td class="content_right"><input class="input" placeholder="请输入密码"></td>
               </tr>
               <tr>
                  <td></td><td class="content_right"><span id="add_btn" class="btn btn-info">立即提交</span> <span id="reset_btn" class="btn">重置</span> </td>
               </tr>
            </table>
         </div>
      </div>
      <script src="../../assets/layui.all.js"></script>
      <script src="/qrcode/jquery2.1.4.js"></script>
      <script src="/layer/layer.js"></script>
      <script>
         $(function () {
            $("#add_btn").click(function () {
               var windowId = layer.load();
               var courierName = $("input:eq(0)").val();
               var courierPhone = $("input:eq(1)").val();
               var courierIdNumber = $("input:eq(2)").val();
               var courierPassword = $("input:eq(3)").val();
               $.post("/courier/insert.do",{
                  courierName:courierName,
                  courierPhone:courierPhone,
                  courierIdNumber:courierIdNumber,
                  courierPassword:courierPassword
               },function (data) {
                  layer.close(windowId);
                  layer.msg(data.result);
                  if (data.status == 0){
                     // 录入成功，恢复默认
                     $("input").val("");
                  }
               });
            });
            $("#reset_btn").click(function () {
               $("input").val("");
            });
         });
      </script>
   </body>
</html>

14.2.2 删除和修改

先查询然后再删除和修改：

查询相关的CourierController中的方法find：

@ResponseBody("/courier/find.do")
public String find(HttpServletRequest request, HttpServletResponse response){
    String courierPhone = request.getParameter("courierPhone");
    Courier c = CourierService.findByPhone(courierPhone);
    Message msg = new Message();
    if (c == null){
        msg.setStatus(-1);
        msg.setResult("手机号不存在");
    }else {
        msg.setStatus(0);
        msg.setResult("查询成功");
        msg.setData(c);
    }
    String json = JSONUtil.toJSON(msg);
    return json;
}

更新相关的CourierController中的方法update：

@ResponseBody("/courier/update.do")
public String update(HttpServletRequest request, HttpServletResponse response){
    int id = Integer.parseInt(request.getParameter("id"));
    String courierName = request.getParameter("courierName");
    String courierPhone = request.getParameter("courierPhone");
    String courierIdNumber = request.getParameter("courierIdNumber");
    String courierPassword = request.getParameter("courierPassword");
    Courier newCourier = new Courier(courierName,courierPhone,courierIdNumber,courierPassword);
    Message msg = new Message();
    boolean flag = CourierService.update(id, newCourier);
    if (flag){
        msg.setStatus(0);
        msg.setResult("修改成功");
    }else {
        msg.setStatus(-1);
        msg.setResult("修改失败");
    }
    String json = JSONUtil.toJSON(msg);
    return json;
}

删除相关的CourierController中的方法delete：

@ResponseBody("/courier/delete.do")
public String delete(HttpServletRequest request, HttpServletResponse response){
    int id = Integer.parseInt(request.getParameter("id"));
    boolean flag = CourierService.delete(id);
    Message msg = new Message();
    if (flag){
        msg.setStatus(0);
        msg.setResult("删除成功");
    }else {
        msg.setStatus(-1);
        msg.setResult("删除失败");
    }
    String json = JSONUtil.toJSON(msg);
    return json;
}

更新界面update.html：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
      <link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/add.css"/>
      <style>
         .layui-layer-content{
            color: #fff;
         }
         #find,#update_btn,#reset_btn{
            cursor: pointer;
         }
      </style>
   </head>
   <body>
      <div id="app">
         <div class="header">
            <span>修改快递员</span>
         </div>
         <div class="content">
            <table>    
               <tr>
                  <td class="text-right">手机号码</td><td class="content_right"><input id="courierPhone" class="input inline-input" placeholder="请输入手机号码"> <span id="find" class="btn btn-info">立即查找</span></td>
               </tr>
            </table>
         </div>
         <div class="header">
            <span>查找信息如下</span>
         </div>
         <div class="content">
            <table>
               <tr>
                  <td class="text-right">姓名</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
               </tr>
               <tr>
                  <td class="text-right">手机号码</td><td class="content_right"><input class="input" placeholder="请输入手机号码"></td>
               </tr>
               <tr>
                  <td class="text-right">身份证号码</td><td class="content_right"><input class="input" placeholder="请输入身份证号码"></td>
               </tr>
               <tr>
                  <td class="text-right">密码</td><td class="content_right"><input class="input" placeholder="请输入密码"></td>
               </tr>
               <tr>
                  <td></td><td class="content_right"><span id="update_btn" class="btn btn-info">立即修改</span> <span id="reset_btn" class="btn">重置</span> </td>
               </tr>
            </table>
         </div>
      </div>
   </body>
   <script src="/qrcode/jquery2.1.4.js"></script>
   <script src="/layer/layer.js"></script>
   <script>
      $(".header:eq(1), .content:eq(1)").hide();
      var courierId = null;
      $(function () {
         $("#find").click(function () {
            var windowId = layer.load();
            var courierPhone = $("#courierPhone").val();
            $.getJSON("/courier/find.do",{courierPhone:courierPhone},function (data) {
               layer.close(windowId);
               // {
               //     "status": 0,
               //        "result": "查询成功",
               //        "data": {
               //           "id": 1003,
               //           "courierName": "快递王五",
               //           "courierPhone": "18373110779",
               //           "courierIdNumber": "411303111111111113",
               //           "courierPassword": "123",
               //           "courierSendNumber": 111111,
               //           "enrollTime": "Oct 8, 2020 7:50:24 PM",
               //           "loginTime": "Oct 8, 2020 7:50:23 PM"
               //        }
               // }
               layer.msg(data.result);
               if (data.status == 0){
                  // 淡入效果
                  $(".header:eq(1), .content:eq(1)").fadeIn(1000);
                  courierId = data.data.id;
                  $("input:eq(1)").val(data.data.courierName);
                  $("input:eq(2)").val(data.data.courierPhone);
                  $("input:eq(3)").val(data.data.courierIdNumber);
                  $("input:eq(4)").val(data.data.courierPassword);
               }
            });
         });
         $("#update_btn").click(function () {
            var windowId = layer.load();
            var courierName = $("input:eq(1)").val();
            var courierPhone = $("input:eq(2)").val();
            var courierIdNumber = $("input:eq(3)").val();
            var courierPassword = $("input:eq(4)").val();
            var courier = {
               id:courierId,
               courierName:courierName,
               courierPhone:courierPhone,
               courierIdNumber:courierIdNumber,
               courierPassword:courierPassword
            }
            console.log(courier);
            $.getJSON("/courier/update.do", courier, function (data) {
               layer.close(windowId);
               layer.msg(data.result);
               if (data.status == 0){
                  // 修改成功
                  $(".header:eq(1), .content:eq(1)").hide();
               }
            });
         });
      });
   </script>
</html>

删除界面delete.html：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
      <link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/add.css"/>
      <style>
         /*单独设置弹窗字体颜色使其显示*/
         .layui-layer-content{
            color: #fff;
         }
         #find,#delete_btn,#reset_btn{
            cursor: pointer;
         }
      </style>
   </head>
   <body>
      <div id="app">
         <div class="header">
            <span>删除快递员</span>
         </div>
         <div class="content">
            <table>    
               <tr>
                  <td class="text-right">手机号码</td><td class="content_right"><input id="courierPhone" class="input inline-input" placeholder="请输入手机号码"> <span id="find" class="btn btn-info">立即查找</span></td>
               </tr>
            </table>
         </div>
         <div class="header">
            <span>查找信息如下</span>
         </div>
         <div class="content">
            <table>
               <tr>
                  <td class="text-right">姓名</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
               </tr>
               <tr>
                  <td class="text-right">手机号码</td><td class="content_right"><input class="input" placeholder="请输入手机号码"></td>
               </tr>
               <tr>
                  <td class="text-right">身份证号码</td><td class="content_right"><input class="input" placeholder="请输入身份证号码"></td>
               </tr>
               <tr>
                  <td class="text-right">密码</td><td class="content_right"><input class="input" placeholder="请输入密码"></td>
               </tr>
               <tr>
                  <td></td><td class="content_right"><span id="delete_btn" class="btn btn-info">立即删除</span> <span id="reset_btn" class="btn">重置</span> </td>
               </tr>
            </table>
         </div>
      </div>
   </body>
   <script src="/qrcode/jquery2.1.4.js"></script>
   <script src="/layer/layer.js"></script>
   <script>
      $(".header:eq(1), .content:eq(1)").hide();
      var courierId = null;
      $(function () {
         $("#find").click(function () {
            var windowId = layer.load();
            var courierPhone = $("#courierPhone").val();
            $.getJSON("/courier/find.do",{courierPhone:courierPhone},function (data) {
               layer.close(windowId);
               layer.msg(data.result);
               if (data.status == 0){
                  // 淡入效果
                  $(".header:eq(1), .content:eq(1)").fadeIn(1000);
                  courierId = data.data.id;
                  $("input:eq(1)").val(data.data.courierName);
                  $("input:eq(2)").val(data.data.courierPhone);
                  $("input:eq(3)").val(data.data.courierIdNumber);
                  $("input:eq(4)").val(data.data.courierPassword);
               }
            });
         });
         $("#delete_btn").click(function () {
            if (confirm("确定要删除吗？")){
               var windowId = layer.load();
               $.getJSON("/courier/delete.do",{id:courierId},function (data) {
                  layer.close(windowId);
                  layer.msg(data.result);
                  if (data.status == 0){
                     $(".header:eq(1), .content:eq(1)").hide();
                  }
               });
            }
         });
      });
   </script>
</html>

14.3 用户相关

14.3.1 用户录入

UserController中添加insert方法：

@ResponseBody("/user/insert.do")
public String insert(HttpServletRequest request, HttpServletResponse response){
    String userName = request.getParameter("userName");
    String userPhone = request.getParameter("userPhone");
    String userIdNumber = request.getParameter("userIdNumber");
    String userPassword = request.getParameter("userPassword");
    User u = new User(userName, userPhone, userIdNumber, userPassword);
    boolean flag = UserService.insert(u);
    Message msg = new Message();
    if (flag){
        msg.setStatus(0);
        msg.setResult("用户录入成功");
    }else{
        msg.setStatus(-1);
        msg.setResult("用户录入失败");
    }
    String json = JSONUtil.toJSON(msg);
    return json;
}

对应的前端代码：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
      <link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/add.css"/>
      <style>
         .layui-layer-content{
            color: #fff;
         }
         #add_btn{
            cursor: pointer;
         }
         #reset_btn{
            cursor: pointer;
         }
      </style>
   </head>
   <body>
      <div id="app">
         <div class="header">
            <span>添加用户</span>
         </div>
         <div class="content">
            <table>
               <tr>
                  <td class="text-right">姓名</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
               </tr>
               <tr>
                  <td class="text-right">手机号码</td><td class="content_right"><input class="input" placeholder="请输入手机号码"></td>
               </tr>
               <tr>
                  <td class="text-right">身份证号码</td><td class="content_right"><input class="input" placeholder="请输入身份证号码"></td>
               </tr>
               <tr>
                  <td class="text-right">密码</td><td class="content_right"><input class="input" placeholder="请输入密码"></td>
               </tr>
               <tr>
                  <td></td><td class="content_right"><span id="add_btn" class="btn btn-info">立即提交</span> <span id="reset_btn" class="btn">重置</span> </td>
               </tr>
            </table>
         </div>
      </div>
      <script src="../../assets/layui.all.js"></script>
      <script src="/qrcode/jquery2.1.4.js"></script>
      <script src="/layer/layer.js"></script>
      <script>
         function checkName(){
            var userName = $("input:eq(0)").val();
            if (userName == null || userName.length == 0){
               alert("用户名有误");
               console.log("false");
               return false;
            }
            console.log("true");
            return true;
         }
         function checkPhone(){
            var userPhone = $("input:eq(1)").val();
            var reg = /^1[3456789]\d{9}$/;
            if (!reg.test(userPhone)){
               alert("手机号码有误");
               console.log("false");
               return false;
            }
            console.log("true");
            return true;
         }
         function checkIdNumber(){
            var userIdNumber = $("input:eq(2)").val();
            var reg = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
            if (!reg.test(userIdNumber)){
               alert("身份证号码有误");
               console.log("false");
               return false;
            }
            console.log("true");
            return true;
         }
         function checkPassword(){
            var userPassword = $("input:eq(3)").val();
            var reg = /^\w{3,20}$/;
            if (!reg.test(userPassword)){
               alert("密码有误");
               console.log("false");
               return false;
            }
            console.log("true");
            return true;
         }
         $(function () {
            $("#add_btn").click(function () {
               if (checkName() && checkPhone() && checkPassword() && checkIdNumber()){
                  var windowId = layer.load();
                  var userName = $("input:eq(0)").val();
                  var userPhone = $("input:eq(1)").val();
                  var userIdNumber = $("input:eq(2)").val();
                  var userPassword = $("input:eq(3)").val();
                  $.post("/user/insert.do",{
                     userName:userName,
                     userPhone:userPhone,
                     userIdNumber:userIdNumber,
                     userPassword:userPassword
                  },function (data) {
                     layer.close(windowId);
                     layer.msg(data.result);
                     if (data.status == 0){
                        // 录入成功，恢复默认
                        $("input").val("");
                     }
                  });
               }
            });
            $("#reset_btn").click(function () {
               $("input").val("");
            });
         });
      </script>
   </body>
</html>

14.3.2 删除和修改

先查询然后再删除和修改：

查询相关的UserController中的方法find：

@ResponseBody("/user/find.do")
public String find(HttpServletRequest request, HttpServletResponse response){
    String userPhone = request.getParameter("userPhone");
    User u = UserService.findByUserPhone(userPhone);
    Message msg = new Message();
    if (u == null){
        msg.setStatus(-1);
        msg.setResult("手机号不存在");
    }else {
        msg.setStatus(0);
        msg.setResult("查询成功");
        msg.setData(u);
    }
    String json = JSONUtil.toJSON(msg);
    return json;
}

更新相关的UserController中的方法update：

@ResponseBody("/user/update.do")
public String update(HttpServletRequest request, HttpServletResponse response){
    int id = Integer.parseInt(request.getParameter("id"));
    String userName = request.getParameter("userName");
    String userPhone = request.getParameter("userPhone");
    String userIdNumber = request.getParameter("userIdNumber");
    String userPassword = request.getParameter("userPassword");
    User newUser = new User(userName,userPhone,userIdNumber,userPassword);
    Message msg = new Message();
    boolean flag = UserService.update(id, newUser);
    if (flag){
        msg.setStatus(0);
        msg.setResult("修改成功");
    }else {
        msg.setStatus(-1);
        msg.setResult("修改失败");
    }
    String json = JSONUtil.toJSON(msg);
    return json;
}

删除相关的UserController中的方法delete：

@ResponseBody("/user/delete.do")
public String delete(HttpServletRequest request, HttpServletResponse response){
    int id = Integer.parseInt(request.getParameter("id"));
    boolean flag = CourierService.delete(id);
    Message msg = new Message();
    if (flag){
        msg.setStatus(0);
        msg.setResult("删除成功");
    }else {
        msg.setStatus(-1);
        msg.setResult("删除失败");
    }
    String json = JSONUtil.toJSON(msg);
    return json;
}

更新界面update.html：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
      <link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/add.css"/>
      <style>
         .layui-layer-content{
            color: #fff;
         }
         #find,#update_btn,#reset_btn{
            cursor: pointer;
         }
      </style>
   </head>
   <body>
      <div id="app">
         <div class="header">
            <span>修改快递员</span>
         </div>
         <div class="content">
            <table>    
               <tr>
                  <td class="text-right">手机号码</td><td class="content_right"><input id="userPhone" class="input inline-input" placeholder="请输入手机号码"> <span id="find" class="btn btn-info">立即查找</span></td>
               </tr>
            </table>
         </div>
         <div class="header">
            <span>查找信息如下</span>
         </div>
         <div class="content">
            <table>
               <tr>
                  <td class="text-right">姓名</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
               </tr>
               <tr>
                  <td class="text-right">手机号码</td><td class="content_right"><input class="input" placeholder="请输入手机号码"></td>
               </tr>
               <tr>
                  <td class="text-right">身份证号码</td><td class="content_right"><input class="input" placeholder="请输入身份证号码"></td>
               </tr>
               <tr>
                  <td class="text-right">密码</td><td class="content_right"><input class="input" placeholder="请输入密码"></td>
               </tr>
               <tr>
                  <td></td><td class="content_right"><span id="update_btn" class="btn btn-info">立即修改</span> <span id="reset_btn" class="btn">重置</span> </td>
               </tr>
            </table>
         </div>
      </div>
   </body>
   <script src="/qrcode/jquery2.1.4.js"></script>
   <script src="/layer/layer.js"></script>
   <script>
      $(".header:eq(1), .content:eq(1)").hide();
      var userId = null;
      $(function () {
         $("#find").click(function () {
            var windowId = layer.load();
            var userPhone = $("#userPhone").val();
            $.getJSON("/user/find.do",{userPhone:userPhone},function (data) {
               layer.close(windowId);
               // {
               //     "status": 0,
               //        "result": "查询成功",
               //        "data": {
               //        "id": 1,
               //           "userName": "陈二",
               //           "userPhone": "13838438438",
               //           "userIdNumber": "411000000000000000",
               //           "userPassword": "123",
               //           "enrollTime": "Oct 9, 2020 9:46:21 AM",
               //           "loginTime": "Oct 9, 2020 9:46:43 AM"
               //        }
               // }
               layer.msg(data.result);
               if (data.status == 0){
                  // 淡入效果
                  $(".header:eq(1), .content:eq(1)").fadeIn(1000);
                  userId = data.data.id;
                  $("input:eq(1)").val(data.data.userName);
                  $("input:eq(2)").val(data.data.userPhone);
                  $("input:eq(3)").val(data.data.userIdNumber);
                  $("input:eq(4)").val(data.data.userPassword);
               }
            });
            $("#update_btn").click(function () {
               var windowId = layer.load();
               var userName = $("input:eq(1)").val();
               var userPhone = $("input:eq(2)").val();
               var userIdNumber = $("input:eq(3)").val();
               var userPassword = $("input:eq(4)").val();
               var user = {
                  id:userId,
                  userName:userName,
                  userPhone:userPhone,
                  userIdNumber:userIdNumber,
                  userPassword:userPassword
               }
               console.log(user);
               $.getJSON("/user/update.do", user, function (data) {
                  layer.close(windowId);
                  layer.msg(data.result);
                  if (data.status == 0){
                     // 修改成功
                     $(".header:eq(1), .content:eq(1)").hide();
                  }
               });
            });
         });
      });
   </script>
</html>

删除界面delete.html：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
      <link rel="stylesheet" type="text/css" href="../../../../css/reset.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/add.css"/>
      <style>
         /*单独设置弹窗字体颜色使其显示*/
         .layui-layer-content{
            color: #fff;
         }
         #find,#delete_btn{
            cursor: pointer;
         }
      </style>
   </head>
   <body>
      <div id="app">
         <div class="header">
            <span>删除快递员</span>
         </div>
         <div class="content">
            <table>    
               <tr>
                  <td class="text-right">手机号码</td><td class="content_right"><input id="userPhone" class="input inline-input" placeholder="请输入手机号码"> <span id="find" class="btn btn-info">立即查找</span></td>
               </tr>
            </table>
         </div>
         <div class="header">
            <span>查找信息如下</span>
         </div>
         <div class="content">
            <table>
               <tr>
                  <td class="text-right">姓名</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
               </tr>
               <tr>
                  <td class="text-right">手机号码</td><td class="content_right"><input class="input" placeholder="请输入手机号码"></td>
               </tr>
               <tr>
                  <td class="text-right">身份证号码</td><td class="content_right"><input class="input" placeholder="请输入身份证号码"></td>
               </tr>
               <tr>
                  <td class="text-right">密码</td><td class="content_right"><input class="input" placeholder="请输入密码"></td>
               </tr>
               <tr>
                  <td></td><td class="content_right"><span id="delete_btn" class="btn btn-info">立即删除</span> </td>
               </tr>
            </table>
         </div>
      </div>
   </body>
   <script src="/qrcode/jquery2.1.4.js"></script>
   <script src="/layer/layer.js"></script>
   <script>
      $(".header:eq(1), .content:eq(1)").hide();
      var userId = null;
      $(function () {
         $("#find").click(function () {
            var windowId = layer.load();
            var userPhone = $("#userPhone").val();
            $.getJSON("/user/find.do",{userPhone:userPhone}, function (data) {
               layer.close(windowId);
               layer.msg(data.result);
               if (data.status == 0){
                  // 淡入效果
                  $(".header:eq(1), .content:eq(1)").fadeIn(1000);
                  userId = data.data.id;
                  $("input:eq(1)").val(data.data.userName);
                  $("input:eq(2)").val(data.data.userPhone);
                  $("input:eq(3)").val(data.data.userIdNumber);
                  $("input:eq(4)").val(data.data.userPassword);
               }
            });
         });
         $("#delete_btn").click(function () {
            if (confirm("确定要删除吗？")){
               var windowId = layer.load();
               $.getJSON("/user/delete.do",{id:userId},function (data) {
                  layer.close(windowId);
                  layer.msg(data.result);
                  if (data.status == 0){
                     $(".header:eq(1), .content:eq(1)").hide();
                  }
               });
            }
         });
      });
   </script>
</html>

15 权限控制

在AdminController中把登陆成功的用户存到session里：

@ResponseBody("/admin/login.do")
public String login(HttpServletRequest request, HttpServletResponse response){
    String username = request.getParameter("username");
    String password = request.getParameter("password");
    boolean result = AdminService.login(username, password);
    // 准备不同的返回数据
    Message msg = null;
    if (result){
        // {status:0, result:"登录成功"}
        msg = new Message(0, "登录成功");
        // 登录时间和ip的更新
        Date date = new Date();
        String ip = request.getRemoteAddr();
        AdminService.updateLoginTimeAndIp(username, date, ip);
        // 把用户名存到session中
        request.getSession().setAttribute("adminUserName",username);
    }else {
        // {status:-1, result:"登录失败"}
        msg = new Message(-1, "登录失败");
    }
    String json = JSONUtil.toJSON(msg);
    return json;
}

编写权限控制所需的过滤器：

package com.wangjiawei.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 java.io.IOException;
/**
 * 2 * @Author: 小王同学
 * 3 * @Date: 2020/10/7 13:42
 * 4
 */
@WebFilter({"/admin/index.html","/admin/views/*","/express/*"})
public class AccessControllerFilter implements Filter {
    @Override
    public void destroy() {
    }
    @Override
    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) resp;
        String userName = UserUtil.getUserName(request.getSession());
        if (userName != null) {
            chain.doFilter(req, resp);
        } else {
            response.sendError(404, "很遗憾，权限不足");
        }
    }
    @Override
    public void init(FilterConfig config) throws ServletException {
    }
}

JavaWeb综合项目——快递e栈（后台部分）（三）

11 阿里云短信集成

12 控制台部分

12.1 管理器

12.1.1 快递管理器 ExpressController

12.1.2 快递员管理器CourierController

12.1.3 用户管理器

12.2 对应的前端代码admin/views/user/console.html

13 分页列表

13.1 快递列表

13.2 快递员列表

13.3 用户列表

14 增删改查

14.1 快递相关

14.1.1 快递录入

14.1.2 删除和修改

14.2 快递员相关

14.2.1 快递员录入

14.2.2 删除和修改

14.3 用户相关

14.3.1 用户录入

14.3.2 删除和修改

15 权限控制

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

JavaWeb综合项目——快递e栈（后台部分）（三）

11 阿里云短信集成

12 控制台部分

12.1 管理器

12.1.1 快递管理器 ExpressController

12.1.2 快递员管理器CourierController

12.1.3 用户管理器

12.2 对应的前端代码admin/views/user/console.html

13 分页列表

13.1 快递列表

13.2 快递员列表

13.3 用户列表

14 增删改查

14.1 快递相关

14.1.1 快递录入

14.1.2 删除和修改

14.2 快递员相关

14.2.1 快递员录入

14.2.2 删除和修改

14.3 用户相关

14.3.1 用户录入

14.3.2 删除和修改

15 权限控制

热门文章

最新文章

相关课程

相关电子书

相关实验场景