加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
index.html 9.21 KB
一键复制 编辑 原始数据 按行查看 历史
jervis_chen 提交于 2018-08-13 21:34 . 更新 index.html
<!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">&#xe669;</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">&#xe654;</i>
</button>
<button id="gen-param-btn" type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon">&#xe9aa;</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">&#xe640;</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>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化