07-项目训练_分页列表、快递录入、删除和修改

目录

​​一，分页列表​​

​​1，设计bootstrap-table可识别的格式​​

​​2，调整日期在控制台的显示格式​​

​​3，在ExpressController中编写处理列表请求的方法​​

​​4，修改list.html内容​​

​​5，运行效果​​

​​二，快递录入​​

​​1，修改add.html​​

​​2，在ExpressController中添加insert方法处理express/insert.do请求​​

​​三，修改和删除​​

​​1，修改update.html、delete.html​​

​​2，ExpressController中添加方法​​

完整项目在这里实时更新<(￣︶￣)↗[GO!]：​​GitHub - GoodbyeFirefly/ExpressManagementSystem: 用GitHub一步步记录编码过程，实现一个相对完整的快递管理项目​​    

一，分页列表

1，设计bootstrap-table可识别的格式

ResultData

package com.xxy.bean;

import java.util.ArrayList;
import java.util.List;

public class ResultData<T> {
    // 每次查询的数据集合
    private List<T> rows = new ArrayList<>();
    // 总数量
    private int total;

    public List<T> getRows() {
        return rows;
    }

    public void setRows(List<T> rows) {
        this.rows = rows;
    }

    public int getTotal() {
        return total;
    }

    public void setTotal(int total) {
        this.total = total;
    }
}      

2，调整日期在控制台的显示格式

需要将Express实体类中Timestamp类型的inTime和outTime修改为yyyy-MM-dd HH:mm:ss格式。

新建BootstrapTableExpress实体类， 在获取到express列表后，将其逐个转换为BootstrapTableExpress对象

package com.xxy.bean;

import java.sql.Timestamp;

public class BootsrapTableExpress {
    private int id;
    private String number;
    private String username;
    private String userphone;
    private String company;
    private String code;
    private String intime;
    private String outtime;
    private String status;

    public BootsrapTableExpress() {
    }

    private String sysPhone;

