Spring MVC (下)小項目實戰

1. 加法計算器

? ? ? ? 需求分析:

????????客戶端輸入倆個數,服務端進行相加然后返回結果.

? ? ? ? 約定前后端交互接口:?

? ? ? ? ? ? ? ? 接口的概念:?

? ? ? ? 接口?叫API（ApplicationProgrammingInterface),我們?般講到接口或者API，指的都是同?個東西.是指應?程序對外提供的服務的描述,?于交換信息和執?任務(與JavaSE階段學習的[類和接口]中的接口是兩回事).簡單來說,就是允許客戶端給服務器發送哪些HTTP請求,并且每種請求預期獲取什么樣的HTTP響應.

????????現在"前后端分離"模式開發,前端和后端代碼通常由不同的團隊負責開發.雙?團隊在開發之前,會提前約定好交互的方式.客戶端發起請求,服務器提供對應的服務.服務器提供的服務種類有很多,客戶端按照雙?約定指定選擇哪?個服務.接口,計算機網絡講的的"應用層協議".把約定的內容寫在文檔上,就是"接口文檔",接口文檔也可以理解為是應用程序的"操作說明書".

? ? ? ? 簡而言之:?接口(此接口就是api,就是我們剛剛一直訪問的url,也就是RequestMapping里面,一般由客戶端定義和服務端定義之后,客戶端(前端)進行review(檢查))
注意事項: 雙方并行開發,接口定義之后,不輕易改變,改變了就要通知到每一個調用方,接口定義以接口文檔(防止背鍋)來進行呈現.

????????接口設計:
????????????????1. 接收什么(看后端完成這個功能需要什么)
????????????????2. 返回什么(1.后端能提供什么. 2. 前端頁面顯示需要什么)

? ? ? ? 我們這個加法計算器的接口:?

? ? ? ? 請求路徑: calc/sum

? ? ? ? 參數: num1,num2

? ? ? ? 返回: 倆個數相加的和(sum)

前端代碼:

頁面展示:

后端代碼:

結果:

代碼之間的關系:

2. 登錄

需求分析:

用戶輸?賬號和密碼,后端進?校驗密碼是否正確
如果不正確,前端進行用戶告知
如果正確,跳轉到首頁.首頁顯示當前登錄用戶
后續再訪問首頁,可以獲取到登錄用戶信息

頁面效果:

補充:異步調用

在發起異步調用后，代碼不會等待該調用完成，而是會立即繼續執行后續的語句，并在稍后的某個時間點處理異步操作的結果。

約定前后端交互接口:

用戶登錄
url:/user/login
參數:userName用戶名,password密碼
返回結果: true false 密碼正確還是失敗

獲取當前登錄用戶
url:/user/index
參數:無
返回:userName 當前登錄用戶

前端代碼:

用戶登錄

