若依非分离版-第五十六章：添加用户功能前后端源码拆解

上一遍文章已经将近页面加载后，如果通过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低代码开发平台

请关注我，本星球会持续推出更多的开源项目代码解析，如有更好的意见请留言回复或者私信。