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

本文介绍了管理员端飞机票订单页面前端方法的实现。

首先定义函数来更新分页按钮，实现了一个基本的分页功能，并且在用户点击分页按钮时动态加载对应页码的订单数据。首先先计算总页数，然后对分页按钮进行渲染，并定义。点击分页按钮触发的回调函数。

 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/page?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>';
    row += '<td>' + flightOrder.id + '</td>';
    row += '<td>' + flightOrder.uid + '</td>';
    row += '<td>' + flightOrder.flightNo + '</td>';
    row += '<td>' + flightOrder.airCompanyName + '</td>';
    row += '<td>' + flightOrder.oapname + '</td>';
    row += '<td>' + flightOrder.aapname + '</td>';
    row += '<td>' + flightOrder.flyOffOnlyTime + '</td>';
    row += '<td>' + flightOrder.arrivalOnlyTime + '</td>';
    row += '<td>' + flightOrder.price + '</td>';
    var operationButtons = `
        <button class="layui-btn layui-btn-normal layui-btn-sm edit-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));
      }

然后完善新增按钮和删除按钮的点击事件。

首先是新增按钮，点击后清除对话框的内容并显示对话框。

 $('#new-button').click(function () {
    $('#editDialog2 input').val('');
        openEditDialog2();
    });

完善 openEditDialog2()函数，用于打开一个包含表单的弹出对话框。

function openEditDialog2() {
            layui.layer.open({
                type: 1,
                title: '新增订单',
                content: $('#editDialog2'),
                area: ['500px', '550px']
            });
        }

完善提交按钮事件，在用户提交表单时，通过Ajax请求将表单数据发送到服务器以新增航班订单信息，并根据服务器返回的结果执行相应的操作。其具有以下结构：

1. 监听表单提交事件：

   layui.form.on('submit(editSubmit2)', function(data) { ... return false; });

   • layui.form.on('submit(editSubmit2)', function(data) {...})：监听表单editSubmit2的提交事件。
   • data：包含表单中的数据。

2. 获取表单数据：

   var formData = data.field;

   • data.field：这是一个包含表单中所有输入项值的对象。

3. 构造订单信息对象：

    var flightOrder = { 
   uid: formData.userId2, 
   flightNo: formData.flightNumber2,
    airCompanyName: formData.airCompanyName2, 
   oapname: formData.oapname2,
    aapname: formData.aapname2, 
   flyOffOnlyTime: formData.flyOffOnlyTime2,
    arrivalOnlyTime: formData.arrivalOnlyTime2,
    price: formData.price2
    };

   • 根据表单数据构造一个包含航班订单信息的对象 flightOrder。

4. 发送Ajax请求：

   $.ajax({
    type: "POST",
    url: "/flight/order", 
   contentType: "application/json", 
   data: JSON.stringify(flightOrder), 
   success: function (response) { 
   if (response.code === 200 && response.message === "success")
    { 
    alert("新增成功！"); 
    layui.layer.closeAll(); 
    fetchAndPopulateOrders(pageNum, pageSize, uid); } 
   else { console.error("新增失败:", response.message); }
    },
    error: function (xhr) {
    console.error("新增时发生错误:", xhr.status, xhr.statusText); }
    });

   • type: "POST"：指定请求方法为 POST。
   • url: "/flight/order"：指定请求的URL。
   • contentType: "application/json"：设置请求内容类型为 JSON。
   • data: JSON.stringify(flightOrder)：将 flightOrder 对象转换为 JSON 字符串并作为请求数据发送。
   • success: function (response) {...}：定义请求成功后的回调函数。
     • 如果响应状态码为 200 且消息为 "success"，表示新增成功，弹出提示并关闭所有layui层，然后刷新订单列表。
   • error: function (xhr) {...}：定义请求失败后的回调函数，输出错误信息。

5. 阻止表单默认提交行为：

   return false;

   • 返回 false，阻止表单的默认提交行为，以便使用Ajax请求进行处理。

然后是删除操作。写一个用于删除订单的确认对话框，当用户确认删除操作时，发送AJAX请求删除指定订单。

1. 获取订单ID：

   var orderId = e.target.getAttribute("data-order-id");

   • e.target：表示触发事件的目标元素。
   • getAttribute("data-order-id")：从目标元素中获取 data-order-id 属性的值，并将其存储在 orderId 变量中。

2. 弹出确认对话框：

   layer.confirm('确定要删除该订单吗？', {
    btn: ['确定', '取消'], // 按钮 
   title: '确认退订订单' }, function() {
    // 在这里定义用户点击“确定”后的操作 });

   • layer.confirm：调用layui的 confirm 方法弹出一个确认对话框。
   • '确定要删除该订单吗？'：对话框中显示的提示消息。
   • btn: ['确定', '取消']：设置对话框的按钮，分别为“确定”和“取消”。
   • title: '确认退订订单'：设置对话框的标题。
   • 第三个参数为一个回调函数，定义用户点击“确定”按钮后的操作。

3. 发送AJAX请求删除订单：

   $.ajax({ 
   url: '/flight/order/' + orderId, 
   type: 'DELETE',
    success: function(success) { // 处理成功响应
    },
    error: function(xhr, status, error) { // 处理错误响应 } });

   • url: '/flight/order/' + orderId：请求的URL，为 /flight/order/ 加上具体的订单ID。
   • type: 'DELETE'：HTTP请求类型为 DELETE，表示删除操作。
   • success: function(success)：当请求成功时执行的回调函数。
   • error: function(xhr, status, error)：当请求失败时执行的回调函数。

4. 处理成功响应：

   success: function(success) { 
   if (success) {
    alert("删除成功！"); 
   console.log("Order deleted successfully"); 
   layer.closeAll(); 
   fetchAndPopulateOrders(1, 10, uid); // 重新加载第一页数据 } 
   else { console.error("Failed to delete order"); } }

   • 检查 success 参数是否为真。如果为真，表示删除成功。
   • 弹出提示“删除成功”。
   • 在控制台输出成功信息。
   • 使用 layer.closeAll() 关闭所有弹出层。
   • 调用 fetchAndPopulateOrders(1, 10, uid) 函数重新加载订单列表，确保页面上显示的订单列表是最新的。

5. 处理错误响应：

   error: function(xhr, status, error) { console.error("Error deleting order:", error); }

   • 当请求失败时，在控制台输出错误信息，便于调试和处理问题。

这样就完成了新增和删除操作。新增操作和编辑操作相似就不加赘述了。

接着是搜索操作。

当用户点击搜索按钮时，获取输入框中的用户 ID，并调用函数 fetchAndPopulateOrders。

$('#search-button').click(function () {
        var uid = $('input[name="userId"]').val();
        fetchAndPopulateOrders(1, 10, uid);
    });

通过以上步骤就完成了管理员端飞机票订单页面前端方法的实现。