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

最新推荐文章于 2024-10-15 13:04:43 发布

m0_63650176

最新推荐文章于 2024-10-15 13:04:43 发布

阅读量240

点赞数 1

文章标签：旅游前端

本文链接：https://blog.csdn.net/m0_63650176/article/details/139898258

版权

本文描述了火车票订单的管理员端页面是怎么编写的。

首先是后端部分，这里在前文已经说过了就不加赘述了。

然后是前端部分。首先添加一个输入框，可以输入用户的ID便于搜索查找，然后是搜索按钮，点击进行搜索操作。

<div class="layui-container" style="margin-top:10px">
        <form class="layui-form" action="">
            <div class="layui-form-item" style="margin-bottom: 30px">
                <div class="layui-inline" style="margin-left: 12%">
                    <label class="layui-form-label">用户ID</label>
                    <div class="layui-input-inline">
                        <input type="text" name="userId" placeholder="请输入用户ID" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <button type="button" class="layui-btn" id="search-button">搜索</button>
                </div>
            </div>
        </form>
    </div>

紧接着是新增按钮，点击后新增订单。

<div style="margin-left:50px">
        <button type="button" class="layui-btn layui-btn-normal" id="new-button">
            <i class="layui-icon">&#xe654;</i>添加 </button>
    </div>

然后是一个基于layui框架的页面布局，包括一个表格和分页按钮。表格用于展示火车订单数据，分页按钮用于实现订单列表的分页功能。在表格的tbody部分将会动态填充订单数据。整体布局采用了layui提供的栅格系统，可以在不同屏幕尺寸下进行自适应布局。

 <div class="layui-container" >
        <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>

接着写一个对话框（dialog），包括一个表单（form），用于编辑火车订单的信息。表单中包含了订单ID、用户ID、火车编号、出发站点、到达站点、出发时间、到达时间和座位类型等字段。每个字段都有对应的输入框，以及相应的lay-verify验证规则和提交按钮。这个对话框的样式设置了display: none;，所以初始状态下是隐藏的，可以通过相应的事件触发来显示这个对话框并进行订单信息的编辑操作。

<div id="editDialog" class="dialog-content"  style="display: none;">
        <form class="layui-form" lay-filter="editForm">
            <div class="layui-form-item">
                <label class="layui-form-label">订单ID</label>
                <div class="layui-input-block">
                    <input type="text" id="editOrderId" name="orderId" lay-verify="required" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户ID</label>
                <div class="layui-input-block">
                    <input type="text" id="editUserId" name="userId" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">火车编号</label>
                <div class="layui-input-block">
                    <input type="text" id="editTrainNumber" name="trainNumber" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">出发站点</label>
                <div class="layui-input-block">
                    <input type="text" id="editDepartureStation" name="departureStation" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">到达站点</label>
                <div class="layui-input-block">
                    <input type="text" id="editArrivalStation" name="arrivalStation" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">出发时间</label>
                <div class="layui-input-block">
                    <input type="text" id="editDepartureTime" name="departureTime" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">到达时间</label>
                <div class="layui-input-block">
                    <input type="text" id="editArrivalTime" name="arrivalTime" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">座位类型</label>
                <div class="layui-input-block">
                    <input type="text" id="editType" name="type" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="editSubmit" id="editSubmit">更改</button>
                </div>
            </div>
        </form>
    </div>

由于新增操作和编辑操作有些许不同，因此还要再写一个关于新增的对话框，用于新增火车订单信息。和之前的对话框类似，它包含了一个表单，里面有用户ID、火车编号、出发站点、到达站点、出发时间、到达时间和座位类型等字段，以及相应的输入框、验证规则和提交按钮。初始状态下该对话框也是隐藏的，需要通过相应的事件触发来显示并进行新增订单信息的操作。

<div id="editDialog2" class="dialog-content"  style="display: none;">
        <form class="layui-form" lay-filter="editForm">
            <div class="layui-form-item">
                <label class="layui-form-label">用户ID</label>
                <div class="layui-input-block">
                    <input type="text" id="editUserId2" name="userId2" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">火车编号</label>
                <div class="layui-input-block">
                    <input type="text" id="editTrainNumber2" name="trainNumber2" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">出发站点</label>
                <div class="layui-input-block">
                    <input type="text" id="editDepartureStation2" name="departureStation2" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">到达站点</label>
                <div class="layui-input-block">
                    <input type="text" id="editArrivalStation2" name="arrivalStation2" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">出发时间</label>
                <div class="layui-input-block">
                    <input type="text" id="editDepartureTime2" name="departureTime2" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">到达时间</label>
                <div class="layui-input-block">
                    <input type="text" id="editArrivalTime2" name="arrivalTime2" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">座位类型</label>
                <div class="layui-input-block">
                    <input type="text" id="editType2" name="type2" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="editSubmit2" id="editSubmit2">新增</button>
                </div>
            </div>
        </form>
    </div>

这样前端的编写就基本完成了。