cacheTool4User.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%--用户数据缓存同步工具--%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>领航者|用户数据缓存同步工具</title>
<!-----------------Bootstrap相关#START------------------->
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet"
href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- Bootstrap 移动设备优先 禁用缩放功能-->
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-----------------Bootstrap相关#END-------------------->
<script src="${pageContext.request.contextPath}/onlinePromotion/cache/cacheTool4User.js"></script>
</head>
<body>
<div style="margin: 0 auto; width: 60%;">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button id="selectBtn" type="button"
class="btn btn-default dropdown-toggle" data-toggle="dropdown">
查询方式<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<input type="hidden" id="selectType" />
<li><a id="option_UserID"
href="javascript:changeSelect(1,'option_UserID');">UserID</a></li>
<li><a id="option_Account"
href="javascript:changeSelect(2,'option_Account');">Account</a></li>
<li><a id="option_Tel"
href="javascript:changeSelect(3,'option_Tel');">Phone</a></li>
<li><a id="option_Emal"
href="javascript:changeSelect(4,'option_Emal');">Emal</a></li>
<li><a id="option_IdentityCard"
href="javascript:changeSelect(5,'option_IdentityCard');">IdentityCard</a></li>
<li class="divider"></li>
<li><a href="#">我是打酱油的</a></li>
</ul>
</div>
<!-- /btn-group -->
<input id="userKey" type="text" class="form-control"> <span
class="input-group-btn">
<button class="btn btn-default" type="button"
onclick="submitSelect()" style="height: 34px;"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
<br>
<hr>
<h4 style="margin-left: 50px">用户数据查询</h4>
<table class="table" style="/*width: 80%;*/">
<thead>
<tr class="active">
<th>数据库_User</th>
<th>数据字段名称</th>
<th>Redis_User</th>
</tr>
</thead>
<tbody id="userTbody">
</tbody>
</table>
<div class="alert alert-warning">
<!-- 提示框 -->
<a href="#" class="close" data-dismiss="alert">
×
</a>
<strong>提示!</strong>数据库缓存不同的数据背景色不同。
</div>
<hr>
<!-- 按钮 -->
<button type="button" class="btn btn-default btn-lg" onclick="copyDBUser2Cache()">同步数据到缓存</button>
<button type="button" class="btn btn-default btn-lg" onclick="repairHeadpic2Default()">更换为默认头像</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel" style="text-align: center;">
用户缓存同步
</h4>
</div>
<div id="modalText" class="modal-body">
在这里添加一些文本
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">
确定
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</body>
</html>
cacheTool4User.js
var searchUserId = "";// 当前查询的userId
var userKey = "";// 查询条件
var selectType = "";// 查询方式 1:id,2:账号account,3:手机号,4:邮箱,5:身份证
/**
* 更改查询方式
*
* @author 张颖辉
* @param selectType
* @param optionId
* @return
*/
var changeSelect = function(selectType, optionId) {
$("#selectType").val(selectType);
$("#selectBtn").html(
$("#" + optionId).html() + "<span class='caret'></span>");
}
/**
* @author 张颖辉 提交查询
* @return
*/
var submitSelect = function() {
selectType = $("#selectType").val();
userKey = $("#userKey").val();
// alert(userKey);
ajax4Select(userKey, selectType);
}
/**
* 查询请求发送
*
* @author 张颖辉
* @param userKey
* @param selectType
* @return
*/
var ajax4Select = function(userKey, selectType) {
var url = "/LoginMS/selectUserFromDBAndCache";
$.ajax( {
url : url,
type : 'post',
async : false,
data : {
"userKey" : userKey,
"keyType" : selectType
},
success : function(json) {
var result = eval("(" + json + ")");
var dbUserVO = result.dbUserVO;
var rUserVO = result.rUserVO;
if (dbUserVO != null) {
searchUserId = dbUserVO.id;
} else if (rUserVO != null) {
searchUserId = rUserVO.id;
} else {
searchUserId = "";
}
$("#userTbody").html("");
if (result.success == true) {
$("#userTbody").append(
"<tr><td>" + (dbUserVO == null ? "" : dbUserVO.id)
+ "</td><td>ID</td><td>"
+ (rUserVO == null ? "" : rUserVO.id)
+ "</td></tr>");
$("#userTbody").append(
"<tr><td>" + (dbUserVO == null ? "" : dbUserVO.account)
+ "</td><td>Account</td><td>"
+ (rUserVO == null ? "" : rUserVO.account)
+ "</td></tr>");
$("#userTbody").append(
"<tr><td>" + (dbUserVO == null ? "" : dbUserVO.phone)
+ "</td><td>Phone</td><td>"
+ (rUserVO == null ? "" : rUserVO.phone)
+ "</td></tr>");
$("#userTbody").append(
"<tr><td>" + (dbUserVO == null ? "" : dbUserVO.email)
+ "</td><td>Email</td><td>"
+ (rUserVO == null ? "" : rUserVO.email)
+ "</td></tr>");
$("#userTbody").append(
"<tr><td>"
+ (dbUserVO == null ? ""
: dbUserVO.idcardstring)
+ "</td><td>Idcardstring</td><td>"
+ (rUserVO == null ? "" : rUserVO.idcardstring)
+ "</td></tr>");
$("#userTbody").append(
"<tr><td>"
+ (dbUserVO == null ? "" : dbUserVO.areaname)
+ "</td><td>areaname</td><td>"
+ (rUserVO == null ? "" : rUserVO.areaname)
+ "</td></tr>");
$("#userTbody").append(
"<tr><td>" + (dbUserVO == null ? "" : dbUserVO.motto)
+ "</td><td>motto</td><td>"
+ (rUserVO == null ? "" : rUserVO.motto)
+ "</td></tr>");
$("#userTbody").append(
"<tr><td>"
+ (dbUserVO == null ? "" : "<img src='"
+ dbUserVO.headpic
+ "' height='150' width='150' />")
+ "</td><td>Headpic</td><td>"
+ (rUserVO == null ? "" : "<img src='"
+ rUserVO.headpic
+ "' height='150' width='150' />")
+ "</td></tr>");
// 比不同
$("#userTbody").find('tr').each(function() {
// console.log($(this));
var $td = $(this).children('td');
var textA = $td.eq(0).text();
var textB = $td.eq(2).text();
if (textA != textB) {
$(this).addClass('danger')
}
});
} else {
showModal(result.msg);
// alert("server:" + result.msg);
}
},
error : function() {
showModal("ajax错误!");
}
});
}
/**
* @author 张颖辉 同步数据到缓存(数据库缺少User,则会删除对应缓存)
* @return
*/
var copyDBUser2Cache = function() {
if (searchUserId == "" || searchUserId == null) {
showModal("没有可同步的数据");
// alert("没有可同步的数据");
} else {
var url = "/LoginMS/copyDBUser2Cache";
$.ajax( {
url : url,
type : 'post',
async : false,
data : {
"userId" : searchUserId
},
success : function(json) {
var result = eval("(" + json + ")");
if (result.success == true) {
ajax4Select(userKey, selectType);
} else {
showModal(result.msg);
// alert("server:" + result.msg);
}
},
error : function() {
showModal("ajax错误!");
// alert("ajax错误!");
}
});
}
}
var repairHeadpic2Default = function() {
var url = "/LoginMS/repairHeadpic2Default";
var maxImgNo = 21;
var random = parseInt(maxImgNo * Math.random());
if (random == 0) {
random = 1;
}
$.ajax( {
url : url,
type : 'post',
async : false,
data : {
"userId" : searchUserId,
"headpic" : random
},
success : function(json) {
var result = eval("(" + json + ")");
if (result.success == true) {
ajax4Select(userKey, selectType);
} else {
showModal(result.msg);
// alert("server:" + result.msg);
}
},
error : function() {
showModal("ajax错误!");
// alert("ajax错误!");
}
});
}
/**
* @author 张颖辉 显示模态框
* @param text
* @return
*/
var showModal = function(text) {
$("#modalText").html(text);
$("#myModal").modal();
}
页面效果: