若依非分離版-第五十六章：添加使用者功能前後端源碼拆解

上一遍文章已經将近頁面加載後，如果通過ajax調用後端的api接口，在bootstrap的table擷取資料并加載。本章節講解如何跳轉到新增頁面，填寫好資料後送出

操作界面

1、點選左側菜單欄，點選使用者管理

2、點選右側工作區的新增按鈕，進入新增編輯的界面。界面包含表單輸入框和送出按鈕。完成表單填寫後，點選送出操作。

使用者清單新增按鈕的代碼解析

代碼路徑如下

<a class="btn btn-success" onclick="$.operate.addTab()" shiro:hasPermission="system:user:add">
       <i class="fa fa-plus"></i> 新增
   </a>           

$.operate是引入了ry-ui.js檔案裡面的函數。ry-ui.js的檔案路徑如下截圖

其中可以在ry-ui.js檔案裡面找到addTab()的函數

// 添加資訊，以tab頁展現
addTab: function (id) {
    table.set();
    $.modal.openTab("添加" + table.options.modalName, $.operate.addUrl(id));
},           

上述邏輯：如上圖紅色框，在新的tab打開頁面

新增界面代碼解析

1、新增頁面路徑如下截圖：

如下圖：編輯頁面是有表單組成。例如使用者名稱對應的代碼

标題：

<label class="col-sm-4 control-label is-required">使用者名稱：</label>           

輸入框：

<div class="col-sm-8">
    <input name="userName" placeholder="請輸入使用者名稱" class="form-control" type="text" maxlength="30" required>
</div>           

其中标題和輸入框使用栅格化布局，标題占col-sm-4 4格，輸入框占col-sm-8" 8格。

2、送出按鈕實作

實作代碼：

<div class="col-sm-offset-5 col-sm-10">
    <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button> 
    <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>關 閉 </button>
</div>           

送出按鈕綁定submitHandler事件函數，函數具體代碼如下：

function submitHandler() {
       var chrtype = [[${#strings.defaultString(@config.getKey('sys.account.chrtype'), 0)}]];
var password = $("#password").val();
      if ($.validate.form() && checkpwd(chrtype, password)) {
       var data = $("#form-user-add").serializeArray();
       var status = $("input[id='status']").is(':checked') == true ? 0 : 1;
       var roleIds = $.form.selectCheckeds("role");
       var postIds = $.form.selectSelects("post");
       data.push({"name": "status", "value": status});
       data.push({"name": "roleIds", "value": roleIds});
       data.push({"name": "postIds", "value": postIds});
       $.operate.saveTab(prefix + "/add", data);
      }
  }           

如上述第5行，通過$("#form-user-add") 表單，将表單資料轉換成為數組，并指派給data

如上述第6，7，8，因為狀态是開關元件，角色和崗位是下拉框，是以先讀取值，并指派給自定義的變量。再通過data.push的操作插入數組

如上述12行，是将資料送出到接口背景，背景添加資料庫。

// 儲存頁籤資訊
saveTab: function(url, data, callback) {
    var config = {
        url: url,
        type: "post",
        dataType: "json",
        data: data,
        beforeSend: function () {
            $.modal.loading("正在進行中，請稍候...");
        },
        success: function(result) {
            if (typeof callback == "function") {
                callback(result);
            }
            $.operate.successTabCallback(result);
        }
    };
    $.ajax(config)
},           

如上述代碼，前端儲存到操作，其實就是對ajax進行操作。

背景代碼

/**
 * 新增儲存使用者
 */
@RequiresPermissions("system:user:add")
@Log(title = "使用者管理", businessType = BusinessType.INSERT)
@PostMapping("/add")
@ResponseBody
public AjaxResult addSave(@Validated SysUser user)
{
    if (!userService.checkLoginNameUnique(user))
    {
        return error("新增使用者'" + user.getLoginName() + "'失敗，登入賬号已存在");
    }
    else if (StringUtils.isNotEmpty(user.getPhonenumber()) && !userService.checkPhoneUnique(user))
    {
        return error("新增使用者'" + user.getLoginName() + "'失敗，手機号碼已存在");
    }
    else if (StringUtils.isNotEmpty(user.getEmail()) && !userService.checkEmailUnique(user))
    {
        return error("新增使用者'" + user.getLoginName() + "'失敗，郵箱賬号已存在");
    }
    user.setSalt(ShiroUtils.randomSalt());
    user.setPassword(passwordService.encryptPassword(user.getLoginName(), user.getPassword(), user.getSalt()));
    user.setCreateBy(getLoginName());
    return toAjax(userService.insertUser(user));
}           

業務邏輯說明：

1、判斷登入使用者是否已經存在。

2、判斷手機号碼是否已經存在。

3、判斷郵箱是否已經存在。

4、設定随機數，對密碼進行加密。

5、設定建立人。

6、插入資料庫。

7、傳回處理結果給前端。

未來計劃

1、ruoyi非分離版本拆解

2、ruoyi-vue-pro：講解工作流

3、ruoyi-vue-pro：支付子產品，電商子產品

4、基于ruoyi-vue-pro項目開發

5、JEECG低代碼開發平台

請關注我，本星球會持續推出更多的開源項目代碼解析，如有更好的意見請留言回複或者私信。