山东大学软件学院项目实训-创新实训-基于大模型的旅游平台（十八）

火车票页面开发

本文介绍了如何编写一个用于火车票信息分页查询的API，并结合前端JavaScript代码实现火车信息的渲染与分页操作。

后端开发

我们首先编写一个用于处理火车票信息分页查询的API方法。该方法根据请求参数进行相应的查询操作，然后将查询结果封装成API响应返回给调用者。

java
复制代码
public ResponseEntity<ApiResponse<Page<TrainTicket>>> apiTrainPage(
        @RequestParam(value = "page", defaultValue = "1") int pageNum,
        @RequestParam(value = "size", defaultValue = "10") int pageSize,
        @RequestParam(value = "departureStation", required = false, defaultValue = "北京") String departureStation,
        @RequestParam(value = "arrivalStation", required = false, defaultValue = "上海") String arrivalStation) {

    Page<TrainTicket> page = new Page<>(pageNum, pageSize);
    QueryWrapper<TrainTicket> queryWrapper = new QueryWrapper<>();
    queryWrapper.orderByAsc("dpt_time"); // 按照出发时间升序排序

    if (departureStation != null && !departureStation.isEmpty()) {
        queryWrapper.like("dpt_station_name", departureStation); // 模糊匹配出发站字段
    }
    if (arrivalStation != null && !arrivalStation.isEmpty()) {
        queryWrapper.like("arr_station_name", arrivalStation); // 模糊匹配到达站字段
    }

    Page<TrainTicket> result = trainTicketService.page(page, queryWrapper);
    ApiResponse<Page<TrainTicket>> response = ApiResponse.success(result);
    return ResponseEntity.ok(response);
}

前端开发
渲染火车信息

编写一个JavaScript函数，用于将火车信息渲染到页面上的DOM元素中。使用jQuery选择器找到id为train-list的DOM元素，并将其赋值给trainListElem变量，同时清空火车列表的内容，为后续展示做准备。

javascript
复制代码
var trainListElem = $('#train-list');
trainListElem.empty();

trains.forEach(function (train) {
    var duration = calculateDuration(train.dptTime, train.arrTime);
    var trainCardHtml = `
        <div class="ticket-card">
            <div class="ticket-section">
                <span class="departure-time">${train.dptTime}</span>
                <span class="station-name">${train.dptStationName}</span>
            </div>
            <div class="ticket-section">
                <span class="trainNo">${train.trainNo}</span>
                <span class="duration">${duration}</span>
            </div>
            <div class="ticket-section">
                <span class="arr-time">${train.arrTime}</span>
                <span class="station-name">${train.arrStationName}</span>
            </div>
            <button class="book-button">预订</button>
        </div>`;
    
    trainListElem.append(trainCardHtml);
});

计算时间差

编写一个JavaScript函数，用于计算两个时间之间的时间差并格式化输出。

javascript
复制代码
function calculateDuration(dptTime, arrTime) {
    var dptParts = dptTime.split(':');
    var arrParts = arrTime.split(':');
    
    var dptDate = new Date(2000, 0, 1, parseInt(dptParts[0], 10), parseInt(dptParts[1], 10));
    var arrDate = new Date(2000, 0, 1, parseInt(arrParts[0], 10), parseInt(arrParts[1], 10));
    
    var diff = arrDate - dptDate;
    var diffMinutes = diff / 60000;
    
    var hours = Math.floor(diffMinutes / 60);
    var minutes = diffMinutes % 60;
    
    return hours + '小时' + minutes + '分钟';
}

渲染分页控件

编写一个用于渲染分页控件并设置分页操作的JavaScript函数。

javascript
复制代码
function renderPagination(data, departureStation, arrivalStation) {
    laypage.render({
        elem: 'pagination',
        count: data.total,
        limit: data.size,
        curr: data.current,
        jump: function (obj, first) {
            if (!first) {
                getTrains(obj.curr, obj.limit, departureStation, arrivalStation);
            }
        }
    });
}

请求火车信息

编写一个用于向后端请求火车信息的函数。

javascript
复制代码
function getTrains(pageNum, pageSize, departureStation, arrivalStation) {
    $.ajax({
        type: "GET",
        url: "/train/api/page",
        data: {
            page: pageNum,
            size: pageSize,
            departureStation: departureStation || "",
            arrivalStation: arrivalStation || ""
        },
        success: function (response) {
            if (response.code === 200 && response.message === "success") {
                loadTrains(response.data.records);
                renderPagination(response.data, departureStation, arrivalStation);
            } else {
                console.error("Error fetching train data:", response.message);
            }
        },
        error: function (xhr) {
            console.error("An error occurred:", xhr.status, xhr.statusText);
        }
    });
}

触发搜索事件

编写点击搜索按钮时触发的事件。

javascript
复制代码
$('#search-button').click(function () {
    var dptStation = $('input[name="dptCityName"]').val();
    var arrStation = $('input[name="arrCityName"]').val();
    getTrains(1, 10, dptStation, arrStation);
});

初始加载默认车次

页面加载时，默认查询并显示从“北京”到“上海”的车次信息。

javascript
复制代码
getTrains(1, 10, "北京", "上海");

总结

通过后端API方法的实现和前端JavaScript函数的编写，我们可以实现一个功能完整的火车票查询页面。用户可以通过搜索功能查找不同站点之间的火车票信息，系统还提供分页功能，使用户能够方便地浏览所有车次。这样一个系统不仅提升了用户体验，也展示了前后端协作开发的具体实现。