基于大模型的旅游平台（十三）

本文介绍了个人飞机票订单的编写。

后端和数据库部分

后端创建一个flightOrder的实体类，并与之对应创建数据库。

public class FlightOrder {
    @TableId(type = IdType.AUTO)
    private Integer id;                 // 主键
    private Integer uid;                  //用户ID
    private String flightNo;                // 航班号
    private String airCompanyName;          // 航空公司名称
    private String oapname;                 // 起飞机场名称
    private String aapname;                 // 到达机场名称
    private String arrivalOnlyTime;         // 仅到达时间
    private String flyOffOnlyTime;          // 仅起飞时间
    private Integer price;                  // 价格

}

然后在controller中编写方法实现对火车票订单的增删改查，并将结果使用统一API响应结果封装，这里就不多赘述是怎么写的了。因为这里是用户的个人订单因此只查找订单中uid与用户ID相同的订单并对其操作。

前端部分

写一个带有表格和分页按钮的订单列表页面，具体分为以下几个部分：

• 外部容器：使用Layui框架的容器类包裹整个页面内容，并通过内联样式添加顶部填充。
• 表格区域：使用Layui的表格样式类创建一个多列表格，用于展示订单信息。
• 分页按钮区域：创建一个新的行和列，用于放置分页按钮。

  <div class="layui-container" style="padding-top:70px;">
      <div class="layui-row">
          <div class="layui-col-md12">
              <table class="layui-table">
                  <thead>
                  <tr>
                      <th>ID</th>
                      <th>用户ID</th>
                      <th>航班号</th>
                      <th>航空公司名称</th>
                      <th>起飞机场名称</th>
                      <th>到达机场名称</th>
                      <th>起飞时间</th>
                      <th>到达时间</th>
                      <th>价格</th>
                      <th>操作</th>
                  </tr>
                  </thead>
                  <tbody id="tableBody">
                  <!-- 这里将会动态填充订单数据 -->
                  </tbody>
              </table>
          </div>
      </div>
      <div class="layui-row">
          <div class="layui-col-md12">
              <div id="paginationButtons" class="layui-box"></div>
          </div>
      </div>
  </div>

  定义一个函数，用于更新分页按钮的显示和行为，该函数该函数接受五个参数：pageNum（当前页数）、pageSize（每页显示条数）、uid（用户ID）、totalOrders（总订单数）并具有以下三个功能：

• 计算总页数：

  • 使用 Math.ceil(totalOrders / pageSize) 计算总页数，向上取整以确保覆盖所有订单。

• 渲染分页按钮：

  • 使用 Laypage 组件的 render 方法来渲染分页按钮。
  • 具体配置包括：
    • elem: 'paginationButtons'：指定分页按钮容器的元素id为 'paginationButtons'。
    • count: totalOrders：设置总记录数。
    • limit: pageSize：设置每页显示条数。
    • curr: pageNum：设置当前页数。
    • layout: [...]：自定义分页按钮的布局，包括总记录数、上一页、页码、下一页、每页显示条数选择、刷新按钮和跳转输入框。
    • jump: function(obj, first) {...}：设置点击分页按钮触发的回调函数，其中 obj 包含了新的页数和每页显示条数，first 表示是否首次加载页面。

