Update prepCenter.jsp

pull/1/head
pw6qtp7hv 8 months ago
parent cae50accac
commit 2bbdda5710

@ -3,85 +3,132 @@
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
// 获取当前项目的上下文路径,后续用于构建完整的资源访问路径,像样式表、脚本文件以及其他相关资源的引用都会基于此路径进行拼接,确保在不同部署环境下能准确找到对应的资源。
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
// 构建项目的基础路径将请求的协议如http或https、服务器名称、服务器端口以及前面获取的上下文路径组合起来形成一个完整的、可用于定位项目内各类资源的URL基础部分。
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>订单列表</title>
<!-- 设置页面的字符编码为UTF-8确保页面能正确显示各种字符避免出现乱码情况这是HTML页面的基本设置要求之一。 -->
<meta charset="utf-8">
<!-- 定义页面在不同浏览器渲染引擎下的兼容模式指定了webkit适用于Chrome、Safari等现代浏览器、ie-comp用于兼容IE浏览器的某些特定模式、ie-stand标准IE模式等多种模式目的是提高页面在各类浏览器中的兼容性使其能正常显示。 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<!-- 强制让页面以IE的最高版本模式或者Chrome浏览器的模式进行渲染有助于解决IE浏览器在处理一些现代网页标准时可能出现的兼容性问题保证页面呈现效果符合预期。 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 设置页面的视口viewport属性规定页面宽度等于设备宽度初始缩放比例、最小缩放比例和最大缩放比例都设定为1.0,并且禁止用户手动缩放页面,这样可以确保页面在不同尺寸的移动设备上能有较好的布局和展示效果。 -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<!-- 禁止浏览器对页面进行缓存,使得每次访问该页面时,浏览器都会向服务器重新请求页面内容,常用于页面内容经常更新、需要实时获取最新数据的场景。 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 条件注释当浏览器版本小于IE9时引入html5shiv.js和respond.min.js这两个脚本文件。html5shiv.js用于让低版本的IE浏览器IE8及以下能够识别和支持HTML5标签respond.min.js则是让低版本IE浏览器支持CSS3的媒体查询特性以此提升页面在旧版IE中的兼容性和显示效果。 -->
<if lt IE 9>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]>
<!-- 引入H-ui框架的核心样式表文件用于构建页面的基本样式布局比如设置字体、颜色、间距等通用样式为整个页面提供一个统一的外观基础。 -->
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui/css/H-ui.min.css" />
<!-- 引入H-ui.admin框架的样式表文件该文件针对后台管理系统页面进行了样式定制包含了更多符合后台管理界面风格和操作需求的样式规则例如表单样式、表格样式、按钮样式等用于进一步美化和规范页面的外观显示。 -->
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui.admin/css/H-ui.admin.css" />
<!-- 引入Hui-iconfont图标字体库的样式表文件通过这个文件可以在页面中使用相应的图标字体来展示各种图标图标字体具有便于通过CSS样式调整大小、颜色等属性的优点并且在不同分辨率下能保持较好的显示效果可增强页面的可视化效果和交互性。 -->
<link rel="stylesheet" type="text/css" href="<%=basePath%>lib/Hui-iconfont/1.0.8/iconfont.css" />
<!-- 引入H-ui.admin框架的默认皮肤样式表文件用于设置页面的整体皮肤风格其id属性设置为"skin"方便后续通过JavaScript等方式实现动态切换皮肤的功能以满足不同用户对于页面外观风格的个性化需求。 -->
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui.admin/skin/default/skin.css" id="skin" />
<!-- 引入H-ui.admin框架的额外样式表文件可能包含一些自定义的样式规则用于进一步细化和调整页面的外观显示例如对某些特定元素的样式进行补充或覆盖框架默认样式中的相关设置从而实现更精准的页面设计效果。 -->
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui.admin/css/style.css" />
<!-- 条件注释当浏览器版本为IE6时引入DD_belatedPNG_0.0.8a-min.js脚本文件并执行相应的函数来修复IE6下PNG图片透明等显示问题确保页面中的PNG图片在IE6浏览器中能正常显示避免出现显示异常的情况。 -->
<if IE 6>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]>
<title>订单列表</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 订单中心 <span class="c-gray en">&gt;</span> 订单列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
<div class="cl pd-5 bg-1 bk-gray mt-20">
<span class="l"> <a class="btn btn-primary radius" data-title="导出Excel" data-href="<%=basePath%>ExportExcelServlet" href="<%=basePath%>ExportExcelServlet"><i class="Hui-iconfont">&#xe600;</i> 导出Excel</a></span>
<span class="r">共有数据:<strong>${prepList.size()}</strong> 条</span> </div>
<div class="mt-20">
<table class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
<thead>
<tr class="text-c">
<th width="30">序号</th>
<th width="60">订单编号</th>
<th width="60">会员信息ID</th>
<th width="80">乘车人详细信息</th>
<th width="80">车次</th>
<th width="80">起始站</th>
<th width="80">终点站</th>
<th width="120">开车时间</th>
<th width="120">到达时间</th>
<th width="60">票价</th>
<th width="60">付款情况</th>
<th width="120">订票时间</th>
<th width="80">操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${prepList}" var="prep" varStatus="status">
<tr class="text-c">
<td>${status.index+1}</td>
<td>${prep.prepId}</td>
<td>${prep.pmemberId}</td>
<td>
<a href="<%=basePath%>GetPmemberByPmemberIdServlet?pmemberId=${prep.pmemberId}">
<%-- <img alt="" src="<%=basePath%>images/look.jpg"> --%>
点击查看
</a>
</td>
<td>${prep.trainNumber}</td>
<td>${prep.startStation}</td>
<td>${prep.endStation}</td>
<td>${prep.startTime}</td>
<td>${prep.endTime}</td>
<td>${prep.price}</td>
<c:if test="${prep.way == true}">
<td>已付款</td>
</c:if>
<c:if test="${prep.way == false}">
<td style="color:red">未付款</td>
</c:if>
<td>
<fmt:formatDate value="${prep.booktime}" pattern="yyyy-MM-dd HH:mm:ss"/>
</td>
<td class="f-14 td-manage">
<!-- 使用nav标签创建一个面包屑导航栏用于清晰展示当前页面在整个网站结构中的位置路径方便用户进行页面导航以及了解所处层级关系。通过图标字体Hui-iconfont展示首页图标并使用<span>标签结合特定样式来分隔不同层级的名称同时提供一个刷新按钮通过JavaScript实现页面刷新功能。 -->
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 订单中心 <span class="c-gray en">&gt;</span> 订单列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<!-- 创建一个页面容器page-container用于对页面内的相关内容进行分组和布局管理方便统一设置样式以及整体的页面结构组织常见于基于特定框架开发的页面中有助于实现模块化和规范化的页面设计。 -->
<div class="page-container">
<!-- 创建一个包含多个类名的div元素用于设置布局样式其中"cl"类可能用于控制列相关的布局样式(具体取决于所使用框架的定义),"pd-5"可能表示设置内边距为5单位可能是像素等依框架而定"bg-1"和"bk-gray"大概率是用于设置背景颜色相关的样式,"mt-20"则明确设置了上边距为20px使得该区域在页面中有合适的间距和视觉呈现效果。 -->
<div class="cl pd-5 bg-1 bk-gray mt-20">
<!-- 创建一个位于左侧的span元素用于放置导出Excel的按钮通过使用a标签模拟按钮样式并添加多个类名来设置按钮的外观样式如btn btn-primary radius表示这是一个主要的、具有特定样式的圆角按钮同时利用data-title属性设置按钮的提示信息可在一些交互场景下显示比如鼠标悬停时的提示框内容data-href和href属性都指向导出Excel的Servlet地址通过basePath构建完整路径点击该按钮可触发相应的导出操作将订单数据导出为Excel文件。 -->
<span class="l">
<a class="btn btn-primary radius" data-title="导出Excel" data-href="<%=basePath%>ExportExcelServlet" href="<%=basePath%>ExportExcelServlet"><i class="Hui-iconfont">&#xe600;</i> 导出Excel</a>
</span>
<!-- 创建一个位于右侧的span元素用于显示订单数据的总数信息通过使用JSTL表达式${prepList.size()}获取名为prepList的集合可能是从后台传递过来的订单信息列表的元素个数并展示给用户让用户了解当前订单数据的总量情况。 -->
<span class="r">共有数据:<strong>${prepList.size()}</strong> 条</span>
</div>
<!-- 创建一个距离顶部20px的div元素用于放置展示订单信息的表格确保表格在页面中有合适的布局位置避免与其他元素过于紧凑或重叠。 -->
<div class="mt-20">
<!-- 创建一个HTML表格table并为其添加了多个类名来设置表格的样式特性例如"table-border"表示表格有边框,"table-bordered"进一步细化边框样式,"table-bg"可能用于设置表格的背景颜色或背景样式,"table-hover"实现鼠标悬停在表格行上时的交互效果(如改变背景色等),"table-sort"用于标识该表格支持排序功能后续通过JavaScript代码实现具体排序逻辑"table-responsive"使表格具备响应式布局能力,能在不同屏幕尺寸下自适应显示,提升用户体验。 -->
<table class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
<!-- 创建表头thead部分用于定义表格每列的标题内容和样式里面的每一个<tr>标签代表一行标题,而<th>标签则代表每列的具体标题单元格通过设置width属性来指定各列的宽度使表格布局更加规整、清晰。 -->
<thead>
<tr class="text-c">
<!-- 定义序号列设置宽度为30px用于展示订单信息在列表中的顺序编号方便用户查看和定位具体订单记录。 -->
<th width="30">序号</th>
<!-- 定义订单编号列宽度为60px用于展示每个订单在系统中的唯一标识编号便于后台管理和数据关联操作等。 -->
<th width="60">订单编号</th>
<!-- 定义会员信息ID列宽度为60px用于展示与该订单相关联的会员信息的唯一标识编号通过此ID可以关联到会员的详细资料等信息用于后续操作或数据查询等用途。 -->
<th width="80">会员信息ID</th>
<!-- 定义乘车人详细信息列宽度为80px此处通过放置一个链接a标签来引导用户查看更详细的乘车人信息内容链接指向相应的ServletGetPmemberByPmemberIdServlet并传递会员信息ID作为参数以获取并展示该订单对应的乘车人详细信息虽然当前代码中图片显示部分被注释掉了但可能原本有通过图片等方式引导查看的设计意图。 -->
<th width="80">乘车人详细信息</th>
<!-- 定义车次列宽度为80px用于展示该订单所对应的车次信息方便用户快速了解订单相关的车次情况。 -->
<th width="80">车次</th>
<!-- 定义起始站列宽度为80px用于展示该订单行程的起始站信息明确行程的出发地点。 -->
<th width="80">起始站</th>
<!-- 定义终点站列宽度为80px用于展示该订单行程的终点站信息明确行程的到达地点。 -->
<th width="80">终点站</th>
<!-- 定义开车时间列宽度为120px用于展示该订单所对应车次的开车时间信息方便用户知晓出行的具体出发时间。 -->
<th width="120">开车时间</th>
<!-- 定义到达时间列宽度为120px用于展示该订单所对应车次的到达时间信息方便用户知晓行程的结束时间。 -->
<th width="120">到达时间</th>
<!-- 定义票价列宽度为60px用于展示该订单对应的车票价格信息让用户清楚购票所需费用情况。 -->
<th width="60">票价</th>
<!-- 定义付款情况列宽度为60px通过使用JSTL的<c:if>标签根据订单对象中way属性的值来动态显示不同的付款状态文本如果way属性值为true表示已付款就在表格单元格中显示"已付款"字样如果way属性值为false则显示红色的"未付款"字样,直观地告知用户订单的付款情况。 -->
<th width="60">付款情况</th>
<!-- 定义订票时间列宽度为120px使用JSTL的<fmt:formatDate>标签对订单的订票时间booktime属性进行格式化处理按照"yyyy-MM-dd HH:mm:ss"的格式展示给用户,使其呈现为清晰易读的日期时间格式,方便用户了解订单的预订时间信息。 -->
<th width="120">订票时间</th>
<!-- 定义操作列宽度为80px用于放置针对订单信息进行操作的链接按钮如编辑和删除操作通过图标字体Hui-iconfont展示相应图标并设置链接指向对应的ServletUpdatePrepAdminServlet用于编辑、DeletePrepAmdinServlet用于删除同时传递订单编号作为参数实现对具体订单记录的相应操作功能每个链接都设置了无文本装饰样式text-decoration:none以及左侧外边距ml-5来优化外观和布局。 -->
<th width="80">操作</th>
</tr>
</thead>
<!-- 创建表体tbody部分用于填充表格的具体数据行每一行对应一条订单记录信息通过JSTL的<c:forEach>标签循环遍历名为prepList的订单信息集合将每个订单对象依次取出进行数据展示。 -->
<tbody>
<c:forEach items="${prepList}" var="prep" varStatus="status">
<tr class="text-c">
<!-- 在表格单元格中展示当前订单记录的序号通过循环状态的索引从0开始加1来计算得到确保序号从1开始依次递增方便用户查看和计数。 -->
<td>${status.index + 1}</td>
<!-- 在表格单元格中展示当前订单的订单编号直接从prep对象中获取prepId属性值进行展示该编号是订单在系统中的唯一标识用于各种数据关联和操作定位等用途。 -->
<td>${prep.prepId}</td>
<td>${prep.pmemberId}</td>
<td>
<!-- 创建一个链接a标签用于引导用户查看订单对应的乘车人详细信息链接的href属性指向GetPmemberByPmemberIdServlet并传递会员信息ID作为参数通过JSTL表达式嵌入pmemberId的值点击该链接可跳转到相应页面获取并展示更详细的乘车人信息内容虽然当前代码中图片显示相关部分<img>标签)被注释掉了,但可能原本有通过图片等可视化元素引导点击查看的设计思路,现在仅显示文本"点击查看"作为替代提示。 -->
<a href="<%=basePath%>GetPmemberByPmemberIdServlet?pmemberId=${prep.pmemberId}">
<%-- <img alt="" src="<%=basePath%>images/look.jpg"> --%>
点击查看
</a>
</td>
<td>${prep.trainNumber}</td>
<td>${prep.startStation}</td>
<td>${prep.endStation}</td>
<td>${prep.startTime}</td>
<td>${prep.endTime}</td>
<td>${prep.price}</td>
<!-- 使用JSTL的<c:if>条件判断标签根据订单对象中way属性的值来决定显示不同的付款状态文本如果way值为true表示已付款就在表格单元格中显示"已付款"字样如果way值为false则显示红色的"未付款"字样通过设置style属性来改变文本颜色直观地告知用户订单的付款情况。 -->
<c:if test="${prep.way == true}">
<td>已付款</td>
</c:if>
<c:if test="${prep.way == false}">
<td style="color:red">未付款</td>
</c:if>
<td>
<!-- 使用JSTL的<fmt:formatDate>标签对订单的订票时间booktime属性进行格式化处理按照"yyyy-MM-dd HH:mm:ss"的日期时间格式将其转换为易读的字符串形式并展示在表格单元格中,方便用户直观了解订单的预订时间信息。 -->
<fmt:formatDate value="${prep.booktime}" pattern="yyyy-MM-dd HH:mm:ss"/>
</td>
<td class="f-14 td-manage">
<!-- 创建一个编辑操作的链接a标签设置无文本装饰样式text-decoration:none以及左侧外边距ml-5用于优化外观布局href属性指向UpdatePrepAdminServlet并通过
<a style="text-decoration:none" class="ml-5" href="<%=basePath%>UpdatePrepAdminServlet?prepId=${prep.prepId}" title="编辑"><i class="Hui-iconfont">&#xe6df;</i></a>
<a style="text-decoration:none" class="ml-5" href="<%=basePath%>DeletePrepAmdinServlet?prepId=${prep.prepId}" title="删除"><i class="Hui-iconfont">&#xe6e2;</i></a>
</td>

Loading…
Cancel
Save