功能實作04
后端：https://github.com/liyuelian/furniture-back-end.git
前端：https://github.com/liyuelian/furniture-front-end.git
9.功能09-添加家居表單前端校驗
9.1需求分析
在添加家居表單時，如果添加的資料不符合格式，應該拒絕添加，并給出提示
9.2思路分析
- 完成前端代碼，使用Element Plus的表單rules驗證即可
- 參考ElementPlus的表單驗證檔案
9.3代碼實作
（1）資料池添加校驗規則
...
//修改資料池，添加表單的校驗規則
data() {
return {
...
//定義添加表單的校驗規則
rules: {
name: [//這里我們可以添加多個針對name屬性的規則校驗
{required: true, message: "請輸入家居名", tigger: "blur"}
],
maker: [
{required: true, message: "請輸入廠商", tigger: "blur"}
],
price: [
{required: true, message: "請輸入價格", tigger: "blur"},
//使用正則運算式對輸入的數字進行處理
{pattern: /^([1-9]\d*|0)(\.\d+)?$/, message: "請輸入數字", tigger: "blur"}
],
sales: [
{required: true, message: "請輸入銷量", tigger: "blur"},
//使用正則運算式對輸入的數字進行處理
{pattern: /^([1-9]\d*|0)$/, message: "請輸入數字", tigger: "blur"}
],
stock: [
{required: true, message: "請輸入庫存", tigger: "blur"},
//使用正則運算式對輸入的數字進行處理
{pattern: /^([1-9]\d*|0)$/, message: "請輸入數字", tigger: "blur"}
]
}
}
}
...
（2）指定將創建的規則應用到form表單，注意名稱要對應
（3）修改save方法，當表單驗證不通過時，不提交表單
...
save() {//將填寫的表單資料發送給后端
//修改和添加走的同一個方法
if (this.form.id) {//如果為修改業務，當前的id存在，表示真
...
} else {//添加業務
//表單驗證是否通過
this.$refs['form'].validate((valid) => {
//valid就是表單校驗結果
if (valid) {//如果校驗通過
//第一個引數為url，第二個引數是請求攜帶的資料
request.post("/api/save", this.form).then(res => {
console.log("res-", res)
this.dialogVisible = false;//隱藏表單
//呼叫list方法，重繪頁面顯示的資料
this.list();
this.$message({
type: "success",
message: "添加成功"
})
})
} else {//校驗沒有通過
this.$message({
type: "error",
message: "驗證失敗，不提交"
})
return false;//放棄提交
}
})
}
},
...
（4）測驗
10.功能10-添加家居表單后端校驗
10.1需求分析
- 前端校驗了，后端仍然需要對資料進行校驗，因為要防止類似postman的軟體繞過前端驗證直接發送請求，
- 當后端校驗沒有通過時，給前端表單出現灰色提示，后臺不真正入庫資料
10.2思路分析
- 后端使用 JSR303資料校驗，引入hibernate-validator.jar
- 前端使用ElementPlus進行資料系結，并顯示錯誤資訊
10.2代碼實作
（1）修改pom.xml檔案，引入 JSR303 資料校驗支持
<!--引入JSR303資料校驗支持-->
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-validator</artifactId>
<version>6.1.0.Final</version>
</dependency>
（2）修改Furn.java物體類
public class Furn {
private Integer id;
@NotEmpty(message = "請輸入家居名")
private String name;
@NotEmpty(message = "請輸入廠商名")
private String maker;
@NotNull(message = "請輸入價格")
@Range(min = 0,message = "價格不能小于0")
private BigDecimal price;
@NotNull(message = "請輸入銷量")
@Range(min = 0,message = "銷量不能小于0")
private Integer sales;
@NotNull(message = "請輸入庫存")
@Range(min = 0,message = "庫存不能小于0")
private Integer stock;
...
}
（3）修改FurnController.java的save()方法，添加校驗
/**
* 1.回應客戶端添加家居的請求
* 2.@RequestBody 注解將客戶端提交的json資料封裝成 Javabean 物件，
* 3.@ResponseBody 服務器回傳的資料是按照json來回傳的（底層是按照 http協議進行協商）
* 4.@Validated 對接收的資訊進行校驗
* 5.Errors用來接收校驗可能出現的錯誤資訊
*
* @param furn
* @return
*/
@ResponseBody
@PostMapping("/save")
public Msg save(@Validated @RequestBody Furn furn, Errors errors) {
Map<Object, Object> map = new HashMap<>();
List<FieldError> fieldErrors = errors.getFieldErrors();
for (FieldError fieldError : fieldErrors) {
map.put(fieldError.getField(), fieldError.getDefaultMessage());
}
if (map.isEmpty()) {//說明后端校驗沒有出現錯誤
furnService.save(furn);
//如果沒有出現例外，就回傳成功
return Msg.success();
} else {
//校驗失敗，將校驗錯誤資訊封裝到Msg物件，并回傳
return Msg.fail().add("errorMsg", map);
}
}
（4）使用postman進行測驗
可以看到回傳了錯誤資訊：
（5）在HomeView.vue中顯示服務器校驗回傳的提示資訊（略）
11.小結
說明：前后端框架分離，前端Vue，后端框架SSM
- 前端框架Vue
- 后端框架SSM
- 資料庫Mysql
- 專案的依賴管理Maven
- 分頁pageHelper
- 逆向工程MyBatis Generator
-前端框架Vue
- 使用了ElementPlus來展示資料
- 使用Axios物件來請求資料/介面
-后端框架SSM
- 使用經典的三層結構
- 使用MyBatis Generator和MyBatis pageHelper
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/546419.html
標籤：Java
上一篇：2.HelloSpring