上一遍文章已经将近页面加载后,如果通过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")@ResponseBodypublic 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低代码开发平台
请关注我,本星球会持续推出更多的开源项目代码解析,如有更好的意见请留言回复或者私信。
来源：
互联网
本文观点不代表源码解析立场，不承担法律责任，文章及观点也不构成任何投资意见。
评论列表