|
|
<%@ 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" %>
|
|
|
<%
|
|
|
// 获取当前项目的上下文路径，后续用于构建完整的资源访问路径，例如引用样式表、脚本文件以及向服务器端提交数据时的地址等操作，都会基于此路径来拼接出准确的URL，保证资源的正确引用和数据的准确交互，无论项目部署在何种环境下。
|
|
|
String path = request.getContextPath();
|
|
|
// 构建项目的基础路径，它将请求的协议（如http或https）、服务器名称、服务器端口与前面获取的上下文路径组合起来，形成一个完整的、可用于定位项目内各种资源及指定服务器端处理逻辑的基础URL地址。
|
|
|
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
|
|
|
%>
|
|
|
<!--_meta 作为公共模版分离出去-->
|
|
|
<!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" />
|
|
|
<!-- 设置页面的书签图标（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这两个脚本文件。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]>
|
|
|
<!--/meta 作为公共模版分离出去-->
|
|
|
<title>修改会员</title>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<!-- 使用article标签创建一个页面区域，通常用于表示独立的、自包含的内容块，在这里作为包含修改会员信息表单的容器，方便对这部分内容进行整体的样式设置和布局管理，使其在页面中呈现出清晰、有条理的视觉效果。 -->
|
|
|
<article class="page-container">
|
|
|
<!-- 创建一个表单（form），用于收集用户输入的会员信息（如用户名、密码等）并提交给服务器进行处理。action属性设置为"<%=basePath%>UpdateMemberAdminServlet"，表示表单提交后数据将被发送到对应的服务器端处理逻辑（这里应该是一个Servlet或者其他后端处理程序，负责根据提交的数据来更新会员相关信息），method属性设置为"post"，意味着表单数据将以POST方式提交，这种方式相对更安全，适合传输敏感信息（如密码等），同时通过class属性应用相关的样式类来设置表单的外观样式，id属性用于唯一标识这个表单，方便后续通过JavaScript等方式对表单进行操作和交互。 -->
|
|
|
<form action="<%=basePath%>UpdateMemberAdminServlet" method="post" class="form form-horizontal" id="form-member-add">
|
|
|
<!-- 创建一个隐藏域（input type="hidden"），用于在表单提交时传递会员的ID信息，其name属性设置为"memberId"，与后端接收参数的名称对应，value属性通过JSTL表达式（${member.memberId}）从后台传递过来的数据中获取会员ID的值，这样在提交表单时，后端就能知道要修改哪个会员的信息，而用户在页面上看不到这个字段，起到了数据传递但不展示的作用。 -->
|
|
|
<input type="hidden" name="memberId" value="${member.memberId}">
|
|
|
<!-- 创建一个行（row）容器，用于布局内部的标签和表单控件，cl类可能是用于设置一些列相关的样式规则（具体取决于所使用的样式框架定义），常见的作用是控制不同屏幕尺寸下元素的布局排列方式等，使其具有响应式布局效果，适配多种设备屏幕。 -->
|
|
|
<div class="row cl">
|
|
|
<!-- 创建一个表单标签（label），用于显示提示文本，通过设置类名来控制在不同屏幕尺寸（超小屏幕xs和小屏幕sm）下所占的列数，这里col-xs-4 col-sm-3表示在超小屏幕下占4列，小屏幕下占3列，以此来布局标签在页面中的位置，同时使用<span class="c-red">*</span>可以添加红色的星号用于提示该字段为必填项（虽然这里视觉效果上可能还需要结合CSS样式进一步调整），文本内容为"会员ID"，明确提示用户此处对应的信息。需要注意的是，此处的会员ID输入框是禁用状态，用户不能修改，只是展示其值。 -->
|
|
|
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>会员ID：</label>
|
|
|
<!-- 创建一个表单控件所在的容器，同样通过类名控制在不同屏幕尺寸下的宽度等布局样式，这里设置了宽度为300px，用于放置具体的表单输入控件，确保输入框在页面中有合适的显示宽度，便于查看相应信息。 -->
|
|
|
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
|
|
|
<!-- 创建一个文本输入框（input），类型设置为"text"，表示用于输入普通文本信息，设置为禁用状态（disabled="disabled"），意味着用户不能修改该输入框中的内容，其值通过JSTL表达式（${member.memberId}）从后台传递过来的数据中获取并显示，同时设置了占位符（placeholder）为空，并且没有设置id和name属性（因为这里不需要用户交互操作，只是展示会员ID值）。 -->
|
|
|
<input type="text" disabled="disabled" class="input-text" value="${member.memberId}" placeholder="" id="" name="">
|
|
|
</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;">
|
|
|
<!-- 创建一个文本输入框，类型为"text"，用户可以进行输入操作（这里没有设置禁用属性，与上面会员ID输入框不同），其值通过JSTL表达式（${member.userName}）从后台获取并显示，设置了占位符为空，同时设置了id为"userName"和name为"userName"，方便后续通过JavaScript验证或者表单提交时传递该字段的值，用于后端更新会员用户名信息。 -->
|
|
|
<input type="text" class="input-text" value="${member.userName}" placeholder="" id="userName" name="userName">
|
|
|
</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" class="input-text" value="${member.password}" placeholder="" id="password" name="password">
|
|
|
</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;">
|
|
|
<!-- 使用JSTL的<c:if>条件判断标签，根据会员对象中ifUse属性的值来决定显示不同的会员状态文本，如果ifUse值为1，表示会员处于在线状态，就在表格单元格中显示"在线"字样，并且设置输入框为禁用状态（因为这里只是展示状态，不允许用户修改）；如果ifUse值为0，则显示"离线"字样，同样设置为禁用状态，直观地告知用户会员当前的在线情况，且保证用户不能随意更改该状态信息。 -->
|
|
|
<c:if test="${member.ifUse == 1}">
|
|
|
<input type="text" disabled="disabled" class="input-text" value="在线" placeholder="" id="" name="">
|
|
|
</c:if>
|
|
|
<c:if test="${member.ifUse == 0}">
|
|
|
<input type="text" disabled="disabled" class="input-text" value="离线" placeholder="" id="" name="">
|
|
|
</c:if>
|
|
|
</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;">
|
|
|
<!-- 创建一个文本输入框，设置为禁用状态，其值通过JSTL表达式（${member.registerTime}）从后台获取会员的注册时间信息并展示出来，用户不能对该时间进行修改，只是用于查看，占位符为空，没有设置有效的id和name属性（因为不需要交互操作）。 -->
|
|
|
<input type="text" disabled="disabled" class="input-text" value="${member.registerTime}" placeholder="" id="" name="">
|
|
|
</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="${member.logintimes}" placeholder="" id="" name="">
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 创建一个行（row）容器，用于放置提交按钮，通过设置列相关的类名来控制按钮在不同屏幕尺寸下的布局位置，这里通过col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3设置了按钮在超小屏幕和小屏幕下的水平偏移和宽度占比情况，使其在页面中能处于合适的居中位置（具体效果取决于整体的样式框架布局规则）。 -->
|
|
|
<div class="row cl">
|
|
|
<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
|
|
|
<!-- 创建一个按钮（通过input标签设置类型为"submit"来实现表单提交功能），添加了多个类用于设置按钮的样式（如btn btn-primary radius表示这是一个主要的、具有特定样式的圆角按钮），按钮文本为"提交"，当用户点击该按钮时，表单会按照之前设置的action和method属性将数据提交到服务器端进行处理，触发相应的会员信息更新逻辑（后端需做好相应的验证、更新等操作）。 -->
|
|
|
<input class="btn btn-primary radius" type="submit" value=" 提交 ">
|
|
|
</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 作为公共模版分离出去-->
|
|
|
|
|
|
<!--请在下方写此页面业务相关的脚本，这里预留了位置方便添加与该页面特定业务逻辑相关的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> |
