branch_gzs
gzs 11 months ago
parent e456acbe36
commit 1a4a8514a6

@ -1,13 +1,21 @@
<%@ page contentType="text/html;charset=UTF-8" %>
<!-- 这是JSP页面指令用于设置该JSP页面的内容类型text/html表示页面内容是HTML格式以及字符编码为UTF-8
确保页面能够正确显示各种字符,比如中文等,避免出现乱码问题 -->
<html>
<head>
<title>酒店管理系统</title>
<link rel="stylesheet Icon" type=" image/x-icon" href="img/windows.ico">
</head>
<head>
<!-- 设置页面的标题为“酒店管理系统”,该标题通常会显示在浏览器的标题栏中,方便用户识别当前页面所属的系统 -->
<title>酒店管理系统</title>
<!-- 这行代码用于引入一个图标文件这里是img目录下的windows.ico图标设置为页面的图标favicon
在浏览器的标签页、书签栏等地方会显示该图标增强页面的辨识度和品牌感rel属性表示关联关系type属性指定图标文件的类型 -->
<link rel="stylesheet Icon" type=" image/x-icon" href="img/windows.ico">
</head>
<body>
<jsp:forward page="login.jsp"></jsp:forward>
</body>
<body>
<!-- 使用JSP的内置动作标签<jsp:forward>其作用是将当前请求转发到指定的页面这里是login.jsp页面
意味着当访问当前这个JSP页面时服务器会直接将请求转向到login.jsp页面进行后续处理而不会渲染当前页面的其他内容
常用于页面跳转、根据不同条件引导用户到相应的登录、注册或其他功能页面等情况 -->
<jsp:forward page="login.jsp"></jsp:forward>
</body>
</html>

