|
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
|
|
pageEncoding="UTF-8"%>
|
|
|
<%@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();
|
|
|
// 构建项目的基础路径，包含协议（如http或https）、服务器名称、服务器端口以及上下文路径，用于准确地指向项目内的各种资源。
|
|
|
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
|
|
|
%>
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
|
|
|
<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" />
|
|
|
<!-- 条件注释，当浏览器版本低于IE9时，引入html5shiv.js和respond.min.js这两个脚本文件，它们的作用是让低版本的IE浏览器（IE8及以下）能够支持HTML5标签和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图标字体库的样式表文件，通过使用图标字体，可以方便地在页面中展示各种图标，并且能够根据需要灵活调整图标大小、颜色等样式属性，提升页面的可视化效果和交互性。 -->
|
|
|
<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图片能正常显示。 -->
|
|
|
<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标签创建一个面包屑导航栏，用于清晰展示当前页面在整个网站结构中的位置路径，方便用户进行页面导航以及了解所处层级关系，通过图标字体（Hui-iconfont）展示首页图标，并使用<span>标签结合特定样式来分隔不同层级的名称，同时提供一个刷新按钮（通过JavaScript实现页面刷新功能）。 -->
|
|
|
<nav class="breadcrumb"><i class="Hui-iconfont"></i> 首页 <span class="c-gray en">></span> 会员中心 <span class="c-gray en">></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"></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元素，用于放置添加会员的按钮，通过使用a标签模拟按钮样式，并添加多个类名来设置按钮的外观样式（如btn btn-primary radius表示这是一个主要的、具有特定样式的圆角按钮），同时利用data-title属性设置按钮的提示信息（可在一些交互场景下显示，比如鼠标悬停时的提示框内容），data-href和href属性都指向添加会员的JSP页面地址（通过basePath构建完整路径），点击该按钮可跳转到相应的添加会员页面。 -->
|
|
|
<span class="l">
|
|
|
<a class="btn btn-primary radius" data-title="添加车次" data-href="<%=basePath%>pages/admin/right/addMember.jsp" href="<%=basePath%>pages/admin/right/addMember.jsp"><i class="Hui-iconfont"></i> 添加会员</a>
|
|
|
</span>
|
|
|
<!-- 创建一个位于右侧的span元素，用于显示会员数据的总数信息，通过使用JSTL表达式（${memberList.size()}）获取名为memberList的集合（可能是从后台传递过来的会员信息列表）的元素个数，并展示给用户，让用户了解当前会员数据的总量情况。 -->
|
|
|
<span class="r">共有数据：<strong>${memberList.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">
|
|
|
<!-- 定义序号列，设置宽度为40px，用于展示会员信息在列表中的顺序编号，方便用户查看和定位具体会员记录。 -->
|
|
|
<th width="40">序号</th>
|
|
|
<!-- 定义会员ID列，宽度为60px，用于展示每个会员在系统中的唯一标识编号，便于后台管理和数据关联操作等。 -->
|
|
|
<th width="60">会员ID</th>
|
|
|
<!-- 定义用户名列，宽度为120px，用于展示会员登录所使用的用户名信息，是识别会员身份的重要依据之一。 -->
|
|
|
<th width="120">用户名</th>
|
|
|
<!-- 定义密码列，宽度为120px，用于展示会员账号对应的密码信息（实际应用中可能会进行加密处理，这里仅为展示逻辑），出于安全考虑，一般不会直接明文显示密码，此处只是示例表格结构中的一部分。 -->
|
|
|
<th width="80">密码</th>
|
|
|
<!-- 定义个人信息列，宽度为80px，此处通过放置一个链接（a标签）来引导用户查看更详细的个人信息内容，链接指向相应的Servlet（GetPmemberByMemberIdServlet）并传递会员ID作为参数，以获取并展示该会员的详细个人信息（虽然当前代码中图片显示部分被注释掉了，但可能原本有通过图片等方式引导查看的设计意图）。 -->
|
|
|
<th width="80">个人信息</th>
|
|
|
<!-- 定义会员状态列，宽度为40px，通过使用JSTL的<c:if>标签根据会员的状态值（ifUse属性）来动态显示不同的状态文本，如值为1时显示"在线"（并设置颜色为绿色以突出显示），值为0时显示"离线"，直观地告知用户会员当前的在线情况。 -->
|
|
|
<th width="40">会员状态</th>
|
|
|
<!-- 定义注册时间列，宽度为120px，使用JSTL的<fmt:formatDate>标签对会员的注册时间（registerTime属性）进行格式化处理，按照"yyyy-MM-dd HH:mm:ss"的格式展示给用户，使其呈现为清晰易读的日期时间格式。 -->
|
|
|
<th width="120">注册时间</th>
|
|
|
<!-- 定义登录时间列，宽度同样为120px，也是利用<fmt:formatDate>标签对会员的登录时间（logintimes属性）进行格式化输出，以便用户了解会员最近一次登录的具体时间信息。 -->
|
|
|
<th width="120">登录时间</th>
|
|
|
<!-- 定义操作列，宽度为120px，用于放置针对会员信息进行操作的链接按钮，如编辑和删除操作，通过图标字体（Hui-iconfont）展示相应图标，并设置链接指向对应的Servlet（UpdateMemberAdminServlet用于编辑、DeleteMemberAdminServlet用于删除），同时传递会员ID作为参数，实现对具体会员记录的相应操作功能，每个链接都设置了无文本装饰样式（text-decoration:none）以及左侧外边距（ml-5）来优化外观和布局。 -->
|
|
|
<th width="120">操作</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<!-- 创建表体（tbody）部分，用于填充表格的具体数据行，每一行对应一条会员记录信息，通过JSTL的<c:forEach>标签循环遍历名为memberList的会员信息集合，将每个会员对象依次取出进行数据展示。 -->
|
|
|
<tbody>
|
|
|
<c:forEach items="${memberList}" var="member" varStatus="status">
|
|
|
<tr class="text-c">
|
|
|
<!-- 在表格单元格中展示当前会员记录的序号，通过循环状态的索引（从0开始）加1来计算得到，确保序号从1开始依次递增，方便用户查看和计数。 -->
|
|
|
<td>${status.index + 1}</td>
|
|
|
<!-- 在表格单元格中展示当前会员的会员ID，直接从member对象中获取memberId属性值进行展示，该ID是会员在系统中的唯一标识，用于各种数据关联和操作定位等用途。 -->
|
|
|
<td>${member.memberId}</td>
|
|
|
<td>${member.userName}</td>
|
|
|
<td>${member.password}</td>
|
|
|
<td>
|
|
|
<!-- 创建一个链接（a标签），用于引导用户查看会员的详细个人信息，链接的href属性指向GetPmemberByMemberIdServlet，并传递会员ID作为参数（通过JSTL表达式嵌入memberId的值），点击该链接可跳转到相应页面获取并展示更详细的个人信息内容，虽然当前代码中图片显示相关部分（<img>标签）被注释掉了，但可能原本有通过图片等可视化元素引导点击查看的设计思路，现在仅显示文本"点击查看"作为替代提示。 -->
|
|
|
<a href="<%=basePath%>GetPmemberByMemberIdServlet?temp=admin&memberId=${member.memberId}">
|
|
|
<%-- <img alt="" src="<%=basePath%>images/look.jpg"> --%>
|
|
|
点击查看
|
|
|
</a>
|
|
|
</td>
|
|
|
<!-- 使用JSTL的<c:if>条件判断标签，根据会员对象中ifUse属性的值来决定显示不同的会员状态文本，如果ifUse值为1，表示会员处于在线状态，就在表格单元格中显示绿色的"在线"字样（通过设置style属性来改变文本颜色）；如果ifUse值为0，则显示"离线"字样，表示会员当前未处于在线状态。 -->
|
|
|
<c:if test="${member.ifUse == 1}">
|
|
|
<td style="color:green">在线</td>
|
|
|
</c:if>
|
|
|
<c:if test="${member.ifUse == 0}">
|
|
|
<td>离线</td>
|
|
|
</c:if>
|
|
|
<td>
|
|
|
<!-- 使用JSTL的<fmt:formatDate>标签对会员的注册时间（registerTime属性）进行格式化处理，按照"yyyy-MM-dd HH:mm:ss"的日期时间格式将其转换为易读的字符串形式并展示在表格单元格中，方便用户直观了解会员的注册时间信息。 -->
|
|
|
<fmt:formatDate value="${member.registerTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
|
|
|
</td>
|
|
|
<td>
|
|
|
<!-- 同样使用<fmt:formatDate>标签对会员的登录时间（logintimes属性）进行格式化，按照"yyyy-MM-dd HH:mm:ss"格式将其转换为合适的字符串展示出来，让用户知晓会员最近一次登录系统的具体时间情况。 -->
|
|
|
<fmt:formatDate value="${member.logintimes}" pattern="yyyy-MM-dd HH:mm:ss"/>
|
|
|
</td>
|
|
|
<td class="f-14 td-manage">
|
|
|
<!-- 创建一个编辑操作的链接（a标签），设置无文本装饰样式（text-decoration:none）以及左侧外边距（ml-5）用于优化外观布局，href属性指向UpdateMemberAdminServlet，并通过JSTL表达式传递当前会员的会员ID作为参数，title属性设置鼠标悬停时的提示信息为"编辑"，内部通过图标字体（Hui-iconfont）展示编辑图标，点击该链接可跳转到相应页面进行会员信息的编辑操作。 -->
|
|
|
<a style="text-decoration:none" class="ml-5" href="<%=basePath%>UpdateMemberAdminServlet?memberId=${member.memberId}" title="编辑"><i class="Hui-iconfont"></i></a>
|
|
|
<!-- 创建一个删除操作的链接（a标签），同样设置无文本装饰样式和左侧外边距，href属性指向DeleteMemberAdminServlet并传递会员ID参数，title属性设置鼠标悬停提示信息为"删除"，通过图标字体显示删除图标，点击该链接可触发对当前会员记录的删除操作（当然，实际应用中通常会有相应的确认提示等交互逻辑来防止误操作）。 -->
|
|
|
<a style="text-decoration:none" class="ml-5" href="<%=basePath%>DeleteMemberAdminServlet?memberId=${member.memberId}" title="删除"><i class="Hui-iconfont"></i></a>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</c:forEach>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!--_footer 作为公共模版分离出去-->
|
|
|
<script type="text/javascript" src="<%=basePath%>lib/jquery/1.9.1/jquery.min.js"></script>
|
|
|
<script type="text/javascript" src="<%=basePath%>lib/layer/2.4/layer.js"></script>
|
|
|
<script type="text/javascript" src="<%=basePath%>static/h-ui/js/H-ui.min.js"></script>
|
|
|
<script type="text/javascript" src="<%=basePath%>static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->
|
|
|
|
|
|
<!--请在下方写此页面业务相关的脚本-->
|
|
|
<script type="text/javascript" src="<%=basePath%>lib/My97DatePicker/4.8/WdatePicker.js"></script>
|
|
|
<script type="text/javascript" src="<%=basePath%>lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
|
|
|
<script type="text/javascript" src="<%=basePath%>lib/laypage/1.2/laypage.js"></script>
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
$('.table-sort').dataTable({
|
|
|
"aaSorting": [[ 0, "asc" ]],//默认第几个排序
|
|
|
"bStateSave": true,//状态保存
|
|
|
"pading":false,
|
|
|
"aoColumnDefs": [
|
|
|
//{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
|
|
|
{"orderable":false,"aTargets":[8]}// 不参与排序的列
|
|
|
]
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html>
|
|
|
|
|
|
|
