原文位址: http://www.work100.net/training/monolithic-project-iot-cloud-admin-manager-add.html 更多教程: 光束雲 - 免費課程
新增賬戶
請參照如上
章節導航
進行閱讀
1.概述
本節實作
新增賬戶
功能,頁面效果如下:
2.後端代碼實作
為了降低耦合度,建議大家将
新增
、
編輯
檢視
功能分開編碼,不要混在一個方法中。
我們現在示範的功能相對比較簡單,但真正開展業務時功能會變得很複雜,如果代碼混在一起,那麼代碼的複雜度也将成倍增長。
接下來,我們來逐漸重構
ManagerController
類。
GET 方法
@RequestMapping(value = "add", method = RequestMethod.GET)
public String add() {
return "auth/manager_add";
}
POST 方法
@RequestMapping(value = "add", method = RequestMethod.POST)
public String add(AuthManager authManager, Model model, RedirectAttributes redirectAttributes) {
// 表單驗證
if (StringUtils.isBlank(authManager.getUserName())) {
model.addAttribute("baseResult", BaseResult.fail("使用者名不能空"));
model.addAttribute("authManager", authManager);
return "auth/manager_add";
}
if (authManager.getUserName().length() < 4 || authManager.getUserName().length() > 20) {
model.addAttribute("baseResult", BaseResult.fail("使用者名不能小于4位且不能大于20位"));
model.addAttribute("authManager", authManager);
return "auth/manager_add";
}
if (StringUtils.isBlank(authManager.getPassword())) {
model.addAttribute("baseResult", BaseResult.fail("密碼不能空且不能少于"));
model.addAttribute("authManager", authManager);
return "auth/manager_add";
}
if (authManager.getPassword().length() < 6 || authManager.getUserName().length() > 20) {
model.addAttribute("baseResult", BaseResult.fail("密碼不能小于6個位且不能大于20位"));
model.addAttribute("authManager", authManager);
return "auth/manager_add";
}
if (StringUtils.isBlank(authManager.getRoles())) {
model.addAttribute("baseResult", BaseResult.fail("角色不能空"));
model.addAttribute("authManager", authManager);
return "auth/manager_add";
}
// 新增處理
BaseResult baseResult = authManagerService.insert(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_add";
}
}
說明:
- 後端一定要對前端送出資料進行合法性驗證,以便確定資料安全
- 方法中使用了
和BaseResult
兩個類,下面将分别進行介紹HttpUtils
BaseResult 類
為了将操作結果更友善的傳遞給前端頁面,我們引入一個通用的
BaseResult
類,代碼如下:
package net.work100.training.stage2.iot.cloud.commons.dto;
import net.work100.training.stage2.iot.cloud.commons.utils.HttpUtils;
import java.io.Serializable;
/**
* <p>Title: BaseResult</p>
* <p>Description: </p>
*
* @author liuxiaojun
* @date 2020-03-04 11:02
* ------------------- History -------------------
* <date> <author> <desc>
* 2020-03-04 liuxiaojun 初始建立
* -----------------------------------------------
*/
public class BaseResult implements Serializable {
private int status;
private String message;
public static BaseResult success() {
return createResult(HttpUtils.HTTP_STATUS_CODE_OK, "成功");
}
public static BaseResult success(String message) {
return createResult(HttpUtils.HTTP_STATUS_CODE_OK, message);
}
public static BaseResult fail() {
return createResult(HttpUtils.HTTP_STATUS_CODE_INTERNAL_SERVER_ERROR, "失敗");
}
public static BaseResult fail(String message) {
return createResult(HttpUtils.HTTP_STATUS_CODE_INTERNAL_SERVER_ERROR, message);
}
public static BaseResult fail(int status, String message) {
return createResult(status, message);
}
public int getStatus() {
return status;
}
public void setStatus(int status) {
this.status = status;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
private static BaseResult createResult(int status, String message) {
BaseResult baseResult = new BaseResult();
baseResult.setStatus(status);
baseResult.setMessage(message);
return baseResult;
}
}
類檔案位置在項目下的
iot-cloud-commons
類包下。
net.work100.training.stage2.iot.cloud.commons.dto
HttpUtils 類
為
BaseResult
的傳回狀态碼構造一個通用類
HttpUtils
,代碼如下:
package net.work100.training.stage2.iot.cloud.commons.utils;
/**
* <p>Title: Http狀态碼</p>
* <p>Description: </p>
* <p>Url: http://www.work100.net/training/monolithic-project-iot-cloud-admin.html</p>
*
* @author liuxiaojun
* @date 2019-07-14 20:51
* ------------------- History -------------------
* <date> <author> <desc>
* 2019-07-14 liuxiaojun 初始建立
* -----------------------------------------------
*/
public class HttpUtils {
public static final int HTTP_STATUS_CODE_CONTINUE = 100;
public static final int HTTP_STATUS_CODE_SWITCHING_PROTOCOLS = 101;
public static final int HTTP_STATUS_CODE_OK = 200;
public static final int HTTP_STATUS_CODE_CREATED = 201;
public static final int HTTP_STATUS_CODE_ACCEPTED = 202;
public static final int HTTP_STATUS_CODE_NON_AUTHORITATIVE_INFORMATION = 203;
public static final int HTTP_STATUS_CODE_NO_CONTENT = 204;
public static final int HTTP_STATUS_CODE_RESET_CONTENT = 205;
public static final int HTTP_STATUS_CODE_PARTIAL_CONTENT = 206;
public static final int HTTP_STATUS_CODE_MULTIPLE_CHOICES = 300;
public static final int HTTP_STATUS_CODE_MOVED_PERMANENTLY = 301;
public static final int HTTP_STATUS_CODE_MOVED_TEMPORARILY = 302;
public static final int HTTP_STATUS_CODE_FOUND = 302;
public static final int HTTP_STATUS_CODE_SEE_OTHER = 303;
public static final int HTTP_STATUS_CODE_NOT_MODIFIED = 304;
public static final int HTTP_STATUS_CODE_USE_PROXY = 305;
public static final int HTTP_STATUS_CODE_TEMPORARY_REDIRECT = 307;
public static final int HTTP_STATUS_CODE_BAD_REQUEST = 400;
public static final int HTTP_STATUS_CODE_UNAUTHORIZED = 401;
public static final int HTTP_STATUS_CODE_PAYMENT_REQUIRED = 402;
public static final int HTTP_STATUS_CODE_FORBIDDEN = 403;
public static final int HTTP_STATUS_CODE_NOT_FOUND = 404;
public static final int HTTP_STATUS_CODE_METHOD_NOT_ALLOWED = 405;
public static final int HTTP_STATUS_CODE_NOT_ACCEPTABLE = 406;
public static final int HTTP_STATUS_CODE_PROXY_AUTHENTICATION_REQUIRED = 407;
public static final int HTTP_STATUS_CODE_REQUEST_TIMEOUT = 408;
public static final int HTTP_STATUS_CODE_CONFLICT = 409;
public static final int HTTP_STATUS_CODE_GONE = 410;
public static final int HTTP_STATUS_CODE_LENGTH_REQUIRED = 411;
public static final int HTTP_STATUS_CODE_PRECONDITION_FAILED = 412;
public static final int HTTP_STATUS_CODE_REQUEST_ENTITY_TOO_LARGE = 413;
public static final int HTTP_STATUS_CODE_REQUEST_URI_TOO_LONG = 414;
public static final int HTTP_STATUS_CODE_UNSUPPORTED_MEDIA_TYPE = 415;
public static final int HTTP_STATUS_CODE_REQUESTED_RANGE_NOT_SATISFIABLE = 416;
public static final int HTTP_STATUS_CODE_EXPECTATION_FAILED = 417;
public static final int HTTP_STATUS_CODE_INTERNAL_SERVER_ERROR = 500;
public static final int HTTP_STATUS_CODE_NOT_IMPLEMENTED = 501;
public static final int HTTP_STATUS_CODE_BAD_GATEWAY = 502;
public static final int HTTP_STATUS_CODE_SERVICE_UNAVAILABLE = 503;
public static final int HTTP_STATUS_CODE_GATEWAY_TIMEOUT = 504;
public static final int HTTP_STATUS_CODE_HTTP_VERSION_NOT_SUPPORTED = 505;
}
iot-cloud-commons
net.work100.training.stage2.iot.cloud.commons.utils
AuthManagerService 服務接口
重構
AuthManagerService
服務接口的
insert
方法,代碼如下:
/**
* 新增
*
* @param authManager
* @return
*/
BaseResult insert(AuthManager authManager);
AuthManagerServiceImpl 服務實作
AuthManagerServiceImpl
服務實作的
insert
@Override
public BaseResult insert(AuthManager authManager) {
if (authManagerDao.getByUserName(authManager.getUserName()) != null) {
return BaseResult.fail("使用者名已經存在");
}
try {
// 生成 userKey
authManager.setUserKey(generateUserKey(authManager.getUserName()));
// 密碼加密
authManager.setPassword(EncryptionUtils.encryptPassword(EncryptionUtils.EncryptionType.MD5, authManager.getPassword()));
authManager.setCreated(new Date());
authManager.setUpdated(new Date());
authManagerDao.insert(authManager);
return BaseResult.success("新增賬戶成功");
} catch (Exception ex) {
return BaseResult.fail("未知錯誤");
}
}
新增
generateUserKey
方法,實作
userKey
的生成邏輯,代碼如下:
/**
* 生成 userKey
*
* @param userName 使用者名
* @return
*/
private String generateUserKey(String userName) {
String strDate = DateFormatUtils.format(new Date(), "yyyy-MM-dd HH:mm:ss");
String sourceUserKey = String.format("%s%s", userName.toLowerCase(), strDate);
return EncryptionUtils.encryptText(EncryptionUtils.EncryptionType.MD5, sourceUserKey);
}
3.前端頁面實作
視圖檔案 manager_add.jsp
在
views/auth/
目錄下增加一個
manager_add.jsp
視圖檔案,代碼如下:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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">
<!-- /.card-header -->
<!-- form start -->
<form action="/auth/manager/add" method="post">
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="userName">使用者名</label>
<input type="text" class="form-control" id="userName" name="userName" placeholder="請輸入使用者名" value="${authManager.userName}">
</div>
<div class="form-group">
<label for="password">密碼</label>
<input type="password" class="form-control" id="password" name="password" placeholder="請輸入密碼">
</div>
<div class="form-group">
<label for="status">狀态</label>
<select class="form-control select2" style="width: 100%;" id="status" name="status">
<option value="0" selected="selected">未激活</option>
<option value="1">激活</option>
<option value="2">鎖定</option>
<option value="3">删除</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="roles">角色</label>
<select class="select2" id="roles" name="roles" 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>
</select>
</div>
<div class="form-group">
<label for="superuser">是否超級使用者</label>
<select class="form-control select2" id="superuser" name="superuser" style="width: 100%;">
<option value="0" selected="selected">否</option>
<option value="1">是</option>
</select>
</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>
</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}'
})
}
})
</script>
</body>
</html>
依賴腳本及控件
檔案末尾我們增加了一段
JS
腳本:
如下代碼是為了讓
select
控件應用
Bootstrap4
樣式:
//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}'
})
}
頁面中用到的
select
控件和提示
消息
依賴了相關插件,其依賴插件的
CSS
及
JS
分别在
resources_head.js
resources_body.js
中引入:
resources_head.js
代碼如下:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
<!-- iCheck for checkboxes and radio inputs -->
<link rel="stylesheet" href="/static/assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Select2 -->
<link rel="stylesheet" href="/static/assets/plugins/select2/css/select2.min.css">
<link rel="stylesheet" href="/static/assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
<!-- SweetAlert2 -->
<link rel="stylesheet" href="/static/assets/plugins/sweetalert2/sweetalert2.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
<link rel="icon" href="/static/assets/img/favicon.ico">
resources_body.js
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<script src="/static/assets/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Select2 -->
<script src="/static/assets/plugins/select2/js/select2.full.min.js"></script>
<!-- SweetAlert2 -->
<script src="/static/assets/plugins/sweetalert2/sweetalert2.min.js"></script>
<!-- AdminLTE -->
<script src="/static/assets/js/adminlte.js"></script>
視圖檔案 manager_list.jsp
視圖檔案
manager_list.jsp
中在
body
末尾增加消息提示腳本:
<script>
$(function() {
if (${baseResult.status != null && baseResult.status == 200}) {
const Toast = Swal.mixin({
toast: true,
position: 'top',
showConfirmButton: false,
timer: 2000,
timerProgressBar: true
})
Toast.fire({
type: 'success',
title: '${baseResult.message}'
})
}
})
</script>
4.運作測試
重新開機
Tomcat
測試
新增賬戶
功能,如下為資料驗證失敗時的提示效果:
成功添加賬戶時,會轉向清單頁,并出現成功提示:
5.使用表單标簽庫
為了簡化視圖頁面的編碼,我們可以使用 「
Spring MVC - 表單标簽庫」 章節所講述的知識重構視圖頁面。
引入 form 标簽庫
manager_add.jsp
視圖頁面頁頭部分引入
form
标簽庫,代碼如下:
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
使用表單标簽
改造
form
表單,代碼如下:
<form:form action="/auth/manager/add" method="post" modelAttribute="authManager">
<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" placeholder="請輸入使用者名" />
</div>
<div class="form-group">
<label for="password">密碼</label>
<form:password path="password" cssClass="form-control" placeholder="請輸入密碼" />
</div>
<div class="form-group">
<label for="status">狀态</label>
<form:select path="status" cssClass="form-control select2" style="width: 100%;">
<option value="0" selected="selected">未激活</option>
<option value="1">激活</option>
<option value="2">鎖定</option>
<option value="3">删除</option>
</form:select>
</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" selected="selected">否</option>
<option value="1">是</option>
</form:select>
</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>
改造後端代碼
ManagerController
控制器中的
GET
方法
@RequestMapping(value = "add", method = RequestMethod.GET)
public String add(Model model) {
AuthManager authManager = new AuthManager();
model.addAttribute("authManager", authManager);
return "auth/manager_add";
}
6.使用表單驗證
引入 jquery-validation
includes/resources_body.jsp
檔案中引入
jquery-validation
插件依賴,代碼如下:
<!-- jquery-validation -->
<script src="/static/assets/plugins/jquery-validation/jquery.validate.min.js"></script>
<script src="/static/assets/plugins/jquery-validation/additional-methods.min.js"></script>
<script src="/static/assets/plugins/jquery-validation/localization/messages_zh.min.js"></script>
定義表單 id
定義表單的
id
<form:form action="/auth/manager/add" id="form" method="post" modelAttribute="authManager">
實作驗證腳本
在視圖頁
manager_add.jsp
檔案中
body
結尾處的腳本内,增加如下代碼:
$("#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');
}
});
表單驗證效果如下:
7.執行個體源碼
執行個體源碼已經托管到如下位址:
- https://github.com/work100-net/training-stage2/tree/master/iot-cloud3
- https://gitee.com/work100-net/training-stage2/tree/master/iot-cloud3
上一篇:
賬戶清單展示下一篇:
編輯賬戶如果對課程内容感興趣,可以掃碼關注我們的或
公衆号
,及時關注我們的課程更新
QQ群