    public BootsrapTableExpress(int id, String number, String username, String userphone, String company, String code, String intime, String outtime, String status, String sysPhone) {
        this.id = id;
        this.number = number;
        this.username = username;
        this.userphone = userphone;
        this.company = company;
        this.code = code;
        this.intime = intime;
        this.outtime = outtime;
        this.status = status;
        this.sysPhone = sysPhone;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getNumber() {
        return number;
    }

    public void setNumber(String number) {
        this.number = number;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getUserphone() {
        return userphone;
    }

    public void setUserphone(String userphone) {
        this.userphone = userphone;
    }

    public String getCompany() {
        return company;
    }

    public void setCompany(String company) {
        this.company = company;
    }

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public String getIntime() {
        return intime;
    }

    public void setIntime(String intime) {
        this.intime = intime;
    }

    public String getOuttime() {
        return outtime;
    }

    public void setOuttime(String outtime) {
        this.outtime = outtime;
    }

    public String getStatus() {
        return status;
    }

    public void setStatus(String status) {
        this.status = status;
    }

    public String getSysPhone() {
        return sysPhone;
    }

    public void setSysPhone(String sysPhone) {
        this.sysPhone = sysPhone;
    }
}      

3，在ExpressController中编写处理列表请求的方法

@ResponseBody("/express/list.do")
    public String list(HttpServletRequest req, HttpServletResponse resp) {
        // 1，获取查询数据的起始索引值
        int offset = Integer.parseInt(req.getParameter("offset"));

        // 2，获取当前页要查询的数据量
        int pageNumber = Integer.parseInt(req.getParameter("pageNumber"));

        // 3，进行查询
        List<Express> list = ExpressService.findAll(true, offset, pageNumber);
        List<BootsrapTableExpress> list2 = new ArrayList<>();
        for (Express e : list) {
            String inTime = DateFormatUtil.format(e.getIntime());
            String outTime = e.getOuttime() == null ? "未出库" : DateFormatUtil.format(e.getOuttime());
            String status = e.getStatus() == 0 ? "待取件" : "已取件";
            String code = e.getCode() == null ? "已取件" : e.getCode();
            list2.add(new BootsrapTableExpress(e.getId(), e.getNumber(), e.getUsername(), e.getUserphone(), e.getCompany(), code, inTime, outTime, status, e.getSysPhone()));

        }
        List<Map<String, Integer>> console = ExpressService.console();
        Integer total = console.get(0).get("data1_size");

        // 4，将集合封装为bootstrap-table识别的格式(用于前后端分离)
        ResultData<BootsrapTableExpress> data = new ResultData<>();
        data.setRows(list2);
        data.setTotal(total);
        String json = JSONUtil.toJSON(data);
        return json;

    }      

4，修改list.html内容

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/list.css"/>
    <!--从cdn中引入资源，适用于有网络的条件，也可以提前下载，自行引入-->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/locale/bootstrap-table-zh-CN.min.js"></script>

  </head>
  <body>
    <table id="express_list"></table>
    <script>
      $(function () {
        $("#express_list").bootstrapTable({
          url:"/express/list.do",  // 数据地址
          striped:true,        // 是否显示行的间隔
          pageNumber:1,        // 初始化加载第几页
          pagination:true,      // 是否分页
          sidePagination:'server',  // 分页方式，分为服务器分页和前端分页
          pageSize:5,
          pageList:[5,10,20],
          showRefresh:true,      // 是否提供刷新功能
          queryParams:function (params) {
            var temp = {
              offset:params.offset,
              pageNumber:params.limit
            };
            return temp;
          },
          columns:[
            {
              title:"编号",
              field:"id",
              sortable:false    // 选择前端分页才能使用排序功能
            },
            {
              title:"单号",
              field:"number",
              sortable:false
            },
            {
              title:"姓名",
              field:"username",
              sortable:false
            },
            {
              title:"电话",
              field:"userphone",  // 注意与自己定义的字段名是否一致（大小写）
              sortable:false
            },
            {
              title:"快递公司",
              field:"company",
              sortable:false
            },
            {
              title:"取件码",
              field:"code",
              sortable:false
            },
            {
              title:"入库时间",
              field:"intime",
              sortable:false
            },
            {
              title:"出库时间",
              field:"outtime",
              sortable:false
            },
            {
              title:"状态",
              field:"status",
              sortable:false
            },
            {
              title:"录入人电话",
              field:"sysPhone",
              sortable:false
            }
          ]
        });
      });
    </script>
  </body>
</html>      

5，运行效果

关于快件取出后的取件码存在问题：数据库中该字段设计为unique保证取件码不重复，然而当取出快递后，取件码置空，当有多个快递取出时便会出错，因为null == null。但是不置空的话，可用的6位数取件码将越来越少。

暂时没有好的解决思路，这里先记一下。

二，快递录入

1，修改add.html

为表单添加id；

引入jQuery、layer；

通过js为表单添加提交方法，获取页面提供的参数、打包参数向后台传递、接收后台返回的数据；

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../assets/css/layui.css">
    <link rel="stylesheet" href="../../assets/css/view.css"/>
    <title></title>
</head>
<body class="layui-view-body">
    <div class="layui-content">
        <div class="layui-row">
            <div class="layui-card">
                <div class="layui-card-header">录入快件</div>
                <form id="form" class="layui-form layui-card-body" onsubmit="">
                  <div class="layui-form-item">
                    <label class="layui-form-label">单号</label>
                    <div class="layui-input-block">
                      <input type="text" name="code" required  lay-verify="required" placeholder="请输入快递单号" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">快递公司</label>
                    <div class="layui-input-block">
                      <select name="company" lay-verify="" lay-search>
                        <option >安能快递</option><option >安能物流</option><option >澳大利亚邮政</option><option >阿根廷邮政</option><option >爱沙尼亚邮政</option><option >阿联酋邮政</option><option >奥地利邮政</option><option >阿尔巴尼亚邮政</option><option >Aramex</option><option >巴西邮政</option><option >比利时邮政</option><option >百世快运</option><option >波兰邮政</option><option >白俄罗斯邮政</option><option >保加利亚邮政</option><option >巴基斯坦邮政</option><option >百福东方</option><option >包裹信件</option><option >晟邦物流</option><option >城市100</option><option >City-Link</option><option >COE</option><option >传喜物流</option><option >德邦快递</option><option >大田物流</option><option >递四方</option><option >DHL德国</option><option >DHL全球</option><option >DHL中国</option><option >EMS</option><option >EMS国际</option><option >EMS经济快递</option><option >FedEx中国</option><option >FedEx国际</option><option >FedEx美国</option><option >飞豹快递</option><option >凡宇快递</option><option >飞远配送</option><option >飞远(爱彼西)</option><option >法国邮政</option><option >芬兰邮政</option><option >国通快递</option><option >postco</option><option >百世快递</option><option >恒路物流</option><option >黄马甲配送</option><option >黑猫宅急便</option><option >华企快运</option><option >韩国邮政</option><option >佳吉快运</option><option >京东快递</option><option >佳怡物流</option><option "jinguangsudikuaijian">京广速递</option><option >日本邮政</option><option >筋斗云物流</option><option >捷克邮政</option><option >嘉里大通</option><option >加运美</option><option >快捷快递</option><option >跨越速运</option><option >克罗地亚邮政</option><option >联昊通</option><option >龙邦速递</option><option >黎巴嫩邮政</option><option >民航快递</option><option >秘鲁邮政</option><option >毛里求斯邮政</option><option >马耳他邮政</option><option >摩尔多瓦邮政</option><option >马其顿邮政</option><option >民邦快递</option><option "szml56">明亮物流</option><option >挪威邮政</option><option >南非邮政</option><option >OnTrac</option><option >葡萄牙邮政</option><option >全峰快递</option><option >全一快递</option><option >如风达</option><option >申通快递</option><option selected="selected">顺丰速运</option><option >速尔快递</option><option >盛丰物流</option><option >圣安物流</option><option >盛辉物流</option><option >瑞士邮政</option><option >苏宁快递</option><option >斯洛伐克邮政</option><option >沙特邮政</option><option >斯洛文尼亚邮政</option><option >塞尔维亚邮政</option><option >天天快递</option><option >天地华宇</option><option >土耳其邮政</option><option >泰国邮政</option><option >TNT</option><option >UPS</option><option >USPS</option><option >万象物流</option><option >乌克兰邮政</option><option >万家物流</option><option >信丰物流</option><option >新邦物流</option><option >西班牙邮政</option><option >匈牙利邮政</option><option >圆通速递</option><option >韵达快递</option><option >优速物流</option><option >银捷速递</option><option >远成物流</option><option >运通中港快递</option><option >邮政国内小包</option><option >英国皇家邮政</option><option >意大利邮政</option><option >印度邮政</option><option >亚美尼亚邮政</option><option >越丰物流</option><option >亚风速递</option><option >邮政国际包裹</option><option >中通快递</option><option >宅急送</option><option >中铁物流</option><option >增益速递</option><option >中铁快运</option><option >芝麻开门</option><option >中国邮政</option><option >智利邮政</option><option >中速快递</option>
                    </select>

                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">收件人姓名</label>
                    <div class="layui-input-block">
                      <input type="text" name="username" required  lay-verify="required" placeholder="请输入收货人姓名" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">手机号码</label>
                    <div class="layui-input-block">
                      <input type="text" name="phonenumber" required  lay-verify="required" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <div class="layui-input-block">
                      <button class="layui-btn layui-btn-blue" lay-submit lay-filter="formDemo">立即提交</button>
                      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                  </div>
                </form>  
            </div>
        </div>
    </div>
    <script src="../../assets/layui.all.js"></script>
    <script src="/js/jquery2.1.4.js"></script>
    <script src="/layer/layer.js"></script>
    <script>
      var form = layui.form
        ,layer = layui.layer;
    </script>
    <script>
        $(function () {
           $("#form").submit(function () {
               var windowId = layer.load();
               var number = $("input:eq(0)").val();
               var company = $("input:eq(1)").val();
               var username = $("input:eq(2)").val();
               var userphone = $("input:eq(3)").val();

               $.post("/express/insert.do", {
                   number:number,
                   company:company,
                   username:username,
                   userphone:userphone
               }, function (data) {
                   layer.close(windowId);
                   layer.msg(data.result);
                   if (data.status == 0) {
                       // 设置默认值
                       $("input").val("");
                       $("input:eq(1)").val("顺丰速运");
                   }
               });
               
               return false;// 不跳转页面
           });
        });
    </script>
</body>
</html>      

2，在ExpressController中添加insert方法处理express/insert.do请求

@ResponseBody("/express/insert.do")
    public String insert (HttpServletRequest req, HttpServletResponse resp) {
        String number = req.getParameter("number");
        String company = req.getParameter("company");
        String username = req.getParameter("username");
        String userphone = req.getParameter("userphone");

        // 若没有对应的构造方法，可以重新创建一个
        Express e = new Express(number, username, userphone, company, UserUtil.getUserphone(req.getSession()));
        boolean flag = ExpressService.insert(e);
        Message msg = new Message();
        if (flag) {
            msg.setStatus(0);
            msg.setResult("录入成功！");
        } else {
            // 录入失败只可能是快递单号number重复，与其他三个参数基本无关
            msg.setStatus(-1);
            msg.setResult("录入失败！");
        }
        String json = JSONUtil.toJSON(msg);
        return json;
    }      

创建UserUtil工具提供录入人信息

package com.xxy.util;

import javax.servlet.http.HttpSession;

public class UserUtil {
    public static String getUsername(HttpSession session) {
        return "";
    }

    public static String getUserphone(HttpSession session) {
        // 还未存储录入人的信息，这里先暂时代替一下
        return "18888888888";
    }
}      

三，修改和删除

1，修改update.html、delete.html

引入jQuery、layer；

为指定的html组件添加id、value等属性；

编写脚本，提供快件查询、快件修改/删除功能；

（编写过程中需要完善后台的地方，再转回去完善。里面的逻辑也有点复杂，已经尽量做好备注）

update.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/add.css"/>
  </head>
  <body>
    <div id="app">
      <div class="header">
        <span>修改快递信息</span>
      </div>
      <div class="content">
        <table>  
          <tr>
            <td class="text-right">运单号</td><td class="content_right"><input class="input inline-input" id="number" placeholder="请输入运单号码"> <span class="btn btn-info" id="find">立即查找</span></td>
          </tr>
        </table>
      </div>
      
      
      <div class="header">
        <span>查找信息如下</span>
      </div>
      <div class="content">
        <table>
          <tr>
            <td class="text-right">快递单号</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
          </tr>
          <tr>
            <td class="text-right">快递公司</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
          </tr>
          <tr>
            <td class="text-right">收货人姓名</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
          </tr>
          <tr>
            <td class="text-right">手机号码</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
          </tr>
          <tr>
            <td class="text-right">快递状态</td><td class="content_right"><input type="radio" name="status" class="status" value="1">已签收  <input name="status" type="radio" class="status" value="0">未签收</td>
          </tr>
          <tr>
            <td></td><td class="content_right"><span class="btn btn-info" id="update">立即修改</span> <span class="btn">重置</span> </td>
          </tr>
        </table>
      </div>
    </div>
  </body>

  <script src="/js/jquery2.1.4.js"></script>
  <script src="/layer/layer.js"></script>
  <script>
    $(".header:eq(1), .content:eq(1)").hide();
    var expressId = null;// 后面可能修改单号，但是id不会该，所以在这里进行标记
    var g_userPhone = null;
    $(function () {
      $("#find").click(function () {
        var windowId = layer.load();
        var number = $("#number").val();
        $.getJSON("/express/find.do", {number:number}, function (data) {
          layer.close(windowId);
          layer.msg(data.result);
          if (data.status == 0) {
            $(".header:eq(1), .content:eq(1)").fadeIn(1000);
            expressId = data.data.id;
            g_userPhone = data.data.userphone;
            $("input:eq(1)").val(data.data.number);
            $("input:eq(2)").val(data.data.company);
            $("input:eq(3)").val(data.data.username);
            $("input:eq(4)").val(data.data.userphone);
            if (data.data.status == 0) {
              // 未签收
              $(".status:eq(1)").prop("checked", true);
            } else {
              // 已签收
              $(".status:eq(0)").prop("checked", true);
            }
          }
        })
      });
    });

    $("#update").click(function () {
      var windowId = layer.load();
      var number = $("input:eq(1)").val();
      var company = $("input:eq(2)").val();
      var username = $("input:eq(3)").val();
      var userphone = $("input:eq(4)").val();
      var status = $(".status:checked").val();

      // 后面检测修改时，判断userPhone是否为空来决定是否重发短信，但是查到手机号后就不可能为空
      // 所以这里判断修改时手机号与查找时手机号不同时，表示手机号修改，将该字段赋值
      var express = {
        id:expressId,
        number:number,
        company:company,
        username:username,
        status:status
      }
      if (userphone != g_userPhone) {
        express.userphone = userphone;
      }

      $.getJSON("/express/update.do", express, function (data) {
        layer.close(windowId);
        layer.msg(data.result);
        if (data.status == 0) {
          $(".header:eq(1), .content:eq(1)").hide();

        }
      })
    });
  </script>
</html>      

delete.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/add.css"/>
  </head>
  <body>
    <div id="app">
      <div class="header">
        <span>删除快递信息</span>
      </div>
      <div class="content">
        <table>  
          <tr>
            <td class="text-right">运单号</td><td class="content_right"><input class="input inline-input" id="number" placeholder="请输入运单号码"> <span id="find" class="btn btn-info">立即查找</span></td>
          </tr>
        </table>
      </div>
      
      
      <div class="header">
        <span>查找信息如下</span>
      </div>
      <div class="content">
        <table>
          <tr>
            <td class="text-right">快递单号</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
          </tr>
          <tr>
            <td class="text-right">快递公司</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
          </tr>
          <tr>
            <td class="text-right">收货人姓名</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
          </tr>
          <tr>
            <td class="text-right">手机号码</td><td class="content_right"><input class="input" placeholder="请输入姓名"></td>
          </tr>
          <tr>
            <td class="text-right">快递状态</td><td id="status" class="content_right"><input type="radio" name="status">已签收  <input name="status" type="radio">未签收</td>
          </tr>
          <tr>
            <td></td><td class="content_right"><span class="btn btn-info" id="delete">立即删除</span> </td>
          </tr>
        </table>
      </div>
    </div>
  </body>
  <script src="/js/jquery2.1.4.js"></script>
  <script src="/layer/layer.js"></script>
  <script>
    $(".header:eq(1), .content:eq(1)").hide();
    var expressId = null;
    $(function () {
      $("#find").click(function () {
        var windowId = layer.load();
        var number = $("#number").val();
        $.getJSON("/express/find.do", {number:number}, function (data) {
          layer.close(windowId);
          layer.msg(data.result);
          if (data.status == 0) {
            $(".header:eq(1), .content:eq(1)").fadeIn(1000);
            expressId = data.data.id;
            $("input:eq(1)").val(data.data.number);
            $("input:eq(2)").val(data.data.company);
            $("input:eq(3)").val(data.data.username);
            $("input:eq(4)").val(data.data.userphone);
            $("input:eq(1),input:eq(2),input:eq(3),input:eq(4)").prop("disabled", true);
            if (data.data.status == 0) {
              // 未签收
              $("#status").html("未签收");
            } else {
              // 已签收
              $("#status").html("已签收");
            }
          }
        })
      });
    });

    $("#delete").click(function(){
      var windowId = layer.load();
      $.getJSON("/express/delete.do",{id:expressId},function(data){
        layer.close(windowId);
        layer.msg(data.result);
        if(data.status == 0){
          $(".header:eq(1),.content:eq(1)").hide();
        }
      });
    });
  </script>

</html>      

2，ExpressController中添加方法

新增三个处理请求的方法

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

    @ResponseBody("/express/update.do")
    public String update(HttpServletRequest req, HttpServletResponse resp) {
        int id = Integer.parseInt(req.getParameter("id"));
        String number = req.getParameter("number");
        String company = req.getParameter("company");
        String username = req.getParameter("username");
        String userphone = req.getParameter("userphone");
        int status = Integer.parseInt(req.getParameter("status"));

        Express e = new Express();
        e.setNumber(number);
        e.setCompany(company);
        e.setUsername(username);
        e.setUserphone(userphone);
        e.setStatus(status);
        boolean update = ExpressService.update(id, e);
        Message msg = new Message();
        if (update) {
            msg.setStatus(0);
            msg.setResult("修改成功");
        } else {
            msg.setStatus(-1);
            msg.setResult("修改失败");
        }
        String json = JSONUtil.toJSON(msg);
        return json;
    }

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