代码拉取完成,页面将自动刷新
同步操作将从 jervis_chen/gen_url_sign 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="plugins/layui/css/layui.css">
<style>
.input-lin{display:inline;width:auto;margin-right:10px;}
.input-row-line{margin-bottom:10px;}
</style>
</head>
<body>
<ul class="layui-nav" lay-filter="main">
<li class="layui-nav-item layui-this"><a href="javascript:;" data-id="1">签名生成</a></li>
<li class="layui-nav-item"><a href="javascript:;" data-id="2">地址列表</a></li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show" id="r1">
<div class="layui-row">
<div class="layui-col-md5">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">输入地址</label>
<div class="layui-input-block">
<input type="text" name="url" placeholder="请输入URL" autocomplete="off" class="layui-input" id="url_input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">待签名值</label>
<div class="layui-input-block">
<input type="text" name="sorted" readonly autocomplete="off" class="layui-input" id="sorted_param_input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">SEC_KEY</label>
<div class="layui-input-block">
<input type="text" name="key" autocomplete="off" class="layui-input" id="secret_key_input" value="">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">签名</label>
<div class="layui-input-block">
<input type="text" name="sign" readonly autocomplete="off" class="layui-input" id="sign_input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">完整链接</label>
<div class="layui-input-block">
<input type="text" name="fullUrl" readonly autocomplete="off" class="layui-input" id="full_url_input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">参数</label>
<div id="param-container">
<div class="layui-input-block input-row-line">
<label class="layui-inline">key:</label><input type="text" name="param" placeholder="param" autocomplete="off" class="layui-input input-lin" value="timestamp" readonly>
<label class="layui-inline">value:</label><input type="text" name="value" placeholder="value" autocomplete="off" class="layui-input input-lin" id="time_input" readonly>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary btn-time"><i class="layui-icon"></i></button>
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button id="add-param-btn" type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button id="gen-param-btn" type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
</div>
</div>
</form>
</div>
<div class="layui-col-md3"></div>
</div>
</div>
<div class="layui-tab-item" id="r2">....</div>
</div>
<script src="plugins/layui/layui.js"></script>
<script src="plugins/jquery/jquery.min.js"></script>
<script src="plugins/md5/MD5.js"></script>
<script>
function createHtm(param) {
var htm = '<div class="layui-input-block input-row-line">'+
'<label class="layui-inline">key:</label><input type="text" name="param" placeholder="param" autocomplete="off" class="layui-input input-lin" value="'+(param?param.name:'')+'"> '+
'<label class="layui-inline">value:</label><input type="text" name="value" placeholder="value" autocomplete="off" class="layui-input input-lin" value="'+(param?param.value:'')+'"> '+
'<button type="button" class="layui-btn layui-btn-sm layui-btn-primary btn-del"><i class="layui-icon"></i></button> '+
'</div>';
return htm;
}
function sortParamName(func) {
var params = {};
var sortedParam = {};
var keys = "";
$('.input-row-line').each(function (i) {
var key = $(this).find('input[name="param"]').val();
if(!key){
return false;
}
var val = $(this).find('input[name="value"]').val();
if(i==0){
keys += key;
}else{
keys += " "+key;
}
params[key] = val;
});
if(!keys){
return params;
}
// 参数名排序
var sortedParamName = Array.prototype.sort.call(keys.split(/\s+/gi),function(a,b){
return a.localeCompare(b);
});
// 重新组织参数
for(var i in sortedParamName){
var key = sortedParamName[i];
sortedParam[key] = params[key];
}
func(sortedParam);
}
// 生成签名
function genSign(sortedParam) {
var secretKey = $('#secret_key_input').val();
var paramStr = "";
for(var k in sortedParam){
paramStr += k+sortedParam[k];
}
paramStr = secretKey+paramStr+secretKey;
$('#sorted_param_input').val(paramStr);
var sign = md5(paramStr);
$('#sign_input').val(sign);
$('#full_url_input').val($.param(sortedParam)+"&sign="+sign);
}
function getParams(url) {
var theRequest = new Object();
if (!url)
return theRequest;
if (url.indexOf("?") !== -1)
{
var str = url.substr(url.indexOf("?") + 1) + "&";
var strs = str.split("&");
for (var i = 0; i < strs.length - 1; i++)
{
var key = strs[i].substring(0, strs[i].indexOf("="));
var val = strs[i].substring(strs[i].indexOf("=") + 1);
theRequest[key] = val;
}
}
return theRequest;
}
//主动加载jquery模块
layui.use([ 'element','form','layer'], function(){
var $ = layui.$,ele = layui.element,layer = layui.layer;
// 初始化时间戳
$('#time_input').val(new Date().getTime());
ele.on('nav(main)', function(elem){
var clickId = elem.data('id');
$('#r'+clickId).addClass('layui-show').siblings().removeClass('layui-show');
});
// 添加参数按钮
$('#add-param-btn').click(function () {
$('#param-container').append(createHtm());
});
// 生成签名按钮
$('#gen-param-btn').click(function () {
sortParamName(genSign);
});
// 获取地址栏参数并展示
$('#url_input').on('blur',function () {
var url = $(this).val();
var param = getParams(url);
var keys = [];
$('#param-container :text[name="param"]').each(function () {
keys.push($(this).val());
});
for(var k in param){
if($.inArray(k,keys)==-1){
$('#param-container').append(createHtm({name:k,value:param[k]}));
}
}
});
$('body').on('focus',':text',function () {
$(this).select();
if(document.execCommand('copy', false, null) && $(this).val()){
layer.msg('data copied',{time:1000,anim: 5});
}
});
// 删除参数
$('#param-container').on('click','.btn-del',function () {
$(this).closest('div').remove();
});
// 刷新时间戳
$('#param-container').on('click','.btn-time',function () {
$('#time_input').val(new Date().getTime());
});
$('#full_url_input,#url_input,#sign_input,#sorted_param_input').focus(function () {
$(this).select();
});
});
</script>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。