BootSrtrap的简单示例

最新推荐文章于 2021-05-29 14:23:53 发布

weixin_34174422

最新推荐文章于 2021-05-29 14:23:53 发布

阅读量563

点赞数

文章标签：数据库 javascript json ViewUI

原文链接：https://my.oschina.net/iyinghui/blog/916814

版权

2019独角兽企业重金招聘Python工程师标准>>>

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">
        &times;
</a>
<strong>提示！</strong>数据库缓存不同的数据背景色不同。
</div>
	<hr>
<!-- 按钮 -->
&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-default btn-lg" onclick="copyDBUser2Cache()">同步数据到缓存</button>
&nbsp;&nbsp;&nbsp;&nbsp;
<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">
					&times;
				</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();
}

页面效果：