SpringMVC 案例

在這里插入圖片描述

文章目錄

前言
1. 計算器
- 1.1 準備前端代碼
- 1.2 測試前端代碼
- 1.3 完成后端代碼
- 1.4 驗證程序
2. 留言板
- 2.1 前端代碼準備
- 2.2 測試前端代碼
- 2.3 完成前后端交互代碼
- 2.4 完成后端代碼
- 2.5 案例測試
- 2.6 完善前后端交互
- 2.7 完善后端代碼
- 2.8 完整功能測試
lombok
簡單的方式添加Lombok工具
3. 圖書管理系統
- 3.1 前端代碼準備
- 2.2 前端代碼測試
- 2.3 登錄功能前后端交互
- 2.4 后端登錄功能實現
- 2.5 登錄功能測試
- 2.6 圖書列表前后端交互
- 2.7 獲取圖書列表后端代碼
- 2.8 獲取圖書列表展示

前言

前面我們學習了 Spring MVC 的基礎知識，那么這篇文章我將結合前面所學的 Spring MVC 知識為大家分享計算器、留言墻、圖書管理系統的部分功能實現。

1. 計算器

這個計算器案例比較簡單，也就是簡單的用戶輸入兩個數字，我們后端給返回一個這兩個數的和就行了。

1.1 準備前端代碼

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="calc/sum" method="post"><h1>計算器</h1>數字1：<input name="num1" type="text"><br>數字2：<input name="num2" type="text"><br><input type="submit" value=" 點擊相加 "></form>
</body></html>

1.2 測試前端代碼

在這里插入圖片描述

1.3 完成后端代碼

package com.example.springdemo20231207;import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RequestMapping("/calc")
@RestController
public class CalcController {@RequestMapping("/sum")public String sum(Integer num1, Integer num2) {Integer ret = num1 + num2;return "兩數相加的結果為" + ret;}
}

1.4 驗證程序

在這里插入圖片描述

2. 留言板

這里的留言板跟我們前面用 servlet 寫的表白墻是類似的，只不過我們這里是用 Spring 來實現的。

