蓝缘基础框架项目-账号新增编辑

今天介绍下框架的账号新增与编辑，页面效果如下：

前端页面代码：

 $("#add").click("click", function() {//绑定新增按扭
      dialog = parent.$.ligerDialog.open({
        width : 300,
        height : 310,
        url : rootPath + '/background/account/addUI.html',
        title : "增加账号",
        isHidden:false   //关闭对话框时是否只是隐藏，还是销毁对话框
      });
    });

逻辑说明：

1、首先点击新增按钮，触发弹出新增账号页面对话框。

新增页面代码：

 <form name="form" id="form" action="${ctx}/background/account/add.html" method="post">
    <table style="width: 285px; height: 200px;">
      <tbody>
        <tr>
          <td class="l_right">账号名：</td>
          <td class="l_left">
          <div class="lanyuan_input">
          <input id='accountName' name="accountName" class="isNum" type="text" value="">
            </div></td>
        </tr>
        <tr>
          <td class="l_right">账号密码：</td>
          <td class="l_left">
          <div class="lanyuan_input">
          <input id='password'
            name="password" type="password" class="checkpass" value="">
            </div>
            </td>
        </tr>
        <tr>
          <td class="l_right">账号说明：</td>
          <td class="l_left">
          <div class="lanyuan_input">
          <input id='description'
            name="description" class="checkdesc" type="text" value="">
            </div>
            </td>
        </tr>
        <tr>
          <td class="l_right">账号状态：</td>
          <td class="l_left">
          <input id='state' name="state" value="1" type="radio" checked="checked"> 启用　　
          <input id='state' name="state" value="0" type="radio"> 停用
            </td>
        </tr>
        <tr>
          <td colspan="2">
            <div class="l_btn_centent"> 
                <a class="btn btn-primary" href="javascript:void(0)"
                  id="saveWin_form" οnclick="saveWin();"><span>保存</span> </a> <a
                  class="btn btn-primary" href="javascript:void(0)" id="closeWin"
                  οnclick="closeWin()"><span>关闭</span> </a>
              </div>
            </td>
        </tr>
      </tbody>
    </table>
  </form>

说明如下：

1、定义form表单，定义账号输入参数。
2、点击关闭按钮，调用closeWin方法，触发窗口的关闭。
3、保存按钮触发saveWin 方法，触发账号的新增保存方法，提交前且触发表单的验证，若验证通过才会调用后端方法。
4、对于账号名还做了是否存在的校验，保证数据库账号不重名。

表单验证如下：

 $("form").validate({
      submitHandler : function(form) {//必须写在验证前面，否则无法ajax提交
        $(form).ajaxSubmit({//验证新增是否成功
          type : "post",
          dataType:"json",
          success : function(data) {
            if (data.flag == "true") {
              $.ligerDialog.success('提交成功!', '提示', function() {
                //这个是调用同一个页面趾两个iframe里的js方法
                //account是iframe的id
                parent.account.loadGird();
                closeWin();
              });
              //parent.window.document.getElementById("username").focus();
            } else {
              $.ligerDialog.warn("提交失败！！");
            }
          }
        });
      },
      rules : {
        accountName : {
        required : true,
        remote:{ //异步验证是否存在
          type:"POST",
          url: rootPath + '/background/account/isExist.html',
          data:{
            name:function(){return $("#accountName").val();}
           }
          }
        },
        state : {
          required : true
        }
      },
      messages : {
        accountName : {
          required : "请输入账号",
            remote:"该账号已经存在"
        },
        state : {
          required : "选择状态"
        }
      },
      errorPlacement : function(error, element) {//自定义提示错误位置
        $(".l_err").css('display','block');
        //element.css('border','3px solid #FFCCCC');
        $(".l_err").html(error.html());
      },
      success: function(label) {//验证通过后
        $(".l_err").css('display','none');
      }
    });

jQuery.validator.addMethod("checkpass", function(value, element) {
   return this.optional(element) || ((value.length <= 16) && (value.length>=6));
}, "密码由6至16位字符组合构成");
    

后端处理代码如下：

 /**
   * 新增账号
   */
  @RequestMapping("add")
  @ResponseBody
  public Map<String, Object> add(Account account) {
    Map<String, Object> map = new HashMap<String, Object>();
    try {
      account.setPassword(Md5Tool.getMd5(account.getPassword()));
      accountService.add(account);
      map.put("flag", true);
    } catch (Exception e) {
      map.put("flag", false);
    }
    return map;
  }