• 点击分页按钮触发的回调函数：

  • 在 jump 回调函数中，判断如果非首次加载页面（!first），则调用 fetchAndPopulateOrders 函数，传入新的页数和每页显示条数，以获取并填充对应页的订单数据。

    // 定义函数来更新分页按钮
          function updatePaginationButtons(pageNum, pageSize, uid, totalOrders) {
              // 计算总页数
              var totalPages = Math.ceil(totalOrders / pageSize);
    
              // 渲染分页按钮
              laypage.render({
                  elem: 'paginationButtons', // 分页按钮容器
                  count: totalOrders, // 总记录数
                  limit: pageSize, // 每页显示条数
                  curr: pageNum, // 当前页数
                  layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 自定义分页布局
                  jump: function(obj, first) { // 点击分页按钮触发的回调函数
                      if (!first) { // 非首次加载页面才触发
                          fetchAndPopulateOrders(obj.curr, obj.limit, uid);
                      }
                  }
              });
          }

    接着定义函数来获取订单数据并填充表格。使用 fetch API 来获取订单数据，并打印返回的数据，以便调试。首先先确认返回的数据是否包含订单数据和订单总数，当有相应的数据时再对其进行操作。每次操作时先清空表格内容然后再填充订单数据到表格中。

    function fetchAndPopulateOrders(pageNum, pageSize, uid) {
              var url = '/flight/order/myOrder?pageNum=' + pageNum + '&pageSize=' + pageSize + '&uid=' + uid;
    
              // 使用 fetch API 来获取订单数据
              fetch(url)
              .then(response => response.json())
              .then(data => {
                  // 打印返回的数据，以便调试
                  console.log("Data type:", typeof data);
                  console.log("Data:", data);
    
                  // 确保返回的数据包含订单数据和订单总数
                  if (data.code === 200 && data.data && Array.isArray(data.data.data)) {
                       orders = data.data.data;
                      var totalOrders = data.data.total;
    
                      // 清空表格内容
                      document.getElementById("tableBody").innerHTML = "";
    
                      // 填充订单数据到表格中
                      orders.forEach(flightOrder => {
                          var row = '<tr>' +
                                      '<td>' + flightOrder.id + '</td>' +
                                      '<td>' + flightOrder.uid + '</td>' +
                                      '<td>' + flightOrder.flightNo + '</td>' +
                                      '<td>' + flightOrder.airCompanyName + '</td>' +
                                      '<td>' + flightOrder.oapname + '</td>' +
                                      '<td>' + flightOrder.aapname + '</td>' +
                                      '<td>' + flightOrder.arrivalOnlyTime + '</td>' +
                                      '<td>' + flightOrder.flyOffOnlyTime + '</td>' +
                                      '<td>' + flightOrder.price + '</td>' ;
                                       var operationButtons = `
            <button class="layui-btn layui-btn-normal layui-btn-sm change-order-btn" data-order-id="${flightOrder.id}">改签</button>
            <button class="layui-btn layui-btn-danger layui-btn-sm delete-order-btn" data-order-id="${flightOrder.id}">退订</button>`;
        row += '<td>' + operationButtons + '</td>';
        row += '</tr>';
                          document.getElementById("tableBody").innerHTML += row;
                      });
    
                      // 更新分页按钮
                      updatePaginationButtons(pageNum, pageSize, uid, totalOrders);
                  } else {
                      console.error("Invalid data format:", data);
                  }
              })
              .catch(error => console.error('Error fetching orders:', error));
          }

    结合了jQuery和Layui的功能，实现了一个简单但有效的订单删除交互。通过AJAX请求与服务器通信，使得删除操作更加动态和无缝。它具有以下功能：

  • 事件代理：使用事件代理方式监听动态生成的删除按钮的点击事件。
  • 获取订单ID：从被点击按钮的数据属性中获取订单ID。
  • 确认对话框：使用Layui的layer.confirm组件弹出确认对话框，提示用户确认删除操作。
  • AJAX请求：在用户确认删除后，发送DELETE请求到服务器删除订单，成功后重新加载订单列表。

    $(document).on("click", ".delete-order-btn", function() {
              // 获取订单 ID
              var orderId = $(this).data("order-id");
    
              // 弹出确认对话框
              layer.confirm('确定要退订该订单吗？', {
                  btn: ['确定', '取消'], // 按钮
                  title: '确认退订订单'
              }, function() {
                  // 用户点击确定，发送 AJAX 请求删除订单
                  $.ajax({
                      url: '/flight/order/' + orderId,
                      type: 'DELETE',
                      success: function(success) {
                          // 删除成功后的操作，更新订单列表
                          if (success) {
                          alert("退订成功！");
                              console.log("Order deleted successfully");
                              layer.closeAll();
                              // 调用函数重新加载订单列表
                              fetchAndPopulateOrders(1, 10, uid); // 重新加载第一页数据
                          } else {
                              console.error("Failed to delete order");
                          }
                      },
                      error: function(xhr, status, error) {
                          // 删除失败时的操作，可以提示用户或者记录错误信息等
                          console.error("Error deleting order:", error);
                      }
                  });
              });
          });

    最后在初始化页面加载第一页订单数据

    fetchAndPopulateOrders(pageNum, pageSize, uid);

    这样就完成了个人飞机票订单的基本编写。