2.1 前端代碼準備

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>留言板</title><style>.container {width: 350px;height: 300px;margin: 0 auto;/* border: 1px black solid; */text-align: center;}.grey {color: grey;}.container .row {width: 350px;height: 40px;display: flex;justify-content: space-between;align-items: center;}.container .row input {width: 260px;height: 30px;}#submit {width: 350px;height: 40px;background-color: orange;color: white;border: none;margin: 10px;border-radius: 5px;font-size: 20px;}</style>
</head><body><div class="container"><h1>留言板</h1><p class="grey">輸入后點擊提交, 會將信息顯示下方空白處</p><div class="row"><span>誰:</span> <input type="text" name="" id="from"></div><div class="row"><span>對誰:</span> <input type="text" name="" id="to"></div><div class="row"><span>說什么:</span> <input type="text" name="" id="say"></div><input type="button" value="提交" id="submit" onclick="submit()"><!-- <div>A 對 B 說: hello</div> --></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>function submit(){//1. 獲取留言的內容var from = $('#from').val();var to = $('#to').val();var say = $('#say').val();if (from== '' || to == '' || say == '') {return;}//2. 構造節點var divE = "<div>"+from +"對" + to + "說:" + say+"</div>";//3. 把節點添加到頁面上    $(".container").append(divE);//4. 清空輸入框的值$('#from').val("");$('#to').val("");$('#say').val("");}</script>
</body></html>

2.2 測試前端代碼

在這里插入圖片描述

2.3 完成前后端交互代碼

	function submit(){//1. 獲取留言的內容var from = $('#from').val();var to = $('#to').val();var say = $('#say').val();if (from== '' || to == '' || say == '') {return;}$.ajax({type: "post",url: "/message/publish",data: {"from": from,"to": to,"say": say},success: function (result) {if (result) {//2. 構造節點var divE = "<div>"+from +"對" + to + "說:" + say+"</div>";//3. 把節點添加到頁面上$(".container").append(divE);//4. 清空輸入框的值$('#from').val("");$('#to').val("");$('#say').val("");}else {alert("留言錯誤");}}});

2.4 完成后端代碼

MessageInfo 類用來管理瀏覽信息，這里 @Data 注釋稍后為大家解釋。

package com.example.springdemo20231207;import lombok.Data;@Data
public class MessageInfo {private String from;private String to;private String say;
}

package com.example.springdemo20231207;import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.List;@RequestMapping("/message")
@RestController
public class MessageWallController {private List<MessageInfo> messageInfos = new ArrayList<>();@RequestMapping("/publish")public boolean publish(MessageInfo messageInfo) {if (!StringUtils.hasLength(messageInfo.getFrom()) || !StringUtils.hasLength(messageInfo.getTo()) || !StringUtils.hasLength(messageInfo.getSay())) {return false;}messageInfos.add(messageInfo);return true;}
}

這樣就實現了留言信息的存儲，這里為什么不使用數據庫來存儲呢？這是因為傳統的數據庫操作比較麻煩，等到后面學習了數據庫相關的框架了之后，會為大家介紹。

2.5 案例測試

在這里插入圖片描述

到這里其實還沒有實現全部的功能，我們還差一個功能，就是當我們剛進來這個留言板頁面的時候，需要將之前存儲的留言信息給加載進來，所以就是剛進來這個頁面的時候就需要向我們的服務器發送一個請求來獲取信息。

2.6 完善前后端交互

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>$.ajax({type: "get",url: "/message/getList",success: function(messageInfos) {for (var messageInfo of messageInfos) {var divE = "<div>"+messageInfo.from +"對" + messageInfo.to + "說:" + messageInfo.say+"</div>";$(".container").append(divE);}}});function submit(){//1. 獲取留言的內容var from = $('#from').val();var to = $('#to').val();var say = $('#say').val();if (from== '' || to == '' || say == '') {return;}$.ajax({type: "post",url: "/message/publish",data: {"from": from,"to": to,"say": say},success: function (result) {if (result) {//2. 構造節點var divE = "<div>"+from +"對" + to + "說:" + say+"</div>";//3. 把節點添加到頁面上$(".container").append(divE);//4. 清空輸入框的值$('#from').val("");$('#to').val("");$('#say').val("");}else {alert("留言錯誤");}}});}</script>

2.7 完善后端代碼

	@RequestMapping("/getList")public List<MessageInfo> getList() {return messageInfos;}

2.8 完整功能測試

因為更改后端代碼之后需要重啟我們的項目才會生效，而因為我們的 MessageInfo 信息是存儲在 List 也就是內存當中的，所以當我們重啟程序之后，List 中的數據就會被釋放，所以為了測試新加入的功能，我們需要重新加入測試數據。

在這里插入圖片描述

提交之后，我們重新進入這個頁面。

在這里插入圖片描述
重新進入這個頁面之后，他會自動將之前保存的信息給顯示出來。

lombok

前面我們的 @Data 注解的作用其實就相當于給 private 權限的屬性設置 get 和 set 方法。

Lombok是一個Java庫，它可以幫助開發人員消除Java的冗長，尤其是對于簡單的Java對象（POJO）。它通過注釋實現這一目的。例如，通過在開發環境中實現Lombok，開發人員可以節省構建諸如hashCode()和equals()這樣的方法以及以往用來分類各種accessor和mutator的大量時間。Lombok常用的注解有：

@Getter：快速構建Getter方法。
@Setter：快速構建Setter方法。
@ToString：快速將當前對象轉換成字符串類型，便于log。
@EqualsAndHashCode：快速進行相等判斷。
@NonNull：判斷變量（對象）是否為空。
@Data：整合了Getter、Setter、ToString、EqualsAndHashCode、RequiredArgsConstructor注解。

那么如何使用 Lombok 呢，首先就需要引入這個工具包的依賴，我們可以在 maven 倉庫引入，也可以在創建 Spring Boot 項目的時候勾選上 Lombok 選項即可。

在這里插入圖片描述

Lombok 工具的更多用法。

注解	作用
@Getter	?動添加 getter ?法
@Setter	自動添加 setter 方法
@ToString	自動添加 toString 方法
@EqualsAndHashCode	自動添加 equals 和 hashCode 方法
@NoArgsConstructor	自動添加無參構造方法
@AllArgsConstructor	?動添加全屬性構造?法，順序按照屬性的定義順序
@NonNull	屬性不能為 null
@RequiredArgsConstructor	?動添加必需屬性的構造?法，final + @NonNull 的屬性為必需

簡單的方式添加Lombok工具

首先在插件中下載 Edit Starters。

在這里插入圖片描述

在 pom.xml 文件中右鍵，點擊 generate，選擇 Edit Starters。并且添加 Lombok。

在這里插入圖片描述

3. 圖書管理系統

因為我們現在學的 Spring 知識無法實現一個完整的圖書管理系統，所以這篇文章只完成部分功能。

3.1 前端代碼準備

因為這個案例前端代碼比較多，所以大家可以去我的 gitee 上自行查找。https://gitee.com/lmh18696433881/this-is-my-java-ee-learning/commit/8d55ca2407429bfbb1979f0a8559fd638e05b10a

在這里插入圖片描述

2.2 前端代碼測試

在這里插入圖片描述

2.3 登錄功能前后端交互

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>function login() {$.ajax({type: "post",url: "/user/login",data: {userName: $("#userName").val(),password: $("#password").val()},success: function (result) {if (result==true) {location.href = "book_list.html";}else {alert("您輸入的用戶名或者密碼錯誤");}}});}
</script>

2.4 后端登錄功能實現

package com.example.springbook.Controller;import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RequestMapping("/user")
@RestController
public class UserController {@RequestMapping("/login")public boolean login(String userName, String password, HttpSession session) {//這是為了判斷userName和password不為空且長度大于0if (!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)) {return false;}if ("zhangsan".equals(userName) && "123".equals(password)) {session.setAttribute("userName", userName);return true;}return false;}
}

2.5 登錄功能測試

在這里插入圖片描述

登錄完成之后，就會展示出有哪些圖書。

2.6 圖書列表前后端交互

		getBookList();function getBookList() {$.ajax({type: "get",url: "/book/getList",success: function (books) {var finalHtml = "";for (var book of books) {//拼接htmlfinalHtml +='<tr>';finalHtml +='<td><input type="checkbox" name="selectBook" value="'+book.id+'" id="selectBook" class="book-select"></td>';finalHtml +='<td>'+book.id+'</td>';finalHtml +='<td>'+book.bookName+'</td>';finalHtml +='<td>'+book.author+'</td>';finalHtml +='<td>'+book.count+'</td>';finalHtml +='<td>'+book.price+'</td>';finalHtml +='<td>'+book.publish+'</td>';finalHtml +='<td>'+book.stateCN+'</td>';finalHtml +='<td>';finalHtml +='<div class="op">';finalHtml +='<a href="book_update.html?bookId='+book.id+'">修改</a>';finalHtml +='<a href="javascript:void(0)" onclick="deleteBook('+book.id+')">刪除</a>';finalHtml +='</div>';finalHtml +='</td>';finalHtml +='</tr>';}$("tbody").html(finalHtml);}});}

2.7 獲取圖書列表后端代碼

首先需要一個 BookInfo 類來存儲書的信息。

package com.example.springdemo20231207;import lombok.Data;import java.math.BigDecimal;@Data
public class BookInfo {private Integer id;private String bookName;private String author;private Integer count;private BigDecimal price;private String publish;private Integer state; //1可借閱 2不可借閱private String stateCN;
}

創造一些假的圖書數據BookDao。

package com.example.springdemo20231207;import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;public class BookDao {public List<BookInfo> mockBookData() {List<BookInfo> bookInfos = new ArrayList<>();for (int i = 0; i < 15; i++) {BookInfo bookInfo = new BookInfo();bookInfo.setId(i);bookInfo.setBookName("圖書"+i);bookInfo.setAuthor("作者"+i);bookInfo.setCount(i*15 + 3);bookInfo.setPrice(new BigDecimal(new Random().nextInt(100)));bookInfo.setPublish("出版社"+i);bookInfo.setState(i%5==0?2:1);bookInfos.add(bookInfo);}return bookInfos;}
}

圖書列表操作的業務邏輯 BookService。

package com.example.springdemo20231207;import java.util.List;public class BookService {public List<BookInfo> getBookInfoList() {BookDao bookDao = new BookDao();List<BookInfo> bookInfos = bookDao.mockBookData();for (BookInfo bookInfo : bookInfos) {if (bookInfo.getState() == 1) {bookInfo.setStateCN("可借閱");}else {bookInfo.setStateCN("不可借閱");}}return bookInfos;}
}

圖書類的控制器。

package com.example.springdemo20231207;import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.List;@RequestMapping("/book")
@RestController
public class BookController {@RequestMapping("/getList")public List<BookInfo> getList() {BookService bookService = new BookService();return bookService.getBookInfoList();}
}