@ -1,24 +1,49 @@
<%@ page contentType="text/html;charset=UTF-8" %>
<!-- JSP页面指令设置页面内容类型为text/html即HTML格式页面并指定字符编码为UTF-8
保证页面能正确显示各类字符,避免出现乱码情况 -->
<html>
<head>
<!-- 设置HTML页面的字符编码为utf-8虽然前面JSP指令已经设置了编码但这里在HTML部分再次声明
可以增强浏览器对页面字符编码的识别和处理,确保内容正确显示 -->
<meta charset="utf-8">
<!-- 设置页面的标题为“注册账户”,此标题会显示在浏览器的标题栏中,让用户清楚当前页面的功能 -->
<title>注册账户</title>
<!-- 引入Layui框架的样式文件layui.csshref属性指定了文件的相对路径当前目录下的js/layui/css/layui.css
media="all"表示该样式适用于所有的媒体类型,也就是在各种设备上都应用此样式 -->
<link rel="stylesheet" href="./js/layui/css/layui.css" media="all">
<!-- 引入Layui框架的JavaScript脚本文件layui.js该文件包含了Layui框架的各种功能实现
是后续使用Layui组件和功能的基础路径为当前目录下的js/layui/layui.js -->
<script src="./js/layui/layui.js"></script>
<!-- 引入jQuery库的JavaScript脚本文件jquery.jsjQuery常用于操作DOM元素、处理事件、进行AJAX交互等
方便简化JavaScript编程这里的路径指向当前目录下的js/jquery.js -->
<script src="./js/jquery.js"></script>
<!-- 引入自定义的全局JavaScript脚本文件global.js里面可能包含了项目中通用的函数、变量或者其他自定义逻辑
路径为当前目录下的js/global.js -->
<script src="./js/global.js"></script>
</head>
<body>
<!-- 创建一个<fieldset>元素用于对表单等相关元素进行分组显示添加了Layui的样式类设置了顶部外边距为10px
让页面布局更清晰美观 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
<!-- 在<fieldset>内部使用<legend>元素来为分组设置标题,这里标题为“注册用户”,起到说明该分组内容的作用 -->
<legend>注册用户</legend>
</fieldset>
<!-- 创建一个Layui风格的表单通过class="layui-form"应用Layui的表单样式和相关交互功能action属性为空
表示表单提交的地址暂未设置后续可能通过JavaScript动态指定或者在服务器端进行统一处理等 -->
<form class="layui-form" action="">
<!-- 创建一个Layui表单项目layui-form-item用于组织表单内的各个输入元素等内容使得表单结构更清晰 -->
<div class="layui-form-item">
<!-- 创建一个内联的布局容器layui-inline方便在一行内放置多个表单元素实现更灵活的布局 -->
<div class="layui-inline">
<!-- 创建一个表单标签元素layui-form-label用于显示对应输入框的说明文字这里显示“账户名” -->
<label class="layui-form-label">账户名</label>
<!-- 创建一个内联的输入框容器layui-input-inline用于放置具体的输入框元素 -->
<div class="layui-input-inline">
<!-- 创建一个文本输入框input type="text"设置了输入框的名称name="loginName")用于表单提交时传递参数,
lay-verify属性指定了验证规则这里要求必须输入且符合自定义的inputName规则autocomplete="off"关闭浏览器的自动完成功能,
placeholder属性设置了输入框的占位提示文字“您登录所需的账户”同时应用了Layui的输入框样式类layui-input -->
<input type="text" name="loginName" lay-verify="required|inputName" autocomplete="off"
placeholder="您登录所需的账户" class="layui-input">
</div>
@ -28,6 +53,8 @@
<div class="layui-inline">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline">
<!-- 创建一个密码输入框input type="password"设置名称为“loginPwd”指定了验证规则required|inputPwd
关闭自动完成功能设置占位提示文字“您登录所需的密码”应用Layui输入框样式并且给该输入框设置了id为“pwd1”方便后续在JavaScript中通过id获取其值 -->
<input type="password" name="loginPwd" id="pwd1" lay-verify="required|inputPwd" autocomplete="off"
placeholder="您登录所需的密码" class="layui-input">
</div>
@ -37,6 +64,8 @@
<div class="layui-inline">
<label class="layui-form-label">确认密码</label>
<div class="layui-input-inline">
<!-- 创建另一个密码输入框,用于用户再次输入密码进行确认,设置了验证规则,关闭自动完成,设置占位提示文字,
同样应用Layui样式其id为“pwd2”方便后续与前面输入的密码进行比较验证 -->
<input type="password" id="pwd2" lay-verify="required|inputPwd" autocomplete="off"
placeholder="重复你所输入的密码" class="layui-input">
</div>
@ -53,57 +82,86 @@
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<!-- 创建一个Layui风格的按钮layui-btn设置了lay-submit属性表示该按钮用于触发表单提交操作
lay-filter属性指定了一个过滤器名称insertRome用于在JavaScript中监听该按钮的提交事件按钮文字为“注册” -->
<button class="layui-btn" lay-submit lay-filter="insertRome">注册</button>
<!-- 创建一个重置按钮type="reset"样式为Layui的默认按钮样式layui-btn layui-btn-primary
点击该按钮可将表单内的输入框等元素恢复到初始状态 -->
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<script>
// 使用Layui框架的模块加载机制加载['form', 'layedit', 'laydate']这几个模块,
// 并在加载完成后执行回调函数,在回调函数内可以使用这些模块提供的功能,
// 这里主要是使用form模块来处理表单相关操作layer模块用于弹出提示框等交互功能
layui.use(['form', 'layedit', 'laydate'], function () {
var form = layui.form,
layer = layui.layer;
//自定义验证规则
// 自定义验证规则通过form.verify方法来定义下面分别针对inputName和inputPwd规则进行具体的验证逻辑设置
form.verify({
inputName: function (value) {
// 验证账户名长度如果输入的字符长度小于4个字符返回错误提示信息“账户至少4个字符”
// 阻止表单提交,提示用户输入符合要求长度的账户名
if (value.length < 4) {
return '账户至少4个字符';
}
// 如果输入的字符长度大于10个字符返回错误提示信息“账户至多10个字符”同样阻止表单提交
// 要求用户输入合理长度的账户名
if (value.length > 10) {
return '账户至多10个字符'
}
},
inputPwd: function (value) {
// 验证密码长度当输入的密码字符长度小于4个字符时返回“密码至少4个字符”的提示信息
// 让用户知晓密码长度不符合要求,无法提交表单
if (value.length < 4) {
return '密码至少4个字符';
}
// 如果密码字符长度大于18个字符返回“密码至多18个字符”的提示信息提醒用户修改密码长度
// 只有密码长度符合要求才能进行后续的表单提交操作
if (value.length > 18) {
return '密码至多18个字符'
}
}
});
//监听提交
// 监听表单的提交事件通过form.on方法监听指定过滤器lay-filter="insertRome")对应的提交操作,
// 当点击注册按钮触发提交且符合验证规则会执行这个回调函数data参数包含了表单提交的数据等相关信息
form.on('submit(insertRome)', function (data) {
// 通过jQuery选择器$("#pwd1")获取id为“pwd1”的密码输入框元素并获取其输入的值存储在变量pwd1中
// 该值为用户第一次输入的密码
var pwd1 = $("#pwd1").val();
// 同样的方式获取id为“pwd2”的密码输入框元素的值存储在变量pwd2中用于和pwd1进行比较验证
var pwd2 = $("#pwd2").val();
if (pwd1 != pwd2) {
// 比较两次输入的密码是否一致如果不一致通过layer.msg方法弹出提示框显示“二次密码验证不一致”的提示信息
// 告知用户需要重新输入密码,确保两次密码相同才能进行注册操作
if (pwd1!= pwd2) {
layer.msg("二次密码验证不一致");
} else {
// 如果两次密码一致使用jQuery的$.post方法进行异步POST请求向服务器端发送数据
// baseUrl + '/InsertLoginServlet'是请求的URL地址baseUrl可能是在全局变量中定义的基础地址
// InsertLoginServlet应该是服务器端用于处理注册逻辑的Servlet等程序
// JSON.stringify(data.field)将表单提交的数据经过Layui处理后的字段数据转换为JSON字符串格式发送给服务器
// 最后在请求成功的回调函数中根据服务器返回的code值进行不同的提示处理
$.post(baseUrl + '/InsertLoginServlet', JSON.stringify(data.field), function (code) {
if (code === 1) {
// 如果服务器返回的code值为1表示注册成功通过layer.alert方法弹出一个提示框
// 设置标题为“成功”图标为6表示成功的图标样式动画效果为5告知用户注册成功
layer.alert('注册成功!', {
title: '成功',
icon: 6,
anim: 5
});
} else {
// 如果服务器返回的code值不为1表示注册失败同样弹出提示框设置标题为“异常”图标为5表示失败的图标样式
// 动画效果为6向用户提示注册失败的信息让用户知晓操作未成功
layer.alert('注册失败!', {
title: '异常',
icon: 5,
@ -113,6 +171,8 @@
});
}
// 返回false表示阻止表单的默认提交行为因为这里通过异步请求$.post已经自行处理了提交相关的数据交互
// 不需要浏览器再进行默认的表单提交刷新页面等操作
return false;
});
});

@ -1,141 +1,211 @@
<%@ page contentType="text/html;charset=UTF-8" %>
<!-- JSP页面指令设置该页面的内容类型为text/html表示是HTML格式页面字符编码为UTF-8
确保页面能够正确显示各种字符,避免出现乱码问题 -->
<html>
<head>
<meta charset="utf-8">
<title>酒店管理系统</title>
<link rel="stylesheet Icon" type=" image/x-icon" href="img/windows.ico">
<link rel="stylesheet" type="text/css" href="css/login/register-login.css">
<script src="./js/global.js"></script>
</head>
<body>
<div id="box"></div>
<!--主栏-->
<div class="cent-box">
<!--标题-->
<div class="cent-box-header">
<h1 class="main-title">HotelBook</h1>
<h2 class="sub-title">酒店管理系统</h2>
</div>
<div class="cont-main clearfix">
<!--登录区域开始-->
<div class="login form">
<!--文本输入框-->
<div class="group">
<!--用户名输入框-->
<div class="group-ipt loginName">
<input type="text" name="loginName" id="loginName" class="ipt" placeholder="输入您的用户名" required>
</div>
<!--密码输入框-->
<div class="group-ipt loginPwd">
<input type="password" name="loginPwd" id="loginPwd" class="ipt" placeholder="输入您的登录密码" required>
</div>
</div>
<!--登录按钮-->
<div class="button" id="btnLogin">
<button type="submit" class="login-btn register-btn button" id="embed-submit">登录</button>
</div>
<head>
<!-- 设置HTML页面自身的字符编码为utf-8再次强调页面的字符编码规范有助于浏览器准确解析页面内容 -->
<meta charset="utf-8">
<!-- 设置页面的标题为“酒店管理系统”,该标题会显示在浏览器的标题栏中,让用户明确当前页面所属的系统或功能 -->
<title>酒店管理系统</title>
<!-- 引入一个图标文件img目录下的windows.ico作为页面的图标favicon用于在浏览器的标签页、书签栏等地方显示
rel属性表示关联关系这里表示图标关联type属性指定图标文件的类型 -->
<link rel="stylesheet Icon" type=" image/x-icon" href="img/windows.ico">
<!-- 引入外部样式表文件register-login.css用于定义页面的样式该文件位于css/login目录下
type="text/css"明确了样式表的文本/css类型 -->
<link rel="stylesheet" type="text/css" href="css/login/register-login.css">
<!-- 引入自定义的全局JavaScript脚本文件global.js里面可能包含了项目中通用的函数、变量或者其他自定义逻辑
路径为当前目录下的js/global.js -->
<script src="./js/global.js"></script>
</head>
<body>
<!-- 创建一个空的div元素id为"box"可能后续会通过JavaScript动态添加内容或者用于页面布局等用途 -->
<div id="box"></div>
<!-- 创建一个类名为"cent-box"的div元素作为页面的主栏部分用于组织页面主要内容起到布局划分的作用 -->
<div class="cent-box">
<!-- 创建一个类名为"cent-box-header"的div元素用于放置标题相关内容属于主栏内的标题区域 -->
<div class="cent-box-header">
<!-- 创建一个h1标题元素应用类名"main-title",显示主要标题"HotelBook",通常是页面较为突出醒目的标题内容 -->
<h1 class="main-title">HotelBook</h1>
<!-- 创建一个h2标题元素应用类名"sub-title",显示副标题"酒店管理系统",对主标题进行补充说明,进一步明确页面主题 -->
<h2 class="sub-title">酒店管理系统</h2>
</div>
<!-- 创建一个类名为"cont-main clearfix"的div元素用于放置主要的内容区域"clearfix"类可能用于清除浮动等布局相关的处理 -->
<div class="cont-main clearfix">
<!-- 开始登录区域的代码部分,创建一个类名为"login form"的div元素来划分登录相关的功能模块 -->
<div class="login form">
<!-- 创建一个类名为"group"的div元素用于对文本输入框进行分组方便布局和样式设置 -->
<div class="group">
<!-- 创建一个类名为"group-ipt loginName"的div元素用于包裹用户名输入框"loginName"类可能用于特定的样式设置或后续的JavaScript操作标识 -->
<div class="group-ipt loginName">
<!-- 创建一个文本输入框input type="text"设置名称name和id都为"loginName"方便通过JavaScript获取其值和传递参数
应用类名"ipt"用于样式设置placeholder属性设置了占位提示文字“输入您的用户名”required属性表示该输入框为必填项 -->
<input type="text" name="loginName" id="loginName" class="ipt" placeholder="输入您的用户名" required>
</div>
<!--登录区域结束-->
<!--尾注-->
<div class="remember clearfix">
<label class="remember-me">
<a href="#">获取帮助</a>
</label>
<label class="forgot-password">
<a href="#">忘记密码?</a>
</label>
<!-- 创建一个类名为"group-ipt loginPwd"的div元素用于包裹密码输入框类似用户名输入框的设置逻辑 -->
<div class="group-ipt loginPwd">
<!-- 创建一个密码输入框input type="password"设置名称和id为"loginPwd",应用"ipt"样式类,设置占位提示文字“输入您的登录密码”,
同样为必填项 -->
<input type="password" name="loginPwd" id="loginPwd" class="ipt" placeholder="输入您的登录密码" required>
</div>
</div>
<!-- 创建一个类名为"button"id为"btnLogin"的div元素用于放置登录按钮相关内容起到布局容器的作用 -->
<div class="button" id="btnLogin">
<!-- 创建一个按钮元素button type="submit"应用多个类名用于样式设置id为"embed-submit",按钮文字为“登录”,
type="submit"表示点击该按钮会触发表单提交行为虽然这里可能并不一定是传统表单提交后续会通过JavaScript处理 -->
<button type="submit" class="login-btn register-btn button" id="embed-submit">登录</button>
</div>
</div>
<!--脚注-->
<div class="footer">
<p>© 2017
<a href="#">HotelBook System</a>
</p>
<!-- 登录区域结束 -->
<!-- 创建一个类名为"remember clearfix"的div元素用于放置一些提示相关的内容如获取帮助、忘记密码等链接"clearfix"类用于布局处理 -->
<div class="remember clearfix">
<!-- 创建一个label元素应用类名"remember-me"里面包含一个超链接a href="#"),文字为“获取帮助”,
点击该链接可能会跳转到相应的帮助页面这里href="#"表示暂时未设置具体链接地址) -->
<label class="remember-me">
<a href="#">获取帮助</a>
</label>
<!-- 类似地创建另一个label元素应用类名"forgot-password",包含一个超链接,文字为“忘记密码?”,
用于引导用户进行忘记密码相关的操作(同样暂时未设置具体链接地址) -->
<label class="forgot-password">
<a href="#">忘记密码?</a>
</label>
</div>
<script type="text/javascript" src="./js/login/particles.js"></script>
<script type="text/javascript" src="./js/login/background.js"></script>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/layui/layui.js"></script>
<script type="text/javascript" src="./js/Cookie.js"></script>
//引入win10的api
<script type="text/javascript" src="MAIN/js/win10.child.js"></script>
<script>
//模块化调用layui
layui.use(['layer'], function() {
var layer = layui.layer;
$(document).ready(function() {
//alert("网页加载完毕");
//按钮点击事件
$('#btnLogin').click(function() {
//alert("按钮被点击");
loginName = $('#loginName').val();
var loginPwd = $('#loginPwd').val();
var params = "loginName=" + loginName + "&loginPwd=" + loginPwd;
if(loginName === "")
layer.tips("请输入用户名", "#loginName"); //layer.tips(“string","#吸附容器")
else if(loginPwd === "")
layer.tips("请输入密码", "#loginPwd");
</div>
</div>
<!-- 创建一个类名为"footer"的div元素作为页面的脚注部分用于显示版权等相关信息 -->
<div class="footer">
<!-- 创建一个p段落元素显示版权信息“© 2017”以及一个超链接a href="#"文字为“HotelBook System”
这里同样href="#"暂时未设置具体跳转地址,可能用于指向系统相关介绍等页面 -->
<p>© 2017
<a href="#">HotelBook System</a>
</p>
</div>
<!-- 引入particles.js文件该文件可能用于实现页面上的粒子效果等特效相关的JavaScript功能路径为js/login目录下 -->
<script type="text/javascript" src="./js/login/particles.js"></script>
<!-- 引入background.js文件可能用于设置页面背景相关的JavaScript逻辑同样位于js/login目录下 -->
<script type="text/javascript" src="./js/login/background.js"></script>
<!-- 引入jQuery库的JavaScript脚本文件jquery.js方便后续进行DOM操作、事件处理以及AJAX交互等路径为当前目录下的js/jquery.js -->
<script type="text/javascript" src="./js/jquery.js"></script>
<!-- 引入Layui框架的JavaScript脚本文件layui.js用于使用Layui框架提供的各种组件和功能如弹出提示框、表单验证等
位于js/layui目录下 -->
<script type="text/javascript" src="./js/layui/layui.js"></script>
<!-- 引入Cookie.js文件可能用于处理浏览器Cookie相关的操作比如设置、获取、删除Cookie等功能路径为当前目录下的js/Cookie.js -->
<script type="text/javascript" src="./js/Cookie.js"></script>
<!-- 引入win10.child.js文件从注释看是用于引入win10的相关API文件路径为MAIN/js目录下
这里可能是要在网页中使用一些特定的类似Windows 10系统风格的功能或交互逻辑具体取决于该文件内容 -->
<script type="text/javascript" src="MAIN/js/win10.child.js"></script>
<script>
// 使用Layui框架的模块加载机制加载['layer']模块,在加载完成后执行回调函数,
// 在回调函数内可以使用layer模块提供的功能如弹出提示框等交互操作
layui.use(['layer'], function() {
var layer = layui.layer;
// 当DOM结构加载完成后即整个HTML页面的元素都已解析完毕执行以下函数内的代码
// 相当于jQuery中的$(document).ready()函数的作用,确保在操作页面元素时它们已经存在
$(document).ready(function() {
// 这行代码原本是弹出一个提示框显示“网页加载完毕”,可能用于测试或者调试目的,
// 实际应用中如果不需要这样的提示可以注释掉或者删除
//alert("网页加载完毕");
// 为id为"btnLogin"的元素即前面定义的登录按钮所在的div元素绑定点击事件
// 当按钮被点击时,会执行下面的回调函数内的代码
$('#btnLogin').click(function() {
// 这行代码原本也是弹出提示框显示“按钮被点击”,同样可用于测试或调试,
// 实际中可按需保留或去除
//alert("按钮被点击");
// 通过jQuery选择器$('#loginName')获取id为"loginName"的用户名输入框元素的值,
// 并将其存储在变量loginName中这里没有使用var声明可能是在外部有声明或者处于全局作用域
// 不过更规范的做法建议加上var声明局部变量
loginName = $('#loginName').val();
// 同样的方式获取id为"loginPwd"的密码输入框元素的值存储在变量loginPwd中
var loginPwd = $('#loginPwd').val();
// 拼接一个字符串形式的参数,格式为"loginName=用户名值&loginPwd=密码值"
// 用于后续发送AJAX请求时传递用户名和密码数据这种拼接方式相对简单实际应用中如果参数复杂可考虑使用更专业的参数序列化方式
var params = "loginName=" + loginName + "&loginPwd=" + loginPwd;
// 判断用户名输入框的值是否为空如果为空通过layer.tips方法在用户名输入框"#loginName"为选择器)旁边弹出提示框,
// 显示“请输入用户名”的提示信息,引导用户输入用户名
if(loginName === "")
layer.tips("请输入用户名", "#loginName"); //layer.tips(“string","#吸附容器")
// 判断密码输入框的值是否为空如果为空通过layer.tips方法在密码输入框"#loginPwd"为选择器)旁边弹出提示框,
// 显示“请输入密码”的提示信息,提醒用户输入密码
else if(loginPwd === "")
layer.tips("请输入密码", "#loginPwd");
else {
// 使用jQuery的$.post方法发起一个异步POST请求向服务器端的baseUrl + '/QueryLoginNameServlet'地址发送数据,
// baseUrl可能是在全局变量中定义的基础地址QueryLoginNameServlet应该是服务器端用于处理用户名验证逻辑的Servlet等程序
// params是前面拼接好的包含用户名和密码的参数在请求成功的回调函数中根据服务器返回的数据data进行不同的处理
$.post(baseUrl + '/QueryLoginNameServlet', params, function(data) {
if(data === '-1')
// 如果服务器返回的数据为'-1'表示用户名不存在通过layer.msg方法弹出一个提示框
// 设置动画效果为6告知用户用户名不存在提示用户检查输入的用户名是否正确
layer.msg("用户名不存在", {
anim: 6
});
else if(data === '0')
// 如果返回数据为'0'表示密码不正确同样弹出提示框设置动画效果为6提示用户密码输入有误需要重新输入密码
layer.msg("密码不正确", {
anim: 6
});
else {
//发出ajax请求调用后端功能
$.post(baseUrl + '/QueryLoginNameServlet', params, function(data) {
if(data === '-1')
layer.msg("用户名不存在", {
anim: 6
});
else if(data === '0')
layer.msg("密码不正确", {
anim: 6
});
else {
layer.msg('登录成功', {
icon: 16,
shade: 0.01
});
//根据写入的session值得到结果
$.post(baseUrl + '/QueryLoginInfoServlet', function(loginInfo) {
//数据返回样例
<%--{"loginId":1,"loginName":"root","loginPwd":"toor","loginNickName":"管理员","loginAdmin":0}--%>
//取值方法
var obj = JSON.parse(loginInfo);
//alert(obj.loginName);
//alert(obj.loginPwd);
//alert(obj.loginNickName);
//alert(obj.loginAdmin);
//设置cookie
setCookie("loginName", loginName);
setCookie("loginNickName", obj.loginNickName);
setCookie("loginAdmin", obj.loginAdmin);
});
setTimeout(function() {
location.href = 'MAIN/main.html';
}, 1000); //等待一段时间后跳入
}
// 如果返回的数据既不是'-1'也不是'0'则认为登录成功通过layer.msg方法弹出提示框
// 设置图标为16可能是表示成功的图标样式阴影透明度为0.01,告知用户登录成功
layer.msg('登录成功', {
icon: 16,
shade: 0.01
});
}
}); //button
}); //jquery
}); //layui
</script>
</body>
// 再次发起一个异步POST请求向服务器端的baseUrl + '/QueryLoginInfoServlet'地址发送请求,
// 该请求可能是用于获取登录用户的详细信息在请求成功的回调函数中对返回的登录信息loginInfo进行处理
$.post(baseUrl + '/QueryLoginInfoServlet', function(loginInfo) {
// 以下几行代码是原本的注释内容,展示了服务器返回的登录信息数据的示例格式,
// 是一个JSON格式的字符串包含了如登录ID、用户名、密码、昵称、管理员权限等信息方便后续解析和使用数据时参考
// 数据返回样例
<%--{"loginId":1,"loginName":"root","loginPwd":"toor","loginNickName":"管理员","loginAdmin":0}--%>
// 通过JSON.parse方法将服务器返回的JSON格式的登录信息字符串loginInfo解析为JavaScript对象
// 以便后续可以通过对象属性的方式获取具体的信息值存储在变量obj中
var obj = JSON.parse(loginInfo);
// 这几行代码原本是用于弹出提示框显示解析后的登录信息的各个属性值,同样可用于测试或调试目的,
// 实际应用中可根据需要保留或去除比如可能会将这些信息存储到Cookie或者用于页面其他地方的展示等
//alert(obj.loginName);
//alert(obj.loginPwd);
//alert(obj.loginNickName);
//alert(obj.loginAdmin);
// 使用自定义的setCookie函数应该是在前面引入的Cookie.js文件中定义设置名为"loginName"的Cookie
// 值为当前登录的用户名loginName用于在浏览器端保存用户登录的相关信息方便后续页面使用或者实现自动登录等功能
setCookie("loginName", loginName);
// 类似地,设置名为"loginNickName"的Cookie值为从服务器返回的登录用户昵称obj.loginNickName
setCookie("loginNickName", obj.loginNickName);
// 设置名为"loginAdmin"的Cookie值为从服务器返回的登录用户管理员权限标识obj.loginAdmin
// 不同的权限值可能在后续页面中用于控制不同的操作权限和显示内容等
setCookie("loginAdmin", obj.loginAdmin);
});
// 使用setTimeout函数设置一个定时器在1000毫秒1秒后执行里面的函数
// 函数内通过location.href属性将页面重定向到'MAIN/main.html'页面,
// 实现登录成功后等待一段时间自动跳转到系统的主页面的功能
setTimeout(function() {
location.href = 'MAIN/main.html';
}, 1000); //等待一段时间后跳入
}
});
}
}); //button
}); //jquery
}); //layui
</script>
</body>
</html>

@ -1,79 +1,128 @@
<%@ page contentType="text/html;charset=UTF-8" %>
<!-- JSP页面指令设置页面内容类型为text/html即HTML格式页面并指定字符编码为UTF-8
保证页面能正确显示各类字符,避免出现乱码情况 -->
<html>
<head>
<!-- 设置HTML页面的字符编码为utf-8再次明确页面字符编码规范有助于浏览器准确解析页面内容 -->
<meta charset="utf-8">
<!-- 设置页面的标题为“酒店管理系统”,该标题会显示在浏览器的标题栏中,让用户明确当前页面所属的系统或功能 -->
<title>酒店管理系统</title>
<!-- 引入Layui框架的样式文件layui.csshref属性指定了文件的相对路径当前目录下的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">
<!-- 引入Layui框架的JavaScript脚本文件layui.js该文件包含了Layui框架的各种功能实现
是后续使用Layui组件和功能的基础路径为当前目录下的js/layui/layui.js -->
<script src="./js/layui/layui.js"></script>
<!-- 引入jQuery库的JavaScript脚本文件jquery.jsjQuery常用于操作DOM元素、处理事件、进行AJAX交互等
方便简化JavaScript编程这里的路径指向当前目录下的js/jquery.js -->
<script src="./js/jquery.js"></script>
<!-- 引入自定义的全局JavaScript脚本文件global.js里面可能包含了项目中通用的函数、变量或者其他自定义逻辑
路径为当前目录下的js/global.js -->
<script src="./js/global.js"></script>
<!-- 引入自定义的Cookie操作相关的JavaScript脚本文件Cookie.js用于处理浏览器Cookie的设置、获取、删除等操作
路径为当前目录下的js/Cookie.js -->
<script src="./js/Cookie.js"></script>
<style>
body {
margin: 10px;
// 设置页面主体body元素的外边距为10px用于控制页面内容与浏览器窗口边缘的距离使页面布局更美观
margin: 10px;
}
.layui-elem-field legend {
font-size: 14px;
// 设置Layui框架中<fieldset>元素内<legend>元素通常用于显示字段集标题的字体大小为14px
font-size: 14px;
}
.layui-field-title {
margin: 25px 0 15px;
// 设置Layui框架中具有layui-field-title类的元素的外边距上外边距为25px下外边距为15px左右外边距为0
// 用于调整这类元素在页面中的布局间距
margin: 25px 0 15px;
}
</style>
</head>
<body>
<!-- 创建一个<fieldset>元素应用Layui的样式类layui-elem-field layui-field-title并设置顶部外边距为30px
用于对页面中的一组相关功能按钮等元素进行分组显示,使其在页面布局上更清晰 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>
<div>
<div class="layui-inline">
<!-- 创建一个Layui风格的按钮layui-btn样式为默认的主要按钮样式layui-btn-primary
同时应用Font Awesome字体图标库的图标类fa fa-pencil-square-o来显示一个铅笔图标按钮id为"insertButton",文字为“新增”,
点击该按钮可触发新增相关的功能操作 -->
<button class="layui-btn layui-btn-primary fa fa-pencil-square-o " id="insertButton"> 新增</button>
</div>
<div class="layui-inline">
<!-- 类似地创建另一个Layui按钮样式为默认按钮样式应用Font Awesome的下载图标类fa fa-cloud-download
id为"toXlsButton",文字为“导出”,用于触发导出相关功能 -->
<button class="layui-btn layui-btn-primary fa fa-cloud-download" id="toXlsButton"> 导出</button>
</div>
<div class="layui-inline">
<!-- 创建一个普通按钮type="button"应用Layui默认按钮样式Font Awesome的上传图标类fa fa-cloud-upload
id为"upload",文字为“导入”,用于触发导入相关功能 -->
<button type="button" class="layui-btn layui-btn-primary fa fa-cloud-upload" id="upload"> 导入</button>
</div>
</div>
</legend>
</fieldset>
<!-- 创建一个空的HTML表格元素id为"tableID"后续会通过JavaScript使用Layui的表格组件动态填充表格内容 -->
<table id="tableID"></table>
<script type="text/html" id="barAuth">
<!-- 定义一段HTML模板代码id为"barAuth"用于在Layui表格的某一列中显示操作按钮这里定义了两个超链接a标签
应用Layui按钮的样式类layui-btn layui-btn-xs并通过lay-event属性分别定义了点击事件的名称"edit"表示改密,"del"表示删除),
用于在表格中针对每一行数据提供相应的操作按钮 -->
<a class="layui-btn layui-btn-xs" lay-event="edit">改密</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
layui.use(['util', 'layer', 'table','upload'], function () {
// 使用Layui框架的模块加载机制加载['util', 'layer', 'table', 'upload']这几个模块,
// 并在加载完成后执行回调函数,在回调函数内可以使用这些模块提供的功能,
// 比如操作表格、弹出提示框、处理文件上传等功能
layui.use(['util', 'layer', 'table', 'upload'], function () {
$(document).ready(function () {
var table = layui.table,
layer = layui.layer,
upload = layui.upload,
util = layui.util;
upload.render({ //允许上传的文件后缀
// 使用Layui的上传组件upload进行相关配置用于实现文件上传功能
upload.render({
// 通过elem属性指定触发文件上传的DOM元素选择器这里绑定到id为"upload"的元素(即前面的导入按钮)
elem: '#upload'
,url: baseUrl + '/UploadFileServlet'
,accept: 'file' //普通文件
,exts: 'xlsx' //只允许上传excel文件
,before: function(){
// 设置上传文件的请求地址baseUrl可能是在全局变量中定义的基础地址UploadFileServlet应该是服务器端用于处理文件上传的Servlet等程序
, url: baseUrl + '/UploadFileServlet'
// 设置允许上传的文件类型为普通文件file表示任意类型的普通文件与一些特殊类型如图片、视频等区分开
, accept: 'file'
// 进一步限制只允许上传扩展名为.xlsx的Excel文件用于对上传文件的格式进行筛选控制
, exts: 'xlsx'
// 在文件上传前执行的回调函数这里通过layer.msg方法弹出提示框显示“文件上传中”告知用户文件正在上传的状态
, before: function () {
layer.msg('文件上传中');
}
,success: function(res){
// 文件上传成功后的回调函数参数res包含了服务器返回的响应数据这里简单地通过alert弹出响应数据中的msg属性值
// 实际应用中可能需要根据具体的返回数据结构进行更合理的处理,比如判断上传结果并给用户相应提示等
, success: function (res) {
alert(res.msg);
}
});
var countNum;
// 使用Layui的表格组件table创建并渲染一个表格配置相关参数来定义表格的各种属性和行为
var tableIns = table.render({
elem: '#tableID',
id: 'tableID',
url: baseUrl + '/LoginTableServlet',
cols: [
// 通过elem属性指定表格对应的DOM元素选择器这里绑定到id为"tableID"的空表格元素
elem: '#tableID'
// 为表格设置一个唯一的标识id这里同样设置为"tableID",方便后续对表格进行操作,比如重新加载数据等
, id: 'tableID'
// 设置表格数据的请求地址向服务器端的baseUrl + '/LoginTableServlet'地址获取表格数据,
// LoginTableServlet应该是用于处理表格数据查询等相关逻辑的后端程序
, url: baseUrl + '/LoginTableServlet'
// 定义表格的列信息,是一个二维数组,每个子数组表示一行的列配置,这里配置了多列的字段名、标题、宽度、排序、固定列等属性
, cols: [
[{
field: 'loginId',
title: '用户ID',
@ -93,17 +142,23 @@
toolbar: '#barAuth',
width: 150
}]
],
page: true,
where: {
]
// 设置表格支持分页功能Layui会根据后端返回的数据自动进行分页显示等相关处理
, page: true
// 可以向服务器传递额外的查询参数这里设置make参数为0具体含义取决于后端服务器对该参数的处理逻辑
// 可能用于区分不同的查询条件或数据筛选情况等
, where: {
make: 0
},
done: function (res, curr, count) {
}
// 表格数据加载完成后的回调函数参数res表示服务器返回的数据curr表示当前页码count表示总数据条数
// 这里将总数据条数存储在countNum变量中可能用于后续其他相关的逻辑处理如显示数据总数等
, done: function (res, curr, count) {
countNum = count;
}
});
//监听工具条
// 监听Layui表格的工具条事件当点击表格中具有lay-event属性定义的操作按钮如前面定义的"edit"或"del"按钮)时,
// 会触发这个回调函数obj参数包含了与该操作相关的数据、事件等信息
table.on('tool', function (obj) {
var data = obj.data,
layEvent = obj.event;
@ -111,32 +166,46 @@
var loginName = data.loginName;
var loginNameNow = getCookie("loginName");
if (layEvent === 'del') {
if (loginName != loginNameNow) {
// 判断要删除的数据对应的用户名loginName与当前登录的用户名loginNameNow是否不相等
// 如果不相等,说明不是当前登录账号的数据,允许进行删除操作
if (loginName!= loginNameNow) {
// 通过layer.confirm方法弹出一个确认框询问用户是否确定要删除该条数据设置了确认框的垂直偏移量为180px
// 并定义了两个按钮的文字(['是滴', '手滑']),点击不同按钮会执行对应的回调函数
layer.confirm('您确定要删除该条数据吗?', {
offset: '180px',
btn: ['是滴', '手滑']
}, function () {
// 通过Layui的表格组件table重新加载表格数据向服务器传递新的查询参数
// 这里设置make参数为4loginId参数为要删除的数据对应的用户IDloginId
// 具体的参数含义和服务器端的处理逻辑相关,可能用于告知服务器执行删除操作并更新表格数据显示等
table.reload('tableID', {
where: {
make: 4,
loginId: loginId
}
});
// 通过layer.msg方法弹出提示框显示“删除结果如下”设置垂直偏移量为250px图标为1可能表示某种提示图标样式
// 告知用户删除操作已执行,可查看相应结果
layer.msg('删除结果如下', {
offset: '250px',
icon: 1
});
}, function () {
// 如果用户点击了“手滑”取消按钮通过layer.msg方法弹出提示框显示“删除操作已取消”
// 设置垂直偏移量为250px告知用户删除操作已取消不进行实际的删除行为
layer.msg('删除操作已取消', {
offset: '250px'
});
});
} else {
// 如果要删除的数据对应的用户名与当前登录用户名相等,说明是当前登录账号,不允许删除,
// 通过layer.msg方法弹出提示框显示“当前登陆账号禁止删除”设置垂直偏移量为250px告知用户不能删除该账号数据
layer.msg('当前登陆账号禁止删除', {
offset: '250px'
});
}
} else if (layEvent === 'edit') {
// 当点击表格中的“改密”edit按钮时执行以下逻辑弹出一个密码输入框提示用户输入旧密码
layer.prompt({
title: '请输入旧密码',
formType: 1,
@ -144,9 +213,13 @@
maxlength: 18
}, function (value, index) {
var params = "loginName=" + loginName + "&loginPwd=" + value;
// 使用jQuery的$.post方法发起一个异步POST请求向服务器端的baseUrl + '/QueryLoginNameServlet'地址发送数据,
// QueryLoginNameServlet应该是用于验证密码是否正确的后端程序在请求成功的回调函数updateCheck中根据服务器返回的数据进行后续处理
$.post(baseUrl + '/QueryLoginNameServlet', params, function updateCheck(data) {
layer.close(index);
if (data === "0") {
// 如果服务器返回的数据为"0"表示密码不正确通过layer.alert方法弹出一个警告提示框
// 设置标题为“警告”图标为2表示警告的图标样式动画效果为6垂直偏移量为220px告知用户密码输入有误
layer.alert('密码不正确!', {
title: '警告',
icon: 2,
@ -154,6 +227,7 @@
offset: '220px'
});
} else {
// 如果密码验证通过(服务器返回的数据不是"0"),再次弹出一个密码输入框,提示用户输入新密码
layer.prompt({
title: '请输入新密码',
formType: 1,
@ -161,6 +235,7 @@
maxlength: 18
}, function (value1, index1) {
var pwd1 = value1;
// 接着又弹出一个密码输入框,提示用户再次输入新密码,用于确认密码输入一致
layer.prompt({
title: '请再次输入新密码',
formType: 1,
@ -168,8 +243,10 @@
maxlength: 18
}, function (value2, index2) {
var pwd2 = value2;
if (pwd2 != pwd1) {
if (pwd2!= pwd1) {
layer.close(index2);
// 如果两次输入的新密码不一致通过layer.alert方法弹出警告提示框显示“两次输入的值不一致
// 设置相关提示框属性,告知用户密码输入不一致,需要重新输入
layer.alert('两次输入的值不一致!', {
title: '警告',
icon: 2,
@ -180,8 +257,12 @@
layer.close(index1);
layer.close(index2);
params = "loginName=" + loginName + "&loginPwd=" + value2;
// 当两次新密码输入一致后发起一个异步POST请求向服务器端的baseUrl + '/UpdatePwdServlet'地址发送数据,
// UpdatePwdServlet应该是用于更新密码的后端程序在请求成功的回调函数中根据服务器返回的数据判断密码修改是否成功
$.post(baseUrl + '/UpdatePwdServlet', params, function updateCheck(data) {
if (data === '1') {
// 如果服务器返回的数据为'1'表示密码修改成功通过layer.alert方法弹出成功提示框
// 设置标题为“成功”图标为6表示成功的图标样式动画效果为1垂直偏移量为220px告知用户密码修改成功
layer.alert('修改成功!', {
title: '成功',
icon: 6,
@ -189,75 +270,5 @@
offset: '220px'
});
} else {
layer.alert('修改失败!', {
title: '失败',
icon: 2,
anim: 6,
offset: '220px'
});
}
});
}
});
});
}
});
});
}
});
//新增
$('#insertButton').click(function () {
layer.open({
title: "新增",
btn: ['关闭'],
yes: function (index) {
tableIns.reload({
where: {
make: 0
}
});
layer.close(index); //关闭弹窗
},
type: 2,
area: ['450px', '500px'],
fixed: false,
maxmin: true,
content: '/hb/insertLogin.jsp',
cancel: function () {
tableIns.reload({
where: {
make: 0
}
});
}
});
});
//导出
$('#toXlsButton').click(function () {
location.href = baseUrl + '/LoginExcelServlet';
layer.alert('Excel文件生成完成', {
title: '成功',
icon: 6,
anim: 1,
offset: '250px'
});
});
//回到顶端
util.fixbar({
showHeight: 2,
click: function (type) {
console.log(type);
}
});
});
});
</script>
</body>
</html>
// 如果服务器返回的数据不是'1'表示密码修改失败同样弹出提示框设置标题为“失败”图标为2表示失败的图标样式
// 动画效果为6垂直偏移量为220

@ -1,149 +1,199 @@
<!-- saved from url=(0043)http://hi.baidu.com/com/error/?from=oldblog -->
<!-- 这看起来像是浏览器保存页面时添加的注释信息,用于标记页面原始的来源网址等相关信息,不过一般对页面功能无实质影响 -->
<HTML>
<HEAD>
<TITLE>nav</TITLE>
<link rel="stylesheet Icon" type=" image/x-icon" href="img/windows.ico">
<!--STATUS OK-->
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<style>
.mod-page-body {
height: auto;
_height: 100%;
min-height: 100%;
zoom: 1;
}
.mod-page-body .mod-page-main .x-page-container {
padding: 0;
margin: 0;
zoom: 1
}
.mod-page-body {
color: #454545;
zoom: 1
}
.mod-page-body .mod-page-main {
padding-top: 50px
}
.mod-page-body .mod-page-main {
padding-bottom: 85px
}
.wordwrap {
word-break: break-all;
word-wrap: break-word
}
pre.wordwrap {
white-space: pre-wrap
}
.clearfix:after {
content: '\20';
display: block;
height: 0;
clear: both
}
.clearfix {
zoom: 1
}
.grid-98 {
overflow: hidden;
margin: 0 auto;
padding: 0
}
.grid-98 {
width: 980px
}
.mod-footer {
padding: 30px 0 15px 0;
width: 100%;
height: 40px;
position: relative;
margin-top: -85px;
clear: both;
zoom: 1
}
.mod-footer .hidden-box {
line-height: 0;
height: 0;
overflow: hidden
}
.mod-footer .footer-box {
text-align: center;
font-family: Arial, simsun;
font-size: 12px
}
.mod-footer .footer-box .copy-box {
color: #959595;
line-height: 12px;
height: 12px;
overflow: hidden
}
.mod-footer .footer-box .inner-box {
margin-bottom: 10px;
line-height: 14px;
height: 14px;
overflow: hidden;
color: #3FA7CB
}
.mod-footer .hidden-box {
line-height: 0;
height: 0;
overflow: hidden
}
.mod-page-body
</style>
<STYLE type=text/css>
.mod-notfound {
BORDER-RIGHT: #444444 1px solid;
BORDER-TOP: #444444 1px solid;
MARGIN-TOP: 10px;
BACKGROUND: #F0F0F0;
BORDER-LEFT: #444444 1px solid;
BORDER-BOTTOM: #444444 1px solid;
HEIGHT: 380px;
TEXT-ALIGN: center;
border-radius: 10px
}
</STYLE>
</HEAD>
<META content="MSHTML 6.00.6000.17117" name=GENERATOR>
</HEAD>
<BODY bgcolor="#f0f0f0">
<SECTION class=mod-page-body>
<DIV class="mod-page-main wordwrap clearfix">
<DIV class=x-page-container>
<DIV class="mod-notfound grid-98">
<IMG class=img-notfound height=300 src="./img/nav.jpg" width=786>
<P style="FONT-SIZE: 18px; LINE-HEIGHT: 50px">推開窗 回到夢裡的故鄉</P>
</DIV>
</DIV>
</DIV>
</SECTION>
<FOOTER class="mod-footer mod-cs-footer">
<DIV class="clearfix hidden-box"></DIV>
<DIV class=footer-box>
<DIV class=copy-box>©2017&nbsp;酒店管理系统</DIV>
<HEAD>
<!-- 设置页面的标题为“nav”该标题通常会显示在浏览器的标题栏中方便用户识别当前页面的主题或功能 -->
<TITLE>nav</TITLE>
<!-- 引入一个图标文件img目录下的windows.ico图标设置为页面的图标favicon
rel属性表示关联关系type属性指定图标文件的类型用于在浏览器的标签页、书签栏等地方显示该图标增强页面辨识度 -->
<link rel="stylesheet Icon" type=" image/x-icon" href="img/windows.ico">
<!-- 这可能是某种状态标识注释写着“STATUS OK”或许是开发过程中用于标记页面相关状态的说明实际对页面展示和功能没有直接作用 -->
<!--STATUS OK-->
<!-- 设置HTML页面的元信息META通过http-equiv属性指定等效的HTTP头部字段这里设置Content-Type表示内容类型
content属性具体定义了类型为“text/html”即HTML格式页面以及字符编码为“utf-8”确保页面能正确显示字符避免乱码 -->
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<style>
.mod-page-body {
// 设置元素的高度为自动,根据内容自适应高度,同时设置了一些浏览器兼容性相关的属性,
// _height属性可能针对特定浏览器设置为100%min-height设置最小高度为100%zoom:1常用于解决IE浏览器下的一些布局问题触发hasLayout属性
height: auto;
_height: 100%;
min-height: 100%;
zoom: 1;
}
.mod-page-body.mod-page-main.x-page-container {
// 设置内边距为0外边距为0同样zoom:1用于浏览器兼容性处理用于清除浮动等布局相关问题使该容器元素内部布局更规整
padding: 0;
margin: 0;
zoom: 1
}
.mod-page-body {
// 设置元素内文字颜色为#454545这种深灰色并且再次添加zoom:1用于浏览器兼容性相关的布局处理
color: #454545;
zoom: 1
}
.mod-page-body.mod-page-main {
// 设置该元素的顶部内边距为50px用于调整内部内容与顶部的距离使页面布局更美观
padding-top: 50px
}
.mod-page-body.mod-page-main {
// 设置该元素的底部内边距为85px类似顶部内边距的作用调整内容与底部的距离方便后续布局其他元素如底部版权等信息
padding-bottom: 85px
}
.wordwrap {
// 设置文字的换行规则word-break: break-all表示允许单词内换行
// word-wrap: break-word表示如果单词过长则强制换行保证文字在容器内合理显示避免溢出
word-break: break-all;
word-wrap: break-word
}
.pre.wordwrap {
// 对于<pre>元素应用.wordwrap类时设置其空白符处理方式为pre-wrap
// 即保留空白符的同时也能根据容器宽度自动换行,方便显示格式化的文本内容
white-space: pre-wrap
}
.clearfix:after {
// 使用:after伪元素添加一个内容为空的字符'\20',可能是空格之类的占位,不同浏览器有不同处理方式),
// 并设置为块级元素高度为0用于清除浮动确保父元素能正确包含浮动的子元素维持布局的正常显示
content: '\20';
display: block;
height: 0;
clear: both
}
.clearfix {
// 为应用.clearfix类的元素添加zoom:1属性同样用于解决特定浏览器如IE下的布局问题触发hasLayout属性配合:after伪元素实现清除浮动等布局效果
zoom: 1
}
.grid-98 {
// 设置元素超出部分隐藏使其不会显示在容器外面并且设置水平方向上居中margin: 0 auto
// 内边距设置为0用于布局一个宽度固定且水平居中的容器方便页面内容的整体排版
overflow: hidden;
margin: 0 auto;
padding: 0
}
.grid-98 {
// 明确设置该元素的宽度为980px结合前面的居中设置等常用于构建页面的主体内容区域宽度适配常见的屏幕分辨率等情况
width: 980px
}
.mod-footer {
// 设置底部元素(.mod-footer的内边距上内边距为30px下内边距为15px左右内边距为0
// 同时设置宽度为100%铺满整个父元素宽度高度为40px用于定义底部区域的大小和内部内容的布局空间
padding: 30px 0 15px 0;
width: 100%;
height: 40px;
// 设置相对定位position: relative用于后续调整其内部元素的位置等
// margin-top: -85px将元素向上移动85px可能是为了使其与上面的内容重叠一部分实现特定的布局效果
// clear: both用于清除浮动避免受到上面浮动元素的影响保证在底部正确显示zoom:1用于浏览器兼容性布局处理
position: relative;
margin-top: -85px;
clear: both;
zoom: 1
}
.mod-footer.hidden-box {
// 设置行高为0高度为0并且超出部分隐藏可能用于隐藏一些不需要显示但又在HTML结构中存在的元素或者用于创建一些空白占位等布局用途
line-height: 0;
height: 0;
overflow: hidden
}
.mod-footer.footer-box {
// 设置文本居中对齐定义字体为Arial和宋体simsun针对中文显示字体大小为12px用于规范底部版权等文字的显示样式
text-align: center;
font-family: Arial, simsun;
font-size: 12px
}
.mod-footer.footer-box.copy-box {
// 设置文字颜色为#959595这种浅灰色行高为12px高度为12px超出部分隐藏用于设置版权相关文字的样式和显示效果
color: #959595;
line-height: 12px;
height: 12px;
overflow: hidden
}
.mod-footer.footer-box.inner-box {
// 设置底部其他相关元素(.inner-box的底部外边距为10px行高为14px高度为14px超出部分隐藏颜色为#3FA7CB这种蓝色
// 用于区分不同的底部文字内容,调整其显示布局和样式
margin-bottom: 10px;
line-height: 14px;
height: 14px;
overflow: hidden;
color: #3FA7CB
}
.mod-footer.hidden-box {
// 再次出现相同的样式设置,可能是重复定义或者用于覆盖之前的设置,作用与前面的.hidden-box样式中关于隐藏元素的设置相同
line-height: 0;
height: 0;
overflow: hidden
}
.mod-page-body
</style>
<STYLE type=text/css>
.mod-notfound {
// 设置元素的右边框为1px的实线颜色为#444444这种深灰色同理设置上边框、左边框和下边框
// 背景颜色设置为#F0F0F0浅灰色高度为380px文本居中对齐并且设置边框圆角为10px用于创建一个具有特定样式的、带边框和圆角的容器元素
// 可能用于显示特定的提示信息等内容,比如这里可能是用于展示页面出错或未找到相关内容的提示区域样式
BORDER-RIGHT: #444444 1px solid;
BORDER-TOP: #444444 1px solid;
MARGIN-TOP: 10px;
BACKGROUND: #F0F0F0;
BORDER-LEFT: #444444 1px solid;
BORDER-BOTTOM: #444444 1px solid;
HEIGHT: 380px;
TEXT-ALIGN: center;
border-radius: 10px
}
</STYLE>
</HEAD>
<META content="MSHTML 6.00.6000.17117" name=GENERATOR>
</HEAD>
<BODY bgcolor="#f0f0f0">
<!-- 创建一个<SECTION>元素,应用类名.mod-page-body用于划分页面的主体内容区域结合前面定义的相关样式来控制该区域的布局和显示效果 -->
<SECTION class=mod-page-body>
<!-- 在<SECTION>元素内创建一个<DIV>元素应用多个类名mod-page-main wordwrap clearfix
用于放置主要的页面内容其中“wordwrap”类控制文字换行“clearfix”类用于清除浮动等布局处理 -->
<DIV class="mod-page-main wordwrap clearfix">
<!-- 在上述<DIV>元素内再创建一个<DIV>元素,应用类名.x-page-container可能作为更具体的页面内容容器方便后续进一步布局子元素 -->
<DIV class=x-page-container>
<!-- 创建一个<DIV>元素,应用类名.mod-notfound grid-98结合前面定义的样式它具有特定的边框、背景、高度等样式
并且宽度为980px水平居中用于展示特定的内容这里可能是在页面出现某种情况如未找到对应内容时显示相关提示及图片等 -->
<DIV class="mod-notfound grid-98">
<!-- 在该<DIV>元素内插入一张图片,应用类名.img-notfound设置图片的高度为300px宽度为786px图片来源路径为./img/nav.jpg -->
<IMG class=img-notfound height=300 src="./img/nav.jpg" width=786>
<!-- 创建一个段落元素<P>设置字体大小为18px行高为50px里面包含一段文字“推開窗 回到夢裡的故鄉”,用于显示特定的提示性文字内容 -->
<P style="FONT-SIZE: 18px; LINE-HEIGHT: 50px">推開窗 回到夢裡的故鄉</P>
</DIV>
</FOOTER>
</DIV>
</DIV>
</SECTION>
<!-- 创建一个<FOOTER>元素,应用类名.mod-footer mod-cs-footer用于构建页面的底部区域结合前面定义的底部样式来显示版权等相关信息 -->
<FOOTER class="mod-footer mod-cs-footer">
<!-- 在<FOOTER>元素内创建一个<DIV>元素,应用类名.clearfix hidden-box可能用于清除浮动或者作为隐藏的布局占位元素等用途 -->
<DIV class="clearfix hidden-box"></DIV>
<!-- 再创建一个<DIV>元素,应用类名.footer-box用于放置底部具体的文字内容按照前面定义的.footer-box样式进行显示 -->
<DIV class=footer-box>
<!-- 在.footer-box内又创建一个<DIV>元素,应用类名.copy-box用于显示版权相关的文字按照.copy-box样式设置显示效果
这里显示“©2017&nbsp;酒店管理系统”,表示版权归属及系统名称等信息 -->
<DIV class=copy-box>©2017&nbsp;酒店管理系统</DIV>
</DIV>
</FOOTER>
</BODY>
</BODY>
</HTML>
Loading…
Cancel
Save