学习知识分享-个人学习生活分享 - 服务控制
关于服务启动按钮页面的优化 原则 同一个服务器只允许启动一个按钮,也就是只能触发一个启动/关闭/重启的功能。不同的服务器是可以同时异步触发的。 启动或关闭是异步进行的。 启动或关闭的时候，同一个服务器的上按钮变灰色，并且不能点击。 问题 由于妹子ui的模态框在数据传输存在bug,详情撮: https://amazeui.org/javascript/modal 所以在多个异步并发执行的时候出现各种Bug. $(function() { $('#doc-modal-list').find('.am-icon-close').add('#doc-confirm-toggle'). on('click', function() { $('#my-confirm').modal({ relatedTarget: this, onConfirm: function(options) { var $link = $(this.relatedTarget).prev('a'); var msg = $link.length ? '你要删除的链接 ID 为 ' + $link.data('id') : '确定了，但不知道要整哪样'; alert(msg); }, // closeOnConfirm: false, onCancel: function() { alert('算求，不弄了'); } }); }); }); 通过 relatedTarget 这个钩子获取数据，如上面的演示，以该元素为桥梁获取想要的数据（2.1 开始支持）； 最初代码的引用 $('#my-confirm').modal({ relatedTarget: this, onConfirm: function(options) { if (start_store != undefined) { $("#msgtips").html('[服务器名称:' + start_store.alias + '] 正在启动,请等待启动完成或使用批量启动.'); $('#my-alert').modal('open'); return; }else{ store.set('start_store', { code: '1', alias: dename }) }; my_this = this.relatedTarget; $.ajax({ type: "POST", async:true, url: "/api/service", cache: false, data: data, dataType: "json", success: function(res){ var alias = res.data.data[0].alias; var code = res.data.data[0].code; var reskey = res.data.data[0].key; var msg = res.data.data[0].msg; var resnetwork_ip = res.data.data[0].network_ip; console.log(res); if ( code == 1 ) { $("#msgtips").html('[服务器名称:'+alias+'启动成功!'); $('#my-alert').modal('open'); closeloading(my_this); }else{ $("#msgtips").html('[服务器名称:'+alias+']启动失败,'+msg+'!'); $('#my-alert').modal('open'); closeloading(my_this); } store.remove('start_store'); closeloading(my_this); }, error:function(){ $("#msgtips").html('[服务器名称:'+$(my_this).attr("dename")+'] 请求失败,请联系管理员!'); $('#my-alert').modal('open'); closeloading(my_this); store.remove('start_store'); } }); }, onCancel: function() { my_this = this.relatedTarget; closeloading(my_this); // var store = $.AMUI.store; store.remove('start_store'); } }); 改进后代码的引用 $('#my-confirm').modal({ relatedTarget: this, onConfirm: function(options) { var my_this ; my_this = this.relatedTarget; if (start_store != undefined) { $("#msgtips").html('[服务器名称:' + start_store.alias + '] 正在启动,请等待启动完成或使用批量启动.'); $('#my-alert').modal('open'); closeloading(my_this); return; }else{ store.set('run_service_allow_one', { code: '1', alias: dename }) }; data = store.get('data'); $.ajax({ type: "POST", async:true, url: "/api/service", cache: false, data: data, dataType: "json", success: function(res){ console.log('get res result:'); console.log(res); // var code = res.data.data[0].code; console.log(code); if (code == 10020) { $("#msgtips").html('[服务器名称:'+res.get_status.data.data[0].related_servername+']'+res.msg + ' 最后时间: '+ res.get_status.data.data[0].updated_time + ' 动作: '+ res.get_status.data.data[0].action + ' 操作人: '+ res.get_status.data.data[0].operation ); $('#my-alert').modal('open'); closeloading(my_this); } else if (code == 10041){ $("#msgtips").html('[服务器名称:'+res.get_status.data.data[0].related_servername+']'+res.msg + ' 最后时间: '+ res.get_status.data.data[0].updated_time + ' 动作: '+ res.get_status.data.data[0].action + ' 操作人: '+ res.get_status.data.data[0].operation ); $('#my-alert').modal('open'); closeloading(my_this); }else if (code == 10042){ $("#msgtips").html('[服务器名称:'+res.get_status.data.data[0].related_servername+']'+res.msg + ' 最后时间: '+ res.get_status.data.data[0].updated_time + ' 动作: '+ res.get_status.data.data[0].action + ' 操作人: '+ res.get_status.data.data[0].operation ); $('#my-alert').modal('open'); closeloading(my_this); }else if (code == 1 ){ var alias = res.data.data[0].alias; var reskey = res.data.data[0].key; var msg = res.data.data[0].msg; var resnetwork_ip = res.data.data[0].network_ip; $("#msgtips").html('[服务器名称:'+alias+'启动成功!'); $('#my-alert').modal('open'); closeloading(my_this); }else{ var alias = res.data.data[0].alias; var reskey = res.data.data[0].key; var msg = res.data.data[0].msg; var resnetwork_ip = res.data.data[0].network_ip; console.log(my_this); $("#msgtips").html('[服务器名称:'+alias+']启动失败,'+msg+'!'); $('#my-alert').modal('open'); closeloading(my_this); } store.remove('run_service_allow_one'); closeloading(my_this); }, error:function(){ $("#msgtips").html('[服务器名称:'+$(my_this).attr("dename")+'] 请求失败,请联系管理员!'); $('#my-alert').modal('open'); closeloading(my_this); store.remove('run_service_allow_one'); } }); }, onCancel: function() { var my_this ; my_this = this.relatedTarget; closeloading(my_this); // var store = $.AMUI.store; store.remove('run_service_allow_one'); } }); 我这边的主要的问题现象: 同一个页面点击启动，再次点击启动或关闭，还是上一次的post传参。 正在启动中或者关闭中的那个提示在点击多次时后面不能正常返回。比如我同时点击了启动和关闭，然后页面显示启动中和关闭中，然后返回数据后，启动中按钮变回启动，但是关闭中一直没返回。 解决 针对以上的问题后面的代码已经解决，主要是妹子ui模态框传参的Bug问题，调用多次模态框模块框只会保存第一次运行时的数据。 第1个问题: 通过store存储传参，每点击一次覆盖前一次的参数。(可能存在的问题: 如果启用无缝浏览则无法传data参数，如果点击过快参数赋值就会错乱，但是这种情况应该很少，参数赋值那块也就微妙级别，人的手工基本不会达到那种地步) 还有种方法就是通过relatedTarget钩子重新获取数据。推荐这个方法。 第2个问题: 其实使用了relatedTarget钩子，但变量初始化的时候存在问题，之前没有var 定义局部变量，导致后面点击有可能获取全局变量的数据，导致my_this对象串了。重新初始化变量就OK了。 上图: 文章作者 明哥 文章地址 https://www.pvcreate.com/index.php/archives/98/ 创建时间 2017-06-18 关注订阅 微信订阅号 开源项目 https://gitee.com/lookingdreamer 工具市场 https://gitee.com/lookingdreamer/SPPPOTools