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

本文介绍了个人火车票订单的编写。

后端和数据库部分

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

public class TrainOrder {
    @TableId(type = IdType.AUTO)
    private Integer id;                 // 主键
    private Integer uid;                // 用户ID
    private String trainNo;             // 列车编号
    private String dptStationName;      // 出发站名称
    private String arrStationName;      // 到达站名称
    private String dptTime;             // 出发时间
    private String arrTime;             // 到达时间
    private String type;                // 座位类型

}

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

前端部分

使用 layui 框架对订单管理页面进行布局。用一个表格来展示订单信息，并且预留了一个 <tbody> 标签，用于动态填充订单数据。此外，还有一个用于分页按钮的容器 。

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

然后定义函数来更新分页按钮。首先先计算总页数，然后对分页按钮进行渲染，并定义。点击分页按钮触发的回调函数。

 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 = '/train/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(trainOrder => {
                      var row = '<tr>' +
                                  '<td>' + trainOrder.id + '</td>' +
                                  '<td>' + trainOrder.uid + '</td>' +
                                  '<td>' + trainOrder.trainNo + '</td>' +
                                  '<td>' + trainOrder.dptStationName + '</td>' +
                                  '<td>' + trainOrder.arrStationName + '</td>' +
                                  '<td>' + trainOrder.dptTime + '</td>' +
                                  '<td>' + trainOrder.arrTime + '</td>' +
                                  '<td>' + trainOrder.type + '</td>' ;
                                  var operationButtons = `
        <button class="layui-btn layui-btn-normal layui-btn-sm change-order-btn" data-order-id="${trainOrder.id}">改签</button>
        <button class="layui-btn layui-btn-danger layui-btn-sm delete-order-btn" data-order-id="${trainOrder.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));
      }

然后完善删除按钮的点击事件，使点击后出现对话框，并在点击确认后退订该订单。

先获取订单ID

var orderId = $(this).data("order-id");

然后弹出对话框

layer.confirm('确定要退订该订单吗？', {
              btn: ['确定', '取消'], // 按钮
              title: '确认退订订单'
          }

在用户点击确认后发送 AJAX 请求删除订单，删除成功后则更新订单列表，删除失败时提示用户或者记录错误信息等

$.ajax({
                  url: '/train/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);

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