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

本文介绍了火车票页面js和后端的编写。

后端

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

 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);
    }

JS

编写一个JavaScript函数，用于将火车信息渲染到页面上的一个DOM元素中。

使用jQuery选择器找到id为train-list的DOM元素，并将其赋值给trainListElem变量，并清空了火车列表的内容，为后续的展示做准备。

var trainListElem = $('#train-list');
        trainListElem.empty();

遍历了传入的trains数组，对每个火车信息进行处理。在遍历过程中，使用了模板字符串（template string）来构建trainCardHtml，包含了火车信息的HTML结构。

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>`;

将每个火车信息的HTML结构添加到trainListElem中，实现了在页面上展示火车信息的功能。

trainListElem.append(trainCardHtml);

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

将传入的出发时间和到达时间按照":"分割，得到一个包含小时和分钟的数组。

var dptParts = dptTime.split(':');
var arrParts = arrTime.split(':');

创建Date对象，用于表示出发时间和到达时间。在这里，我们假设日期都是2000年1月1日，因为我们只关心时间的差异。

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));

计算了到达时间与出发时间之间的差异并将差异时间转换为分钟，因为JavaScript中Date对象的时间单位是毫秒。

var diff = arrDate - dptDate; 
var diffMinutes = diff / 60000;

分别计算出小时数和剩余的分钟数，将计算得到的小时数和分钟数拼接成字符串，并返回作为函数的结果。

var hours = Math.floor(diffMinutes / 60);
var minutes = diffMinutes % 60;

return hours + '小时' + minutes + '分钟';

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

使用了一个名为laypage的对象的render方法来渲染分页控件，指定了分页控件要渲染到页面上的DOM元素的id为pagination，设置分页控件的总数据量为data对象中的total属性，表示总数据条数，设置每页显示的数据量为data对象中的size属性，表示每页数据条数，设置当前页码为data对象中的current属性，表示当前页的页码。

laypage.render({
            elem: 'pagination',
            count: data.total,
            limit: data.size,
            curr: data.current,

设置分页操作的回调函数。当用户点击分页控件进行跳转时，会执行这个回调函数。参数obj包含了跳转后的页码和每页显示的数据量，first表示是否是初始化时触发的跳转。

 jump: function (obj, first) {
                if (!first) {
                    getTrains(obj.curr, obj.limit, departureStation, arrivalStation);
                }
            }

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

使用了jQuery的ajax方法来发起异步请求

$.ajax({
            type: "GET",
            url: "/train/api/page",
            data: {
                page: pageNum,
                size: pageSize,
                departureStation: departureStation || "", // 默认值为空字符串
                arrivalStation: arrivalStation || "" // 默认值为空字符串
            },

当请求成功时，会执行这个回调函数。参数response是后端返回的数据。

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);
            }

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

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

编写初始加载默认车次

getTrains(1, 10, "北京", "上海");