pyveob72j
/
hotelbook-JavaWeb-master
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gzs

Browse Source
branch_gzs
gzs 9 months ago
parent cb2c1a7f50
commit 44a125f1d3
5 changed files with 284 additions and 155 deletions
Show Stats Download Patch File Download Diff File

96
src/webapp/webpage/billinfo/billInfoHeader.jsp
Unescape View File

@ -1,39 +1,73 @@
<%@ page contentType="text/html;charset=UTF-8" %>
<!-- JSP页面指令，设置页面的内容类型为“text/html”（即HTML格式页面），并指定字符编码为“UTF-8”，
确保页面中的字符能被正确解析和显示，避免出现乱码问题 -->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>酒店管理系统</title>
<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
<link rel="stylesheet" href="../../MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css">
<script src="../../js/toExcel/xlsx.full.min.js"></script>
<script type="text/javascript" src="../../js/toExcel/FileSaver.js"></script>
<script type="text/javascript" src="../../js/toExcel/Export2Excel.js"></script>
</head>
<head>
<!-- 设置HTML页面的字符编码为“utf-8”，再次明确页面遵循的字符编码规范，辅助浏览器准确读取页面内容 -->
<meta charset="utf-8">
<!-- 设置页面的视口（viewport）相关属性，width=device-width表示页面宽度等于设备宽度，
initial-scale=1表示初始缩放比例为1（即不缩放），maximum-scale=1表示最大缩放比例为1（限制用户不能放大页面），
用于适配不同移动设备屏幕，确保页面在移动端能合理显示 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- 设置页面的标题为“酒店管理系统”，该标题会显示在浏览器的标题栏中，让用户知晓当前页面所属的系统名称 -->
<title>酒店管理系统</title>
<!-- 引入Layui框架的样式文件（layui.css），href属性指定了文件的相对路径（上级目录下的js/layui/css/layui.css），
media="all"表示此样式适用于所有媒体类型，也就是在各种设备上都会应用该样式 -->
<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
<!-- 引入Font Awesome字体图标库的样式文件（font-awesome.min.css），用于在页面中使用各种图标，
其路径为上级目录下的MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css -->
<link rel="stylesheet" href="../../MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css">
<!-- 引入处理Excel相关功能的JavaScript库（xlsx.full.min.js），可能用于后续将数据导出为Excel等操作，
其路径指向上级目录下的js/toExcel/xlsx.full.min.js -->
<script src="../../js/toExcel/xlsx.full.min.js"></script>
<!-- 引入FileSaver.js脚本文件，该文件通常用于在浏览器端实现文件保存功能，
比如配合前面的Excel库将生成的Excel文件保存到本地，其路径为上级目录下的js/toExcel/FileSaver.js -->
<script type="text/javascript" src="../../js/toExcel/FileSaver.js"></script>
<!-- 引入自定义的用于导出数据到Excel的脚本文件（Export2Excel.js），里面应该包含了具体的导出逻辑和相关功能实现，
其路径为上级目录下的js/toExcel/Export2Excel.js -->
<script type="text/javascript" src="../../js/toExcel/Export2Excel.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">酒店管理系统</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item">
<a href="此处填充地址" target="billInfo">账单结算</a>
</li>
<li class="layui-nav-item">
<a href="此处填充地址" target="billInfo">账单管理</a>
</li>
</div>
</div>
<body class="layui-layout-body">
<!-- 创建一个布局容器（layui-layout）元素，并应用类名“layui-layout-admin”，通常这是Layui框架中用于构建后台管理系统页面布局的基础结构，
可以方便地划分出头部、侧边栏、主体内容、底部等区域 -->
<div class="layui-layout layui-layout-admin">
<!-- 创建一个用于表示页面头部的<div>元素，在Layui的布局结构中，该元素内放置头部相关的内容，如网站logo、导航菜单等 -->
<div class="layui-header">
<!-- 创建一个带有类名“layui-logo”的<div>元素，用于显示网站的logo或名称，这里显示文字“酒店管理系统”，作为页面的标识 -->
<div class="layui-logo">酒店管理系统</div>
<!-- 这是一段HTML注释，说明下面的代码用于构建头部区域，并且可以配合Layui已有的水平导航组件来实现更丰富的导航功能 -->
<!-- 头部区域（可配合layui已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<!-- 创建一个列表项（li）元素，应用类名“layui-nav-item”，作为导航栏中的一个菜单项 -->
<li class="layui-nav-item">
<!-- 创建一个超链接（a）元素，设置其href属性为“此处填充地址”（这里应该后续要替换为实际的链接地址，指向账单结算相关页面），
target属性设置为“billInfo”（可能用于在特定的iframe或者页面区域展示链接内容等，不过此处未看到对应定义，可能需要完善），文字为“账单结算”，
点击该链接可跳转到账单结算相关页面 -->
<a href="此处填充地址" target="billInfo">账单结算</a>
</li>
<li class="layui-nav-item">
<!-- 与上面的菜单项类似，创建一个超链接元素，href属性同样需填充实际地址，用于跳转到账单管理相关页面，文字为“账单管理” -->
<a href="此处填充地址" target="billInfo">账单管理</a>
</li>
</ul>
</div>
</div>
<script src="../../js/layui/layui.js"></script>
<script src="../../js/jquery.js"></script>
<!-- 引入Layui框架的JavaScript脚本文件（layui.js），这是使用Layui框架各种功能和组件的基础，
路径指向上级目录下的js/layui/layui.js -->
<script src="../../js/layui/layui.js"></script>
<!-- 引入jQuery库的JavaScript脚本文件（jquery.js），jQuery常用于操作DOM元素、处理事件、进行AJAX交互等，
方便简化JavaScript编程，其路径为上级目录下的js/jquery.js -->
<script src="../../js/jquery.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function() {});
</script>
</body>
<script>
//JavaScript代码区域
// 使用Layui框架的模块加载机制，加载' element '（Layui中用于操作页面元素、动态渲染页面结构等相关功能的模块），
// 并在加载完成后执行回调函数，不过此处回调函数内暂时没有具体的逻辑代码（可能后续需要添加实现具体功能的代码）
layui.use('element', function() {});
</script>
</body>
</html>