说明：

1、对密码进行md5加密保存。
2、创建时间采用数据库脚本自动填充的方式实现：赋值当前时间戳默认值填充方式。
3、删除状态同理也是采用这种方式。默认是0：正常状态。

mapper写法如下：

 <!-- 增加用户 -->
  <insert id="add" parameterType="com.lanyuan.entity.Account">
    INSERT INTO sys_account (
    accountName,
    password,
    description,
    state )
    VALUES (#{accountName},
    #{password}, #{description},
    #{state})
  </insert>

账号的编辑逻辑页面如下：

 $("#editView").click("click", function() {//绑定编辑按扭
      var cbox=grid.getSelectedCheckbox();
      if (cbox.length != 1) {
        parent.$.ligerDialog.alert("只能选中一个");
        return;
      }
      dialog = parent.$.ligerDialog.open({
        width : 300,
        height : 310,
        url : rootPath + '/background/account/editUI.html?accountId='+cbox,
        title : "修改账号",
        isHidden : false
      });
    });

说明：

1、编辑按钮绑定点击事件。
2、对于编辑只能选择一条，若否则提示错误。
3、选择一条记录后，打开编辑对话框。
4、在弹出对话框之前，需要上传accountId， 通过id查询账号信息，在编辑页面回显之前的数据。

$(function() {
   $("input:radio[value='${account.state}']").attr('checked','true');
});

<form name="form" id="form" action="${ctx}/background/account/update.html" method="post">
    <table style="width: 285px; height: 200px;">
      <tbody>
        <tr>
          <td class="l_right">账号名：</td>
          <td class="l_left">
          <input id='id' name="id" type="hidden" value="${account.id}">
          ${account.accountName}</td>
        </tr>
        <tr>
          <td class="l_right">账号密码：</td>
          <td class="l_left">
          <div class="lanyuan_input">
          <input id='password'
            name="password" type="password" class="checkpass">
            </div>
            </td>
        </tr>
        <tr>
          <td class="l_right">说明：</td>
          <td class="l_left">
          <div class="lanyuan_input">
          <input id='description'
            name="description" type="text" class="checkdesc" value="${account.description}">
            </div>
            </td>
        </tr>
        <tr>
          <td class="l_right">账号状态：</td>
          <td class="l_left">
          <input id='state' name="state" value="1" type="radio"> 启用　　
          <input id='state' name="state" value="0" type="radio"> 停用
            </td>
        </tr>
        <tr>
          <td colspan="2">
            <div class="l_btn_centent">
                <!-- saveWin_form   from是表单Ｉd-->
                <a class="btn btn-primary" href="javascript:void(0)"
                  id="saveWin_form" onclick="saveWin();"><span>保存</span> </a> <a
                  class="btn btn-primary" href="javascript:void(0)" id="closeWin"
                  onclick="closeWin()"><span>关闭</span> </a>
              </div>
          </td>
        </tr>
      </tbody>
    </table>
  </form>

说明：

1、这里的密码不回显，其他属性在编辑状态下，回显之前的数据。
2、关闭按钮的逻辑与新增一样。保存也差不多，这里的保存调用后端的是更新的逻辑。
3、后端更新时对密码需要重新md5加密保存到数据库。
4、账号状态的回显采用的是初始化js的方式处理。

/**
   * 更新账号
   */
  @ResponseBody
  @RequestMapping("update")
  public Map<String, Object> update(Model model, Account account) {
    Map<String, Object> map = new HashMap<String, Object>();
    try { 
      account.setPassword(Md5Tool.getMd5(account.getPassword()));
      accountService.update(account);
      map.put("flag", true);
    } catch (Exception e) {
      map.put("flag", false);
    }
    return map;
  }

 <update id="update" parameterType="com.lanyuan.entity.Account">
    UPDATE sys_account
    <set>
      <if test="accountName != null and accountName != ''">
        accountName=#{accountName},
      </if>
      <if test="password != null and password != ''">
        password=#{password},
      </if>
      <if test="description != null and description != ''">
        description=#{description},
      </if>
      <if test="state != null and state != ''">
        state=#{state},
      </if>
      <if test="createTime != null and createTime != ''">
        createTime=#{createTime}
      </if>
    </set>
    WHERE id=#{id}
  </update>

软件定制及其他业务
请加微信号：13128600812

公众号: