• B/S系统操作日志设计思路


      最近做的系统需要实现操作日志的功能,主要记录用户的 增,删,改的操作。自己想的方法笨点儿但能满足需求,待日后有更好的解决方法了再来优化了,不多说先上效果图。

    一,效果图

    1, 日志列表

       

    2, 日志详细

      

    二,设计思路

    1, 页面加载完成后,利用JS 记录需要记录的值到 对应的隐藏域中。

    2, 页面提交时利用JS    对表单内容进行比较,记录改动过的项目,并保存到隐藏域中,供后台调用。

    3, 用存储过程对隐藏域中的值进行解析并保存到数据库中

    三,实现步骤

    1,   页面的上 控件的命名要有规则这样 做是为了方便JS遍历页面上的控件

       

    2,JS代码

    记录和比较表单的JS
    ///页面加载完后,遍历页面上需要记录的项目,赋值给相应的隐藏域
    $(document).ready(function () {
        //找到页面中的文本框 并把文本框中的值 赋值给 相应的 隐藏域
        var inpus = $("input[type='text']");
        for (var i = 0; i < inpus.length; i++) {
            if ($("#HF" + inpus[i].id).length > 0) {
                $("#HF" + inpus[i].id).val(inpus[i].value);
            }
        }
    });
    
    //表单提交时 比较表单提交前后 值的变化,并记录下有改动的项目 存入 隐藏域中供后台调用
    //隐藏域中保存的信息格式 为: 被改字段含义,原值,新值 每条记录以 $分隔
    function MyFormSubmit(btnID) {
        //比较文本框
        var changeInputs = "";
        var newInputs = $("input[type='text']");
        for (var i = 0; i < newInputs.length; i++) {
            if ($("#HF" + newInputs[i].id).length > 0) { 
                if ($.trim(newInputs[i].value) != $.trim($("#HF" + newInputs[i].id).val())) {
                    changeInputs += $("#lb" + newInputs[i].id).text() + "," + $("#HF" + newInputs[i].id).val() + "," + $.trim(newInputs[i].value) + "$";
                }
            }
        }
    //将改动过的表单内容记录到隐藏域中
    $("#HFChangeContents").val(changeInputs);
    
        //检测表单内容是否改动过 
        if ($("#HFChangeContents").val() == "") {
            alert('无改动!');
        }
        else { 
          //提交表单
            document.getElementById(btnID).click();
        }
    });

    到这里已经得到了需要记录的表单改动项目,剩下数据处理就简单了。
    本文只提供个人的拙见,如有更好的实现方式,请不吝赐教。如需源码请 戳 http://download.csdn.net/detail/sidabbs/4347781

  • 相关阅读:
    Pytest中参数化之Excel文件实战
    PyCharm 专业版 2018激活(pycharm-professional-2018.2.4.exe)
    python语言编写一个接口测试的例子,涉及切割获取数据,读取表格数据,将结果写入表格中
    webdriver之UI界面下拉框的选择
    git的安装与详细应用
    安装jenkins
    python对数据库mysql的操作(增删改查)
    批量执行测试用例
    面向对象中多态的讲解+工厂设计模式的应用与讲解
    面向对象
  • 原文地址:https://www.cnblogs.com/justconnor/p/2531074.html
Copyright © 2020-2023  润新知