27
src/webapp/webpage/billinfo/billInfoMain.jsp
Unescape View File

@ -1,14 +1,25 @@
<%@ page contentType="text/html;charset=UTF-8" %>
<!-- JSP页面指令，设置页面的内容类型为“text/html”（即HTML格式页面），并指定字符编码为“UTF-8”，
确保页面中的字符能被正确解析和显示，避免出现乱码问题 -->
<html>
<head>
<meta charset="utf-8">
<title>酒店管理系统</title>
</head>
<head>
<!-- 设置HTML页面的字符编码为“utf-8”，再次明确页面遵循的字符编码规范，辅助浏览器准确读取页面内容 -->
<meta charset="utf-8">
<!-- 设置页面的标题为“酒店管理系统”，该标题会显示在浏览器的标题栏中，让用户知晓当前页面所属的系统名称 -->
<title>酒店管理系统</title>
</head>
<frameset rows="60,*" frameborder="0">
<frame name="Header" src="billInfoHeader.jsp" />
<frame name="billInfo" src="../../nav.html" />
</frameset>
<!-- 使用<frameset>标签定义一个框架集，通过rows属性将页面划分为上下两部分，
"60,*"表示上面部分高度为60像素（通常用于放置如标题栏、导航栏等固定高度的区域），下面部分占据剩余的所有空间（*代表自适应剩余高度），
frameborder属性设置为“0”表示框架之间的边框不显示，创建出一个分区域布局的页面框架结构 -->
<frameset rows="60,*" frameborder="0">
<!-- 在框架集中定义一个<frame>元素，设置其name属性为“Header”，用于给这个框架命名（方便后续通过超链接的target属性等方式来指定内容在该框架中显示），
src属性指定了此框架要加载显示的页面文件为“billInfoHeader.jsp”，也就是这个框架初始会展示“billInfoHeader.jsp”页面的内容，通常用于放置页面的头部相关内容 -->
<frame name="Header" src="billInfoHeader.jsp" />
<!-- 再定义一个<frame>元素，name属性设置为“billInfo”，同样是给框架命名方便后续操作，
src属性指定加载“../../nav.html”文件作为此框架要显示的内容，这个框架一般用于放置页面的主体导航或者主要内容部分 -->
<frame name="billInfo" src="../../nav.html" />
</frameset>
</html>

