Update booking.jsp

pull/1/head
pw6qtp7hv 8 months ago
parent 962c1ab745
commit 6f75d58733

@ -2,138 +2,161 @@
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
// 获取当前项目的上下文路径,例如在部署到服务器后,可能是项目名称对应的路径部分,后续用于构建完整的资源访问路径等。
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
// 构建项目的基础路径包括协议如http或https、服务器名称、服务器端口以及上下文路径用于准确地定位项目中的各种资源比如样式表、脚本文件、图片等资源的引用地址都会基于这个基础路径来构建。
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!--_meta 作为公共模版分离出去-->
<!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" />
<link rel="Bookmark" href="/favicon.ico" >
<link rel="Shortcut Icon" href="/favicon.ico" />
<!--[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]-->
<!--/meta 作为公共模版分离出去-->
<title>确认订票信息</title>
<head>
<!-- 设置页面的字符编码为utf-8确保能正确显示各种字符 -->
<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" />
<!-- 设置页面的书签图标Bookmark链接指向/favicon.ico文件一般用于在浏览器书签栏显示图标 -->
<link rel="Bookmark" href="/favicon.ico" >
<!-- 设置页面的快捷图标Shortcut Icon链接同样指向/favicon.ico文件用于在浏览器标签页、地址栏等位置显示图标 -->
<link rel="Shortcut Icon" href="/favicon.ico" />
<!-- 条件注释当浏览器版本小于IE9时引入html5shiv.js和respond.min.js脚本文件这两个文件用于让低版本IE浏览器IE8及以下支持HTML5标签和CSS3的媒体查询特性 -->
<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框架的核心样式表文件用于构建页面的基本样式布局路径是基于前面构建的basePath来定位的 -->
<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图标字体库的样式表文件用于在页面中使用相应的图标字体来展示各种图标提高页面的可视化效果 -->
<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图片透明等显示问题 -->
<if IE 6>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]>
<!--/meta 作为公共模版分离出去-->
<title>确认订票信息</title>
</head>
<body>
<article class="page-container">
<form action="<%=basePath%>BookingServlet" method="post" class="form form-horizontal" id="form-member-add">
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red"></span></label>
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
<h1> 订 票 信 息 </h1>
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red"></span></label>
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
<h3 style="color: red;">请确认信息是否正确!</h3>
</div>
</div>
<input type="hidden" name="trainId" value="${train.trainId}">
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>姓名:</label>
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
<input type="text" disabled="disabled" class="input-text" value="${pmember.realName}" placeholder="" id="realName" name="realName">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>性别:</label>
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
<input type="text" disabled="disabled" class="input-text" value="${pmember.sex}" placeholder="" id="sex" name="sex">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>年龄:</label>
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
<input type="text" disabled="disabled" class="input-text" value="${pmember.age}" placeholder="" id="age" name="age">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>身份证号码:</label>
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
<input type="text" disabled="disabled" class="input-text" value="${pmember.idCard}" placeholder="" id="idCard" name="idCard">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车次:</label>
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
<input type="text" disabled="disabled" class="input-text" value="${train.trainNumber}" placeholder="" id="trainNumber" name="trainNumber">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>起始站:</label>
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
<input type="text" disabled="disabled" class="input-text" value="${train.startStation}" placeholder="" id="startStation" name="startStation">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>终点站:</label>
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
<input type="text" disabled="disabled" class="input-text" value="${train.endStation}" placeholder="" id="endStation" name="endStation">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>开车时间:</label>
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
<input type="text" disabled="disabled" class="input-text" value="${train.startTime}" placeholder="" id="startTime" name="startTime">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>到站时间:</label>
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
<input type="text" disabled="disabled" class="input-text" value="${train.endTime}" placeholder="" id="endTime" name="endTime">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车票价格:</label>
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
<input type="text" disabled="disabled" class="input-text" value="${train.price}" placeholder="" id="price" name="price">
</div>
</div>
<div class="row cl">
<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;确认&nbsp;&nbsp;">
</div>
</div>
</form>
</article>
<body>
<!-- 使用article标签定义一个页面区域通常用于表示独立的、自包含的内容块这里作为整个订票信息展示和确认的容器 -->
<article class="page-container">
<!-- 创建一个表单form用于提交订票相关信息action属性指定了表单提交的目标地址这里是BookingServletmethod属性设置为"post"表示以POST方式提交数据 -->
<form action="<%=basePath%>BookingServlet" method="post" class="form form-horizontal" id="form-member-add">
<!-- 创建一个行row容器用于布局内部的标签和表单控件cl类可能是用于设置一些列相关的样式规则可能是基于框架自定义的类名 -->
<div class="row cl">
<!-- 创建一个表单标签label用于显示提示文本col-xs-4 col-sm-3类表示在不同屏幕尺寸下超小屏幕xs和小屏幕sm该标签所占的列数这里用于控制布局位置 -->
<label class="form-label col-xs-4 col-sm-3"><span class="c-red"></span></label>
<!-- 创建一个表单控件所在的容器同样通过类名控制在不同屏幕尺寸下的宽度等布局样式这里设置了宽度为300px -->
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
<!-- 显示一个一级标题h1内容为"订 票 信 息",用于突出显示这部分是订票信息的展示区域 -->
<h1> 订 票 信 息 </h1>
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red"></span></label>
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
<!-- 显示一个三级标题h3颜色设置为红色用于提示用户确认信息是否正确 -->
<h3 style="color: red;">请确认信息是否正确!</h3>
</div>
</div>
<!-- 创建一个隐藏的输入框input用于传递列车的ID信息其值通过JSTL表达式${train.trainId})从后台传递过来的数据中获取,在表单提交时会将该值一起发送到服务器端 -->
<input type="hidden" name="trainId" value="${train.trainId}">
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>姓名:</label>
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
<!-- 创建一个文本输入框设置为禁用状态disabled="disabled"意味着用户不能修改该输入框中的内容其值通过JSTL表达式${pmember.realName}从后台获取并显示同时设置了占位符placeholder为空 -->
<input type="text" disabled="disabled" class="input-text" value="${pmember.realName}" placeholder="" id="realName" name="realName">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>性别:</label>
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
<input type="text" disabled="disabled" class="input-text" value="${pmember.sex}" placeholder="" id="sex" name="sex">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>年龄:</label>
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
<input type="text" disabled="disabled" class="input-text" value="${pmember.age}" placeholder="" id="age" name="age">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>身份证号码:</label>
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
<input type="text" disabled="disabled" class="input-text" value="${pmember.idCard}" placeholder="" id="idCard" name="idCard">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车次:</label>
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
<input type="text" disabled="disabled" class="input-text" value="${train.trainNumber}" placeholder="" id="trainNumber" name="trainNumber">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>起始站:</label>
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
<input type="text" disabled="disabled" class="input-text" value="${train.startStation}" placeholder="" id="startStation" name="startStation">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>终点站:</label>
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
<input type="text" disabled="disabled" class="input-text" value="${train.endStation}" placeholder="" id="endStation" name="endStation">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>开车时间:</label>
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
<input type="text" disabled="disabled" class="input-text" value="${train.startTime}" placeholder="" id="startTime" name="startTime">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>到站时间:</label>
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
<input type="text" disabled="disabled" class="input-text" value="${train.endTime}" placeholder="" id="endTime" name="endTime">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车票价格:</label>
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
<input type="text" disabled="disabled" class="input-text" value="${train.price}" placeholder="" id="price" name="price">
</div>
</div>
<div class="row cl">
<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
<!-- 创建一个提交按钮input类型为submit按钮文本为"确认"点击该按钮会触发表单提交操作将表单中的数据发送到指定的BookingServlet进行处理 -->
<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;确认&nbsp;&nbsp;">
</div>
</div>
</form>
</article>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
<!--请在下方写此页面业务相关的脚本这里预留了位置方便添加与该页面特定业务逻辑相关的JavaScript代码比如表单验证、数据处理等功能的代码 -->
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
<!--/请在上方写此页面业务相关的脚本-->
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
</html>
Loading…
Cancel
Save