整合SSM框架、快速開發CRUD專案
本文學習內容來自尚硅谷的視頻 尚硅谷SSM實戰演練丨ssm整合快速開發CRUD_嗶哩嗶哩_bilibili
新增
添加員工的前臺頁面是以下形式，要求點擊add按鈕，彈出模塊框，這里可以直接使用bootstrap來進行頁面布局
<!--添加員工模態框-->
<div class="modal fade" id="addEmpModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">添加員工</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group" id="nameDiv">
<label for="inputName" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputName" name="name" placeholder="EmpName">
<span class="help-block"></span>
</div>
</div>
<div class="form-group" id="emailDiv">
<label for="inputEmail" class="col-sm-2 control-label">郵箱</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail" name="email" placeholder="email@123.com">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">性別</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" id="inlineRadio1" checked="checked" value="M"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="inlineRadio2" value="F"> 女
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">部門</label>
<div class="col-sm-4">
<select class="form-control" id="depts_select" name="dId">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary" id="save_emp">保存</button>
</div>
</div>
</div>
</div>
對資料庫中的部門進行查詢，并顯示在前端模塊中
$("#addEmpBtn").click(function (){
//發送請求，查詢部門資訊
$.ajax({
url:"getDepts",
type: "GET",
success:function (result){
build_depts_select(result);
}
})
//顯示模塊
$('#addEmpModal').modal('show');
});
//添加部門資訊
function build_depts_select(result){
//console.log(result);
$("#depts_select").empty();
$.each(result.extend.depts,function (){
var option = $("<option></option>").append(this.deptName).attr("value",this.deptId);
option.appendTo($("#depts_select"));
})
}
后端處理
public List<Department> getDepts(){
return departmentMapper.selectByExample(null);
}
初步實作保存員工資訊
為保存按鈕添加系結事件，jQuery中提供serialize()方法，幫我們將表單中的所填寫的資料整理成json格式
$("#save_emp").click(function (){
// alert($("#addEmpModal form").serialize());
$.ajax({
url:"addEmp",
data:$("#addEmpModal form").serialize(),
type:"POST",
success:function (result){
//模態框關閉
$('#addEmpModal').modal('hide');
//跳轉至最后一頁
to_page(currentPage+1);
}
})
})
服務器接收資料并處理資料
@RequestMapping(value="/addEmp",method=RequestMethod.POST)
@ResponseBody
public Msg saveEmp(Employee employee){
employeeSerivce.addEmp(employee);
return Msg.success();
}
以上一個初步的保存員工資訊就完成了，接下來我們需要對此進行優化
- 前端驗證（要求郵箱格式正確，用戶名為2-5個中文或6-16個英文字母和數字、下劃線）
- 后端驗證用戶名是否重復
- 后端驗證
前端驗證
//檢驗表單資訊
function validate_add_form(){
//校驗姓名
var nameRegular = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
var empName = $("#inputName").val();
if(!nameRegular.test(empName)){
show_validate_msg("#inputName", "error", "用戶名可以是2-5位中文或者6-16位英文和數字的組合");
return false;
}else {
show_validate_msg("#inputName", "success", "");
}
//校驗郵箱
var emailRegular = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
var empEmail = $("#inputEmail").val();
if(!emailRegular.test(empEmail)){
show_validate_msg("#inputEmail", "error", "郵箱格式不正確");
return false;
}else {
show_validate_msg("#inputEmail", "success", "");
}
return true;
}
//顯示校驗結果的提示資訊
function show_validate_msg(ele,status,msg){
//清除當前元素的校驗狀態
$(ele).parent().removeClass("has-success has-error");
$(ele).next("span").text("");
if("success"==status){
$(ele).parent().addClass("has-success");
$(ele).next("span").text(msg);
}else if("error" == status){
$(ele).parent().addClass("has-error");
$(ele).next("span").text(msg);
}
}
后端驗證用戶名是否存在
@RequestMapping("/nameIsExist")
@ResponseBody
public Msg isExist(@RequestParam("name") String name){
//先判斷用戶名是否是合法的運算式;
String regx = "(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})";
if(!name.matches(regx)){
return Msg.fail().add("va_msg", "用戶名必須是6-16位數字和字母的組合或者2-5位中文");
}
return employeeSerivce.isExist(name)?Msg.fail().add("va_msg","用戶名已存在"):Msg.success();
}
后端驗證
在后臺我們需要對資料的格式進行驗證，這里需要用到JSR303技術，先來匯入相關jar包
<!--JSR303校驗-->
<!-- https://mvnrepository.com/artifact/org.hibernate.validator/hibernate-validator -->
<dependency>
<groupId>javax.validation</groupId>
<artifactId>validation-api</artifactId>
<version>1.1.0.Final</version>
</dependency>
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-validator</artifactId>
<version>5.1.0.Final</version>
</dependency>
對JavaBean進行修改，在需要驗證的欄位名上加上注解
@Pattern(regexp = "(^[a-zA-Z0-9_-]{6,16}$)|(^[\\u2E80-\\u9FFF]{2,5})",
message = "用戶名必須是6-16位數字和字母的組合或者2-5位中文")
private String name;
@Pattern(regexp="^([a-z0-9_\\.-]+)@([\\da-z\\.-]+)\\.([a-z\\.]{2,6})$",
message = "郵箱格式不正確")
private String email;
在controller類中加上注解，注意@Valid需要配合BindingResult物件來使用，BindingResult包裝了所有關于驗證的資訊
@RequestMapping(value="/addEmp",method=RequestMethod.POST)
@ResponseBody
public Msg saveEmp(@Valid Employee employee, BindingResult result){
if(result.hasErrors()){
//校驗失敗，應該回傳失敗，在模態框中顯示校驗失敗的錯誤資訊
Map<String, Object> map = new HashMap<>();
List<FieldError> errors = result.getFieldErrors();
for (FieldError fieldError : errors) {
System.out.println("錯誤的欄位名："+fieldError.getField());
System.out.println("錯誤資訊："+fieldError.getDefaultMessage());
map.put(fieldError.getField(), fieldError.getDefaultMessage());
}
return Msg.fail().add("errorFields", map);
}else{
employeeSerivce.addEmp(employee);
return Msg.success();
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/348406.html
標籤：其他