<!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({//這個是個異步調用的東西url:"/user/login",type: "post",data:{userName:$("#userName").val(),password:$("#password").val()},     //http響應成功的話success:function(result){if(result == true){//頁面跳轉location.href = "index.html"// //另一種跳轉方式// location.assign("index.html")// //還有一種方式// location.replace(可以了解一下三種的區別)}else{alert("密碼錯誤");}}});}</script>
</body></html>

獲取當前登錄用戶

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>用戶登錄首頁</title>
</head><body>登錄人: <span id="loginUser"></span><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script> $.ajax({url: "/user/index",type: "get",success:function(loginName){$("#loginUser").text(loginName)}})</script>
</body></html>

后端代碼:

package org.xiaobai.springmvc_tets.MVCFistclass;import ch.qos.logback.core.util.StringUtil;
import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.SessionAttribute;@RequestMapping("/user")
@RestController
public class UserController {//用戶登錄@RequestMapping("/login")public Boolean login(String userName, String password, HttpSession session) {//參數校驗
//        if(userName == null || userName.length() == 0
//            || password == null || password.length() == 0){
//            return false;
//        }//另一種判斷方式if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)){return false;}//判斷密碼是否正確//上面進行了判空處理userName不為null,但是如果我們沒有判斷的話就會報空指針,因此我們是admin.eq而不是password.eq//后面開發的時候我們都把常量字符串寫在前面,變量寫在后面if("admin".equals(userName) && "admin".equals(password)) {//設置sessionsession.setAttribute("userName",userName);return true;}else {return false;}}//獲取當前登錄用戶@RequestMapping("/index")
//    public String getUserName(HttpSession session){public String getUserName(@SessionAttribute("userName") String userName){//從session里面去拿,首先我們要先去設置session里面的內容return userName;}}

注意: StringUtils.hasLength,這個是判斷字符串是不是一個空的對象的或者長度為0.

結果:

代碼之間的關系:

3. 表白墻

需求分析:

1. 輸入留言信息,點擊提交.后端收到前端的信息,并且存儲起來

2. 前端頁面顯示輸入的表白墻的信息

定義接口:

1. 發布留言(把信息從前端傳到后端)

url:/message/publish

param:from,to,say

返回結果: return: 成功/失敗 ture/false {ok:1}

2. 查詢留言(在前端頁面顯示所有的留言信息)

url:/message/getList

param:無

返回結果: 返回json[{},{},{}]

引入的工具或者包: lombok

lombok: 它是?個Java?具庫，通過添加注解的?式，在編譯時期自動幫我們生成代碼

步驟:

1. 安裝插件EditStart(可以快速把依賴搞到pom里面)

但是注意,不是所有的依賴都可以通過這個插件添加.如果插件沒有,那么就自己去手動添加
2. 添加lombok

用法演示:

@Data=@Getter+@Setter+@ToString+@EqualsAndHashCode+@RequiredArgsConstructor+@NoArgsConstructor. 因此@Data是一個復合注解

這個是其他注解的一些解釋和作用

接口1的前端后端代碼:

?后端接受到的消息實體:

主要代碼解析:

接口2的前后端代碼:

整體的聯系:

運行結果:

解決問題常用的辦法:

alt+shift+f格式化(idea)

出現問題:

(寫完后端,就測后端,寫完前端就測前端)

1.定位:是前端還是后端問題
打日志,看后端接收前端數據部分的代碼有沒有效果

如果沒有進入到后端就說明前端有問題,去前端也看看

前端打斷點:

然后去前端加日志,看提交數據部分的代碼生效不

如果前后端交互都沒有拿到值:?去fidde抓包,看請求的參數和postman里面請求參數是不是一樣

處理的方法:
1. 后端問題: 打日志,debug

這個是看表達式的值

2. 前端問題: 打日志,抓包
3. 考慮緩存問題刷新(ctrl+f5強制刷新或者清除緩存ctrl+Shift+delet),后端緩存:maven的循環按鈕)

好用的小工具: 在線比較代碼diff

圖書管理系統:

前端工具介紹:

簡介 · Bootstrap v4 中文文檔 v4.6 | Bootstrap 中文網

用法:

1. 引入css

2. 喜歡哪個構建就copy什么

3. 關于如何修改前端代碼

比如在模板上想改顏色,遵循就近原則,我們就去f12,找到它的css樣式(就近原則)

應用層分層

? ? ? ? 分層的概念:

在進入正式的圖書管理系統的編寫之前,我們需要知道什么是應用層分層

比如,一開始的MVC模式,view是涉及前端的,后面我們實現了前后端分離,現在MVC基本上都是把后端進行功能的拆分,再也不涉及前端.后面后端又進行了進一步的劃分.

? ? ? ? 那么我們理解了什么是分層的操作,什么是應用層分層呢?

????????應?分層是?種軟件開發設計思想,它將應?程序分成N個層次,這N個層次分別負責各自的職責,多個層次之間協同提供完整的功能.根據項?的復雜度,把項?分成三層,四層或者更多層.
常?的MVC設計模式,就是應?分層的?種具體體現.

? ? ? ? 為什么分層?

????????在最開始的時候，為了讓項?快速上線，我們通常是不考慮分層的.但是隨著業務越來越復雜，?量的代碼混在?起，會出現邏輯不清晰、各模塊相互依賴、代碼擴展性差、改動?處就牽?發?動全?等問題.所以學習對項目進?分層就是我們程序員的必修課了.簡而言之就是更好的管理.

? ? ? ? 怎么進行分層?

? ? ? ? 剛剛提到的MVC,就是把整體的系統分成了Model（模型），View（視圖）和Controller（控制器）三個層次，也就是將用戶視圖和業務處理隔離開，并且通過控制器連接起來，很好地實現
了表現和邏輯的解耦，是?種標準的軟件分層架構。

? ? ? ? 三層架構:

?????????前現在更主流的開發?式是"前后端分離"的?式,后端開發?程師不再需要關注前端的實現,所以對于Java后端開發者,?有了?種新的分層架構:把整體架構分為表現層、業務邏輯層和數據層.這種分層?式也稱之為"三層架構".
? ? ? ? 1. 表現層:就是展示數據結果和接受用戶指令的，是最靠近用戶的?層；
? ? ? ? 2. 業務邏輯層:負責處理業務邏輯,里面有復雜業務的具體實現；
? ? ? ? 3. 數據層:負責存儲和管理與應?程序相關的數據

? ? ? ? 簡單來理解:

? ? ? ? 應用層分層(相當于文件管理)->把代碼包的好看一些,調理清晰一些

? ? ? ? 它是一種軟件開發思想,把后端代碼進行分層

? ? ? ? 三層架構:

? ? ? ? 1. 表現層: 接受請求,結果響應(接受參數)

? ? ? ? 2. 業務邏輯層: 根據請求,對數據進行加工處理

? ? ? ? 3. 數據層: 數據相關的處理,比如mysql等獲取數據

?????????

? ? ? ? 包的分類類型:

????????Controller：控制層。接收前端發送的請求，對請求進?處理，并響應數據。
????????Service：業務邏輯層。處理具體的業務邏輯。
????????Dao：數據訪問層，也稱為持久層。負責數據訪問操作，包括數據的增、刪、改、查

????????Model: 放實體類.(比如剛剛表白墻的MessageInf和接下來的BookInf)

? ? ? ? ?幾個例子:

重點看下面倆張圖

按照上?的層次劃分,SpringMVC站在后端開發?員的?度上,也進?了?持,把上?的代碼劃分為三個部分:
????????請求處理、響應數據：負責，接收??的請求，給??響應數據.(表現層,Controller)
????????邏輯處理：負責業務邏輯處理的代碼.(業務邏輯層,Servce)
????????數據訪問：負責業務數據的維護操作，包括增、刪、改、查等操作.(數據層,Dao)