原文位址: http://www.work100.net/training/monolithic-project-iot-cloud-admin-manager-edit.html 更多教程: 光束雲 - 免費課程
編輯賬戶
請參照如上
章節導航
進行閱讀
1.概述
本節實作
編輯賬戶
功能,實作邏輯和
新增賬戶
功能類似,畫面效果如下:
2.後端代碼實作
AuthManagerMapper.xml 修改
修改
update
語句,将查詢條件改為
userKey
,代碼如下:
<update id="update">
UPDATE
auth_manager
SET
status = #{status},
superuser = #{superuser},
roles = #{roles},
updated = #{updated}
WHERE
user_key = #{userKey}
</update>
同時增加一個
getByUserKey
語句,代碼如下:
<select id="getByUserKey" resultType="AuthManager">
SELECT
<include refid="authManagerColumns" />
FROM
auth_manager AS a
WHERE
a.user_key = #{userKey}
</select>
AuthManagerDao 接口修改
增加
getByUserKey
方法,代碼如下:
/**
* 擷取賬戶對象
*
* @param userKey 使用者Key
* @return
*/
AuthManager getByUserKey(String userKey);
AuthManagerService 接口修改
/**
* 更新
*
* @param authManager
* @return
*/
BaseResult update(AuthManager authManager);
AuthManagerServiceImpl 實作修改
@Override
public BaseResult update(AuthManager authManager) {
if (authManagerDao.getByUserKey(authManager.getUserKey()) == null) {
return BaseResult.fail("使用者不存在");
}
try {
authManager.setUpdated(new Date());
authManagerDao.update(authManager);
return BaseResult.success("賬戶更新成功");
} catch (Exception ex) {
return BaseResult.fail("未知錯誤");
}
}
ManagerController 修改
GET 方法
@RequestMapping(value = "edit/{userKey}", method = RequestMethod.GET)
public String edit(@PathVariable String userKey, Model model, RedirectAttributes redirectAttributes) {
if (StringUtils.isBlank(userKey)) {
redirectAttributes.addFlashAttribute("baseResult", BaseResult.fail("參數為空"));
return "redirect:/auth/manager/list";
}
AuthManager authManager = authManagerService.getByUserKey(userKey);
if (authManager == null) {
redirectAttributes.addFlashAttribute("baseResult", BaseResult.fail("資料不存在"));
return "redirect:/auth/manager/list";
}
model.addAttribute("authManager", authManager);
return "auth/manager_edit";
}
POST 方法
@RequestMapping(value = "edit/{userKey}", method = RequestMethod.POST)
public String edit(@PathVariable String userKey, AuthManager authManager, Model model, RedirectAttributes redirectAttributes) {
// 資料驗證
if (StringUtils.isBlank(userKey)) {
redirectAttributes.addFlashAttribute("baseResult", BaseResult.fail("參數為空"));
return "redirect:/auth/manager/list";
}
if (!userKey.equals(authManager.getUserKey())) {
redirectAttributes.addFlashAttribute("baseResult", BaseResult.fail("非法請求"));
return "redirect:/auth/manager/list";
}
if (StringUtils.isBlank(authManager.getRoles())) {
model.addAttribute("baseResult", BaseResult.fail("角色不能空"));
model.addAttribute("authManager", authManager);
return "auth/manager_edit";
}
// 新增處理
BaseResult baseResult = authManagerService.update(authManager);
if (baseResult.getStatus() == HttpUtils.HTTP_STATUS_CODE_OK) {
redirectAttributes.addFlashAttribute("baseResult", baseResult);
return "redirect:/auth/manager/list";
} else {
model.addAttribute("baseResult", baseResult);
return "auth/manager_edit";
}
}
3.前端頁面實作
視圖檔案 manager_edit.jsp
在
views/auth/
目錄下增加一個
manager_edit.jsp
視圖檔案,代碼如下:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<head>
<title>編輯賬戶 - 背景賬戶 | IoT-Admin</title>
<jsp:include page="../includes/resources_head.jsp" />
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
<jsp:include page="../includes/layout_header.jsp" />
<jsp:include page="../includes/layout_left.jsp" />
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">編輯賬戶</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="#">背景賬戶</a></li>
<li class="breadcrumb-item active">編輯賬戶</li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="card card-gray">
<!-- form start -->
<form:form action="/auth/manager/edit/${authManager.userKey}" id="form" method="post" modelAttribute="authManager">
<form:hidden path="userKey" />
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="userName">使用者名</label>
<form:input path="userName" cssClass="form-control" disabled="true" />
</div>
<div class="form-group">
<label for="status">狀态</label>
<form:select path="status" cssClass="form-control select2" style="width: 100%;">
<option value="0" ${authManager.status==0?"selected":""}>未激活</option>
<option value="1" ${authManager.status==1?"selected":""}>激活</option>
<option value="2" ${authManager.status==2?"selected":""}>鎖定</option>
<option value="3" ${authManager.status==3?"selected":""}>删除</option>
</form:select>
</div>
<div class="form-group">
<label for="created">建立時間</label>
<form:input path="created" cssClass="form-control" disabled="true" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="roles">角色</label>
<form:select path="roles" cssClass="select2" multiple="multiple" data-placeholder="請選擇角色" style="width: 100%;">
<option value="admin" ${authManager.roles.contains("admin")?"selected":""}>admin</option>
<option value="editor" ${authManager.roles.contains("editor")?"selected":""}>editor</option>
</form:select>
</div>
<div class="form-group">
<label for="superuser">是否超級使用者</label>
<form:select path="superuser" cssClass="form-control select2" style="width: 100%;">
<option value="0" ${!authManager.superuser?"selected":""}>否</option>
<option value="1" ${authManager.superuser?"selected":""}>是</option>
</form:select>
</div>
<div class="form-group">
<label for="created">更新時間</label>
<form:input path="updated" cssClass="form-control" disabled="true" />
</div>
</div>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-primary">儲存</button>
<a href="/auth/manager/list" type="button" class="btn btn-default">傳回清單</a>
</div>
</form:form>
</div>
<!-- /.card -->
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<jsp:include page="../includes/layout_footer.jsp" />
</div>
<!-- ./wrapper -->
<jsp:include page="../includes/resources_body.jsp" />
<script>
$(function() {
//Initialize Select2 Elements
$('.select2').select2();
//Initialize Select2 Elements
$('.select2bs4').select2({
theme: 'bootstrap4'
});
if (${baseResult.status != null && baseResult.status != 200}) {
const Toast = Swal.mixin({
toast: true,
position: 'top',
showConfirmButton: false,
timer: 2000,
timerProgressBar: true,
onOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
})
Toast.fire({
type: 'error',
title: '${baseResult.message}'
})
}
$("#form").validate({
rules: {
userName: {
required: true,
minlength: 4,
maxlength: 20
},
password: {
required: true,
minlength: 6,
maxlength: 20
},
roles: {
required: true,
minlength: 1,
maxlength: 3
}
},
messages: {
userName: {
required: " 請輸入使用者名",
minlength: " 使用者名不能小于4位",
maxlength: " 使用者名不能大于于20位"
},
password: {
required: " 請輸入密碼",
minlength: " 密碼不能小于6位",
maxlength: " 密碼不能大于于20位"
},
roles: {
required: " 請選擇角色",
minlength: " 至少選擇1個角色",
maxlength: " 至多選擇3個角色"
}
},
errorElement: 'span',
errorPlacement: function(error, element) {
error.addClass('invalid-feedback');
element.closest('.form-group').children('label').append(error);
},
highlight: function(element, errorClass, validClass) {
$(element).addClass('is-invalid');
},
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass('is-invalid');
}
});
})
</script>
</body>
</html>
4.測試驗證
重新開機
Tomcat
測試
編輯賬戶
功能。
5.執行個體源碼
執行個體源碼已經托管到如下位址:
- https://github.com/work100-net/training-stage2/tree/master/iot-cloud3
- https://gitee.com/work100-net/training-stage2/tree/master/iot-cloud3
上一篇:
新增賬戶下一篇:
删除賬戶如果對課程内容感興趣,可以掃碼關注我們的或
公衆号
,及時關注我們的課程更新
QQ群