160
src/webapp/webpage/orderInfo/selectRoomType.jsp
Unescape View File

@ -1,77 +1,107 @@
<%@ page contentType="text/html;charset=UTF-8" %>
<!-- JSP页面指令，设置此页面内容类型为“text/html”（即HTML格式页面），并指定字符编码为“UTF-8”，
这样能确保页面中的字符可被正确解析和显示，避免出现乱码情况 -->
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
<script src="../../js/layui/layui.js"></script>
<script src="../../js/jquery.js"></script>
<script src="../../js/global.js"></script>
<style>
.fixDiv {
position: sticky;
bottom: 0;
background-color: white;
BORDER-BOTTOM: #e1e1e1 1px solid;
BORDER-TOP: #e1e1e1 1px solid;
BORDER-RIGHT: #e1e1e1 1px solid;
BORDER-LEFT: #e1e1e1 1px solid;
border-radius: 10px
}
</style>
</head>
<head>
<!-- 设置HTML页面的字符编码为“utf-8”，再次明确页面所遵循的字符编码标准，辅助浏览器准确读取页面内容 -->
<meta charset="utf-8">
<!-- 引入Layui框架的样式文件（layui.css），href属性指定了文件的相对路径（上级目录下的js/layui/css/layui.css），
media="all"表示该样式适用于所有媒体类型，也就是在各种设备上都应用此样式 -->
<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
<!-- 引入Layui框架的JavaScript脚本文件（layui.js），该文件包含了Layui框架的各种功能实现，
是后续使用Layui组件和功能的基础 -->
<script src="../../js/layui/layui.js"></script>
<!-- 引入jQuery库的JavaScript脚本文件（jquery.js），jQuery常用于操作DOM元素、处理事件、进行AJAX交互等，方便简化JavaScript编程 -->
<script src="../../js/jquery.js"></script>
<!-- 引入自定义的全局JavaScript脚本文件（global.js），里面可能包含了整个系统页面通用的一些变量定义、函数等逻辑 -->
<script src="../../js/global.js"></script>
<style>
.fixDiv {
// 将类名为“fixDiv”的元素设置为粘性定位（sticky），使其在滚动页面时，当到达特定位置（这里是底部，由bottom: 0指定）时会固定在相应位置，
// 常用于创建如底部固定栏等效果
position: sticky;
bottom: 0;
// 设置元素的背景颜色为白色，用于定义该固定栏的背景颜色显示效果
background-color: white;
// 设置元素的下边框样式，宽度为1px，颜色为#e1e1e1（一种浅灰色），样式为实线，用于给该固定栏添加下边框的视觉效果
BORDER-BOTTOM: #e1e1e1 1px solid;
// 设置元素的上边框样式，与下边框类似，宽度、颜色、样式相同，添加一个上边框
BORDER-TOP: #e1e1e1 1px solid;
// 设置元素的右边框样式，同样是1px宽、#e1e1e1颜色的实线边框
BORDER-RIGHT: #e1e1e1 1px solid;
// 设置元素的左边框样式，和其他边框保持一致，使该固定栏四周都有边框显示
BORDER-LEFT: #e1e1e1 1px solid;
// 设置元素的边框圆角为10px，使该固定栏的四个角呈现出圆角的外观效果，更加美观
border-radius: 10px
}
</style>
</head>
<body>
<table id="dataTable" class='layui-table'>
<tr>
<th>ID</th>
<th>类型名称</th>
<th>价格</th>
<th>拼房价格</th>
<th>可超预定数</th>
<th>是否可拼房</th>
</tr>
</table>
<div class="fixDiv">
<label class="layui-form-label">当前选中：</label>
<div class="layui-input-inline">
<input type="text" id="tId" class="layui-input" placeholder="ID" readonly>
</div>
<div class="layui-input-inline">
<input type="text" id="tPrice" class="layui-input" placeholder="价格" readonly>
</div>
</div>
<body>
<!-- 创建一个表格（table）元素，设置其id为“dataTable”，并应用类名“layui-table”（该类名可能来自Layui框架，用于给表格应用默认的样式等效果），
用于展示数据，目前只定义了表头部分，后续会通过JavaScript动态添加表格行数据 -->
<table id="dataTable" class='layui-table'>
<tr>
<!-- 创建表头行中的单元格（th）元素，用于显示列标题“ID”，表示该列数据为记录的唯一标识 -->
<th>ID</th>
<th>类型名称</th>
<th>价格</th>
<th>拼房价格</th>
<th>可超预定数</th>
<th>是否可拼房</th>
</tr>
</table>
<!-- 创建一个应用类名“fixDiv”的<div>元素，根据前面定义的样式，这个元素会作为一个底部固定的区域显示，
里面通常放置一些固定展示或者与当前选中行数据相关的内容 -->
<div class="fixDiv">
<!-- 创建一个标签（label）元素，应用类名“layui-form-label”，用于显示文字“当前选中：”，作为提示信息，告知用户下方输入框所展示数据的含义 -->
<label class="layui-form-label">当前选中：</label>
<div class="layui-input-inline">
<!-- 创建一个文本输入框（input）元素，设置其类型为“text”，id为“tId”，应用类名“layui-input”（应用Layui框架中输入框的样式），
placeholder属性设置提示文字为“ID”，并设置为只读（readonly），用于展示当前选中行对应的“ID”数据，用户不能直接编辑此输入框内容 -->
<input type="text" id="tId" class="layui-input" placeholder="ID" readonly>
</div>
<div class="layui-input-inline">
<!-- 与上面的输入框类似，创建一个文本输入框用于展示当前选中行对应的“价格”数据，设置id为“tPrice”，提示文字为“价格”，同样为只读状态 -->
<input type="text" id="tPrice" class="layui-input" placeholder="价格" readonly>
</div>
</div>
<script>
//网页加载完毕
$(document).ready(function() {
<script>
// 当整个网页的DOM结构加载完毕后，会执行此回调函数，确保在操作页面元素之前，元素都已经在页面中加载完成，避免出现找不到元素等问题
$(document).ready(function () {
//发出ajax请求，调用后端数据
$.getJSON(baseUrl + '/selectRomeTypeIdServlet', function(data) {
// 使用jQuery的$.getJSON方法发送一个AJAX请求，请求的地址是通过baseUrl（应该是在全局定义的基础URL）加上'/selectRomeTypeIdServlet'来确定，
// 期望获取的是JSON格式的数据，并且在请求成功后执行回调函数，将获取到的数据作为参数传入回调函数中进行后续处理，此请求通常用于从后端获取房间类型相关的数据
$.getJSON(baseUrl + '/selectRomeTypeIdServlet', function (data) {
//遍历响应的json数组
// 使用jQuery的$.each方法遍历从后端获取到的JSON数据（data参数），该JSON数据通常是一个数组形式（包含多个房间类型相关的对象数据），
// 每次循环会传递当前项的索引（index）和具体的数据对象（el）给回调函数，方便在循环中处理每一条数据记录
$.each(data, function (index, el) {
var tId = el.typeId;
var tPrice = el.price;
var html = '';
// 拼接一个HTML字符串，用于构建表格中的一行数据（<tr>元素及其内部的单元格数据），
// 同时给这行数据添加点击事件，当用户点击该行时，会将该行对应的“ID”和“价格”数据分别赋值给页面中对应的输入框（id为“tId”和“tPrice”的输入框）进行展示
html += '<tr onclick="tId.value=\'' + tId + '\',tPrice.value=\'' + tPrice + '\'" >';
html += ' <td>' + el.typeId + '</td>';
html += ' <td>' + el.typeName + '</td>';
html += ' <td>' + el.price + '</td>';
html += ' <td>' + el.splicPrice + '</td>';
html += ' <td>' + el.exceedance + '</td>';
html += ' <td>' + el.isSplice + '</td>';
html += '</tr>';
$.each(data, function(index, el) {
var tId = el.typeId;
var tPrice = el.price;
var html = '';
html += '<tr onclick="tId.value=\'' + tId + '\',tPrice.value=\'' + tPrice + '\'" >';
html += ' <td>' + el.typeId + '</td>';
html += ' <td>' + el.typeName + '</td>';
html += ' <td>' + el.price + '</td>';
html += ' <td>' + el.splicPrice + '</td>';
html += ' <td>' + el.exceedance + '</td>';
html += ' <td>' + el.isSplice + '</td>';
html += '</tr>';
// 将拼接好的包含一行数据的HTML字符串添加到id为“dataTable”的表格元素中，实现动态往表格里添加数据行的功能，
// 经过循环遍历整个JSON数据数组后，就能完整地在表格中展示所有房间类型的数据记录了
$('#dataTable').append(html);
//追加到表格中
$('#dataTable').append(html);
});
});
});
</script>
</body>
});
});
</script>
</body>
</html>

127
src/webapp/webpage/searchTable/searchHeader.jsp
Unescape View File

@ -1,51 +1,92 @@
<%@ page contentType="text/html;charset=UTF-8" %>
<!-- JSP页面指令，用于设置页面的内容类型为“text/html”（即HTML格式页面），同时指定字符编码为“UTF-8”，
以此保证页面中的字符可以被正确解析和显示，避免出现乱码情况 -->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>酒店管理系统</title>
<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
<link rel="stylesheet" href="../../MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css">
<script src="../../js/toExcel/xlsx.full.min.js"></script>
<script type="text/javascript" src="../../js/toExcel/FileSaver.js"></script>
<script type="text/javascript" src="../../js/toExcel/Export2Excel.js"></script>
</head>
<head>
<!-- 设置HTML页面的字符编码为“utf-8”，再次明确页面遵循的字符编码规范，辅助浏览器准确读取页面内容 -->
<meta charset="utf-8">
<!-- 设置页面视口（viewport）的相关属性，其中“width=device-width”表示页面宽度会根据设备屏幕宽度自适应调整，
“initial-scale=1”表示页面初始的缩放比例为1（即不进行缩放），“maximum-scale=1”表示页面最大缩放比例限制为1，也就是禁止用户手动放大页面，
这些设置常用于确保页面在各种移动设备上都能有较好的显示效果 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- 设置页面的标题为“酒店管理系统”，此标题会显示在浏览器的标题栏位置，方便用户识别当前页面所属的系统名称 -->
<title>酒店管理系统</title>
<!-- 引入Layui框架的样式文件（layui.css），“href”属性指定了该文件的相对路径（上级目录下的js/layui/css/layui.css），
“media”属性值为“all”，意味着该样式文件适用于所有的媒体类型，即无论页面在何种设备上展示，都会应用此样式 -->
<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
<!-- 引入Font Awesome字体图标库的样式文件（font-awesome.min.css），其路径为上级目录下的MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css，
引入该文件后，页面就可以使用其中定义的各种图标样式来丰富页面的视觉效果 -->
<link rel="stylesheet" href="../../MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css">
<!-- 引入处理Excel相关功能的JavaScript库文件（xlsx.full.min.js），该文件所在路径为上级目录下的js/toExcel/xlsx.full.min.js，
通常用于后续实现将页面数据导出为Excel文件等相关操作 -->
<script src="../../js/toExcel/xlsx.full.min.js"></script>
<!-- 引入FileSaver.js脚本文件，它是一个用于在浏览器端实现文件保存功能的JavaScript库，其路径为上级目录下的js/toExcel/FileSaver.js，
常配合其他相关库来实现将生成的文件（比如Excel文件）保存到本地的功能 -->
<script type="text/javascript" src="../../js/toExcel/FileSaver.js"></script>
<!-- 引入自定义的用于将数据导出到Excel的脚本文件（Export2Excel.js），其位于上级目录下的js/toExcel/Export2Excel.js路径中，
文件内部应该包含了具体的导出数据到Excel的业务逻辑和相关功能实现代码 -->
<script type="text/javascript" src="../../js/toExcel/Export2Excel.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">酒店管理系统</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item" lay-unselect>
<a href="../orderInfo/orderTable.jsp" target="search">预订单</a>
</li>
<li class="layui-nav-item" lay-unselect>
<a href="此处填充地址" target="search">入住单</a>
</li>
<li class="layui-nav-item" lay-unselect>
<a href="此处填充地址" target="search">账单明细</a>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item" lay-unselect>
<a href="此处填充地址" target="search">预订单历史</a>
</li>
<li class="layui-nav-item" lay-unselect>
<a href="此处填充地址" target="search">入住单历史</a>
</li>
</ul>
</div>
</div>
<body class="layui-layout-body">
<!-- 创建一个Layui框架的布局容器（layui-layout）元素，并为其添加类名“layui-layout-admin”，在Layui框架中，
此类布局容器常用于搭建后台管理系统页面的整体布局结构，能够方便地划分出如头部、侧边栏、主体内容区域以及底部等不同的功能区域 -->
<div class="layui-layout layui-layout-admin">
<!-- 创建一个用于表示页面头部的<div>元素，在Layui布局结构里，这个元素内部会放置各种与头部相关的内容，比如网站logo、导航菜单等 -->
<div class="layui-header">
<!-- 创建一个带有类名“layui-logo”的<div>元素，在该元素内显示文字“酒店管理系统”，作为网站的标识或者logo，方便用户快速识别页面所属系统 -->
<div class="layui-logo">酒店管理系统</div>
<!-- 这是一段HTML注释，用于提示当前代码区域（即下面的导航菜单代码部分）是用于构建页面头部区域的导航部分，
并且这些导航菜单可以配合Layui框架已有的水平导航组件来实现更丰富的交互和展示效果 -->
<!-- 头部区域（可配合layui已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<!-- 创建一个列表项（li）元素，为其添加类名“layui-nav-item”以及“lay-unselect”属性，“layui-nav-item”表示这是导航栏中的一个菜单项，
“lay-unselect”属性通常用于阻止某些默认的选择行为（比如在移动端可能出现的文本选中效果等），使页面展示更加符合预期 -->
<li class="layui-nav-item" lay-unselect>
<!-- 创建一个超链接（a）元素，设置其“href”属性值为“../orderInfo/orderTable.jsp”，指定了点击该链接后要跳转的页面相对路径，
“target”属性值为“search”（此处可能是用于在特定的iframe或者页面区域展示链接内容，不过当前代码中未看到对应定义，可能后续需要完善），
链接文字为“预订单”，意味着用户点击该链接可跳转到预订单相关页面 -->
<a href="../orderInfo/orderTable.jsp" target="search">预订单</a>
</li>
<li class="layui-nav-item" lay-unselect>
<!-- 与上面的菜单项类似，创建超链接元素，但“href”属性值为“此处填充地址”，说明此处后续需要替换为实际的链接地址，
用于跳转到入住单相关页面，链接文字为“入住单” -->
<a href="此处填充地址" target="search">入住单</a>
</li>
<li class="layui-nav-item" lay-unselect>
<!-- 同样的，创建超链接元素，“href”属性也需后续填充实际地址，用于跳转到账单明细相关页面，链接文字为“账单明细” -->
<a href="此处填充地址" target="search">账单明细</a>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<!-- 创建一个列表项元素，同样添加“layui-nav-item”和“lay-unselect”属性，作为导航栏右侧的一个菜单项 -->
<li class="layui-nav-item" lay-unselect>
<!-- 创建超链接元素，“href”属性指向后续需填充的地址，“target”属性为“search”，链接文字为“预订单历史”，
点击该链接理论上可跳转到预订单历史相关页面 -->
<a href="此处填充地址" target="search">预订单历史</a>
</li>
<li class="layui-nav-item" lay-unselect>
<!-- 创建超链接元素，“href”属性需填充实际地址，“target”属性为“search”，链接文字为“入住单历史”，用于跳转到入住单历史相关页面 -->
<a href="此处填充地址" target="search">入住单历史</a>
</li>
</ul>
</div>
</div>
<script src="../../js/layui/layui.js"></script>
<script src="../../js/jquery.js"></script>
<!-- 引入Layui框架的核心JavaScript脚本文件（layui.js），该文件所在路径为上级目录下的js/layui/layui.js，
它是使用Layui框架各种功能和组件的基础，比如实现页面交互、组件渲染等都依赖于此文件 -->
<script src="../../js/layui/layui.js"></script>
<!-- 引入jQuery库的JavaScript脚本文件（jquery.js），jQuery是一个广泛使用的JavaScript库，常用于操作DOM元素、处理页面事件、
进行AJAX数据交互等操作，能够极大地简化JavaScript编程工作，其路径为上级目录下的js/jquery.js -->
<script src="../../js/jquery.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function() {});
</script>
</body>
<script>
//JavaScript代码区域
// 使用Layui框架的模块加载机制，加载“element”模块（Layui框架中用于操作页面元素、实现动态渲染页面结构、
// 控制页面元素显示隐藏等相关功能的模块），并在加载完成后执行回调函数，不过当前回调函数内部为空，可能后续需要添加具体的业务逻辑代码来实现相应功能
layui.use('element', function() {});
</script>
</body>
</html>

29
src/webapp/webpage/searchTable/searchMain.jsp
Unescape View File

@ -1,14 +1,27 @@
<%@ page contentType="text/html;charset=UTF-8" %>
<!-- JSP页面指令，用于设置页面的内容类型为“text/html”（也就是HTML格式的页面），同时指定字符编码为“UTF-8”，
这样能保证页面中的字符都能被正确解析和显示，避免出现乱码问题 -->
<html>
<head>
<meta charset="utf-8">
<title>酒店管理系统</title>
</head>
<head>
<!-- 设置HTML页面的字符编码为“utf-8”，再次明确页面遵循的字符编码规范，辅助浏览器准确读取页面内容 -->
<meta charset="utf-8">
<!-- 设置页面的标题为“酒店管理系统”，这个标题会显示在浏览器的标题栏上，方便用户知晓当前页面所属的系统名称 -->
<title>酒店管理系统</title>
</head>
<frameset rows="60,*" frameborder="0">
<frame name="Header" src="searchHeader.jsp" />
<frame name="search" src="../../nav.html" />
</frameset>
<!-- 使用<frameset>标签来定义一个框架集，通过rows属性将整个页面划分为上下两部分，
属性值“60,*”表示上面部分的高度为60像素（通常可用于放置像页面头部、导航栏等这类相对固定高度的内容），
下面部分则会占据剩余的全部空间（“*”代表自适应剩余高度）。同时，frameborder属性设置为“0”，
意味着框架与框架之间的边框不会显示出来，以此构建出一个分区域布局的页面框架结构 -->
<frameset rows="60,*" frameborder="0">
<!-- 在框架集中定义一个<frame>元素，设置它的name属性为“Header”，这个属性主要用于给该框架命名，
方便后续通过超链接的target属性等方式来指定内容要在这个框架中进行显示。src属性则指定了此框架初始要加载并显示的页面文件为“searchHeader.jsp”，
也就是该框架一开始会展示“searchHeader.jsp”页面的内容，一般用来放置页面头部相关的内容 -->
<frame name="Header" src="searchHeader.jsp" />
<!-- 再定义一个<frame>元素，将其name属性设置为“search”，同样是给框架起个名字便于后续操作使用，
src属性指定要加载“../../nav.html”这个文件作为此框架要显示的内容，这个框架通常用于放置页面主体的导航或者主要内容等部分 -->
<frame name="search" src="../../nav.html" />
</frameset>
</html>
Write Preview
Loading…
Cancel
Save