文章目錄
- 📕4. 響應
- ??4.1 返回靜態頁面
- ??4.2 返回數據@ResponseBody?
- ??4.3 返回HTML代碼片段?
- ??4.4 返回JSON
- ??4.5 設置狀態碼
- ??4.6 設置Header（了解）
- 📕5. 案例練習
- ??5.1 加法計算器
- ??5.2 用戶登錄
- ??5.3 留言板
- 📕6. lombok介紹
- 📕7. 應用分層
- ??7.1 使用三層架構進行分層
- ??7.2 應用分層的好處
上接：從 0 到 1 認識 Spring MVC：核心思想與基本用法（上）
📕4. 響應
在我們前面的代碼例子中，都已經設置了響應數據，Http響應結果可以是數據，也可以是靜態頁面，也可以針對響應設置狀態碼，Header信息等。
??4.1 返回靜態頁面
創建前端頁面 index.html(注意路徑)?
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Index頁面</title>
</head>
<body>Hello,Spring MVC,我是Index頁面.
</body>
</html>
@RestController
public class indexController(){@RequestMapping("/index")public String index(){return "/index.html";}
}
結果卻發現, 頁面未正確返回, http響應把"/index.html" 當做了http響應正文的數據? 那Spring MVC如何才能識別出來 index.html 是一個靜態頁面, 并進行返回呢??
我們需要把 @RestController 改為 @Controller
@RestController 和 @Controller 有著什么樣的關聯和區別呢??
之前我們介紹了MVC模式，后端會返回視圖，這是早期時的概念?。隨著互聯網的發展，目前項目開發流行"前后端分離"模式， Java主要是用來做后端項目的開發，所以也就 不再處理前端相關的內容了。MVC的概念也逐漸發生了變化，View不再返回視圖，而是返回顯示視圖時需要的數據。如果想返回視圖的話, 只需要把@ResponseBody 去掉就可以了, 也就是@Controller ?
所以前面使用的@RestController 其實是返回的數據.? @RestController = @Controller + @ResponseBody
@Controller : 定義一個控制器, Spring 框架啟動時加載, 把這個對象交給Spring管理.?
@ResponseBody : 定義返回的數據格式為非視圖, 返回一個 text/html 信息?
??4.2 返回數據@ResponseBody?
@Controller
@ResponseBody
public class indexController(){@RequestMapping("/index")public String index(){return "/index.html";}
}
加上@ResponseBody 注解, 該方法就會把 “/index.html” 當做一個數據返回給前端.?
@ResponseBody 既是類注解，又是方法注解?。
如果作用在類上，表示該類的所有方法，返回的都是數據，如果作用在方法上，表示該方法返回的是數據。也就是說: 在類上添加@ResponseBody 就相當于在所有的方法上添加了@ResponseBody 注解。同樣，如果類上有@RestController 注解時 : 表示所有的方法上添加了@ResponseBody 注解，也就是當前類下所有的方法返回值做為響應數據?。
??4.3 返回HTML代碼片段?
后端返回數據時, 如果數據中有HTML代碼, 也會被瀏覽器解析?
@RestMapping("/return/html")
@ReponseBody
public class returnHtml(){public String return(){return "<h1>Hello,HTML~<h1>";}
}
通過Fiddler觀察響應結果, Content-Type 為text/html
響應中的 Content-Type 常見取值有以下幾種:?
- text/html : body 數據格式是 HTML?
- text/css : body 數據格式是 CSS?
- application/javascript : body 數據格式是 JavaScript?
- application/json : body 數據格式是 JSON?
??4.4 返回JSON
Spring MVC 也可以返回JSON?，后端方法返回結果為對象。
@RequestMapping("/m11")public Map<String,String> m11(){Map<String,String> hash = new HashMap<>();hash.put("name","zhuxulong");hash.put("name1","lijiufang");return hash;}
通過Fiddler觀察響應結果, Content-Type 為 application/json
??4.5 設置狀態碼
Spring MVC會根據我們方法的返回結果自動設置響應狀態碼, 程序員也可以手動指定狀態碼?。通過Spring MVC的內置對象HttpServletResponse 提供的方法來進行設置?。
@RequestMapping("/m12")public String m12(HttpServletResponse response){response.setStatus(401);return "yes";}狀態碼不影響頁面的展示
我們通過Proxyman來抓包發現狀態碼是401
??4.6 設置Header（了解）
Http響應報頭也會向客戶端傳遞一些附加信息，比如服務程序的名稱，請求的資源已移動到新地址等，如: Content-Type，Local等。這些信息通過@RequestMapping 注解的屬性來實現。
設置Content-Type?
@RequestMapping(value = "/m13",produces = "application/json")public String m13(){return "{\"success\":true}";}
如果不設置produces , 方法返回結果為String時, Spring MVC默認返回類型, 是text/html.?
設置其他Header
設置其他Header的話, 需要使用Spring MVC的內置對象HttpServletResponse 提供的方法來進行設置?
@RequestMapping(value = "/m14")public String m14(HttpServletResponse response){response.setHeader("myHeader","hahaha");return "yes";}
void setHeader(String name, String value) 設置一個帶有給定的名稱和值的 header. 如果 name 已經存在, 則覆蓋舊的值.?
通過Proxyman來查看我們設置的結果
📕5. 案例練習
??5.1 加法計算器
需求
輸入兩個整數, 點擊"點擊相加"按鈕, 顯示計算結果
?
定義接口
請求路徑 : calc/sum
請求方式 : GET/POST
接口描述 : 計算兩個整數相加
請求參數
| 參數名? | 類型? | 是否必須? | 備注? |
|---|---|---|---|
| num1? | Integer? | 是? | 參與計算的第一個數? |
| num2? | Integer? | 是? | 參與計算的第二個數? |
響應數據
Content-Type : text/html
響應內容 : 計算機計算結果:
前端代碼
<!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>
后端代碼
package xulong.com;import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
@RequestMapping("/calc")
public class CalcController {@RequestMapping("/sum")public String add(Integer num1,Integer num2){if(num1==null||num2==null){return "輸入不合法";}return "計算機計算結果:"+(num1+num2);}
}??5.2 用戶登錄
1.校驗接口
需求
用戶輸入賬號和密碼, 后端進行校驗密碼是否正確?
- 如果不正確, 前端進行用戶告知?
- 如果正確, 跳轉到首頁. 首頁顯示當前登錄用戶?
- 后續再訪問首頁, 可以獲取到登錄用戶信息?
定義接口
請求路徑 : /user/login
請求方式 : POST
接口描述 : 校驗賬號密碼是否正確
請求參數
| 參數名? | 類型? | 是否必須? | 備注? |
|---|---|---|---|
| userName? | String | 是? | 校驗的賬號? |
| password | String? | 是? | 校驗的密碼? |
響應數據
Content-Type : text/html
響應內容 : true //賬號密碼驗證成功 false//賬號密碼驗證失敗
2.查詢接口
定義接口
請求路徑 : /user/getLoginUser
請求方式 : GET
接口描述 : 查詢當前登錄的用戶
響應數據
Content-Type : text/html
響應內容 : zhangsan
===================================================================================
后端代碼
package xulong.com.Login;import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
@RequestMapping("/user")
public class LoginController {@RequestMapping("/login")public boolean login(String userName, String password, HttpSession session ){if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)){return false;}if("zhangsan".equals(userName)&&"123456".equals(password)){session.setAttribute("username",userName);return true;}return false;}@RequestMapping("/getLoginUser")public String getLoginUser(HttpSession session){String username = (String)session.getAttribute("username");if(StringUtils.hasLength(username)) {return username;}return "";}}前端代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>登錄頁面</title>
</head><body><h1>用戶登錄</h1>用戶名：<input name="userName" type="text" id="userName"><br>密碼：<input name="password" type="password" id="password"><br><input type="button" value="登錄" onclick="login()"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/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) {location.href = "/index.html"} else {alert("賬號或密碼有誤.");}}});}</script>
</body></html>
??5.3 留言板
需求
- 輸入留言信息, 點擊提交. 后端把數據存儲起來.
- 頁面展示輸入的表白墻的信息
接口定義
- 獲取全部留言
請求:?GET /message/getList
響應: JSON 格式?
瀏覽器給服務器發送一個 GET /message/getList 這樣的請求, 就能返回當前一共有哪些留言 記錄. 結果以 json 的格式返回過來.
- 發表新留言
請求: body 也為 JSON 格式.?
響應: JSON 格式.?
我們期望瀏覽器給服務器發送一個 POST /message/publish 這樣的請求, 就能把當前的留言提 交給服務器.?
前端代碼
<!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>load();function load() {$.ajax({type: "get",url: "/message/getList",success: function (result) {for (var message of result) {var divE = "<div>" + message.from + "對" + message.to + "說:" +message.message + "</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,message: 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>
</body></html>
后端代碼
package xulong.com.Message;import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.List;@RestController
@RequestMapping("/message")
public class MessageController {List<MessageInfo> list = new ArrayList<>();@RequestMapping("/getList")public List<MessageInfo> getList(){return list;}@RequestMapping("/publish")public boolean punish(@RequestBody MessageInfo messageInfos){if(StringUtils.hasLength(messageInfos.getFrom())&&StringUtils.hasLength(messageInfos.getTo())&&StringUtils.hasLength(messageInfos.getMessage())){list.add(messageInfos);return true;}return false;}
}📕6. lombok介紹
Lombok是一個Java工具庫,通過添加注解的方式,簡化Java的開發.?
引入依賴
<dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional>
</dependency>
使用
lombok通過一些注解的方式, 可以幫助我們消除一些冗長代碼, 使代碼看起來簡潔一些?
比如之前的Person對象 就可以改為?
@Data
public class Person {private int id;private String name;private String password;
}
@Data 注解會幫助我們自動一些方法, 包含getter/setter, equals, toString等
更多使用
如果覺得@Data比較粗暴(生成方法太多), lombok也提供了一些更精細粒度的注解??
| 注解? | 作用? |
|---|---|
| @Getter ? | 自動添加 getter 方法? |
| @Setter ? | 自動添加 setter 方法? |
| @ToString ? | 自動添加 toString 方法? |
| @EqualsAndHashCode ? | 自動添加 equals 和 hashCode 方法? |
| @NoArgsConstructor ? | 自動添加無參構造方法? |
| @AllArgsConstructor ? | 自動添加全屬性構造方法,順序按照屬性的定義順序? |
| @NonNull ? | 屬性不能為 null? |
| @RequiredArgsConstructor? | 自動添加必需屬性的構造方法,final + @NonNull 的屬性為 必需 ? |
@Data = @Getter + @Setter + @ToString + @EqualsAndHashCode + @RequiredArgsConstructor + @NoArgsConstructor ?
📕7. 應用分層
通過上面的練習，我們學習了Spring MVC簡單功能的開發，但是我們也發現了一些問題?，目前我們程序的代碼有點"雜亂"，然而當前只是"一點點功能"的開發。如果我們把整個項目功能完成呢? 代碼會更加的"雜亂無章"(文件亂, 代碼內容亂)?。也基于此, 咱們接下來學習應用分層.?
為什么需要應用分層??
在最開始的時候，為了讓項目快速上線，我們通常是不考慮分層的。但是隨著業務越來越復雜，大量的代碼混在一起，會出現邏輯不清晰､各模塊相互依賴､代碼擴展性差､改動一處就牽一發而動全身等問題。所以學習對項目進行分層就是我們程序員的必修課了。
類似公司的組織架構
公司初創階段, 一個人身兼數職, 既做財務, 又做人事, 還有行政.?
隨著公司的逐漸壯大, 會把崗位進行細分, 劃分為財務部門, 人事部門, 行政部門等. 各個部門內部還會 再進行細分.?
項目開發也是類似, 最開始功能簡單時, 我們前后端放在一起開發, 隨著項目功能的復雜, 我們分為前 端和后端不同的團隊, 甚至更細粒度的團隊. 后端開發也會根據功能再進行細分. MVC就是其中的一種 拆分方式.?
但是隨著后端人員不再涉及前端, 后端開發又有了新的分層方式.?
??7.1 使用三層架構進行分層
之前介紹的 “MVC”，就是把整體的系統分成了 Model(模型)，View(視圖)和Controller (控制器)三個層次，也就是將用戶視圖和業務處理隔離開，并且通過控制器連接起來，很好地實現了表現和邏輯的解耦，是一種標準的軟件分層架構｡
目前現在更主流的開發方式是 “前后端分離” 的方式，后端開發工程師不再需要關注前端的實現， 所以對 于Java后端開發者，又有了一種新的分層架構：把整體架構分為表現層､業務邏輯層和數據層。這種分層方式也稱之為"三層架構"。
- 表現層: 就是展示數據結果和接受用戶指令的，是最靠近用戶的一層。?
- 業務邏輯層：負責處理業務邏輯，里面有復雜業務的具體實現。
- 數據層：負責存儲和管理與應用程序相關的數據?
按照上面的層次劃分, Spring MVC 站在后端開發人員的角度上, 也進行了支持, 把上面的代碼劃分為三 個部分: ?
??7.2 應用分層的好處
- 降低層與層之間的依賴, 結構更加的明確, 利于各層邏輯的復用?
- 開發人員可以只關注整個結構中的其中某一層, 極大地降低了維護成本和維護時間?
- 可以很容易的用新的實現來替換原有層次的實現
- 有利于標準化
 資源規劃)
