目錄

🌲序言

🌴前端代碼的引入

🎋約定前后端交互接口

🚩接口定義

🍃后端服務器代碼實現

🚩登錄接口

🚩圖書列表接口

🎄前端代碼實現

🚩登錄頁面

🚩圖書列表頁

---

🌲序言

由于目前所學知識還不足以完成圖書管理系統的開發，后續我們會邊學習新的內容，邊進行開發

準備工作：創建項目

🌴前端代碼的引入

由于本文章只講述后端內容，前端就直接展示即可。

代碼引入：

前端頁面展示：

注意：圖書列表顯示的數據都是前端的假數據

🎋約定前后端交互接口

當前我們先完成登錄功能和列表功能：

🚩接口定義

根據需求可以得知,后端需要提供兩個接?

1. 賬號密碼校驗接?:根據輸???名和密碼校驗登錄是否通過
2. 圖書列表:提供圖書列表信息

登錄接口：

url：/user/login

type：post

參數：json/普通參數userName，password(這里我們定義為普通參數)

返回結果：驗證成功返回" "，驗證失敗返回"用戶名或者密碼錯誤"

圖書列表接口：

url：/book/getList

type：無要求

參數：無

返回結果：返回圖書列表，List<BookInfo>

🍃后端服務器代碼實現

由于目前還沒有學習應用分層，我們將所創建的類還是存于同一文件下

🚩登錄接口

代碼：

postman測試：發現當前返回了一個空，請求成功

錯誤測試：

🚩圖書列表接口

BookInfo字段定義：是由"添加圖書"和"修改"以及"圖書列表展示"信息的字段進行一個融合組成的BookInfo，當前這個三個所有的信息都一樣。

圖書列表接口代碼：

由于這里沒有真實數據返回，所以采用"mock"的方式，就是模擬的意思，對于當前也就是造假數據

postman測試：

🎄前端代碼實現

🚩登錄頁面

ajax請求后端數據：

當我們把代碼寫完之后，我們查看一下登錄頁面的源代碼：發現這里的代碼并沒有改變，也就是緩存的問題，通過crtl+f5強刷一下

再次查看源代碼：此時就有了(若還是不行crtl+shift+delete刪除數據，還是不行，查看后端target文件是否將前端代碼正確加載，通過clean或者直接刪除target文件，重新運行)

正確登錄：發生頁面跳轉

錯誤登錄：彈窗提示

🚩圖書列表頁

ajax請求數據：

訪問book_list頁面：

🌳應用分層

學習完該文章就可以對上述代碼進行分層：【JavaEE進階】應用分層-CSDN博客

• controller：里面存放接收前端發送的請求，對請求進?處理，并響應數據的代碼
• service：里面存放處理具體的業務邏輯的代碼。
• dao：里面負責數據訪問操作，包括數據的增、刪、改、查
• model：里面存放一些固體對象

接下來每個包下面創建以下文件

?

🚩UserController.java

UserController.java 里面存放的是登錄相關的代碼，負責實現登錄用戶名與密碼的驗證。這里并沒有進行分層（后續會進行分層）

由于沒有連接數據庫，咱們這里只用字符串代替驗證。訪問路徑遵守接口文檔的規定即可。代碼實現如下：

🚩BookController.java

關于圖書列表展示這里我做了一個應用分層

BookController.java這里面實現的圖書列表信息的返回。具體實現邏輯我放在了BookService.java里面。

因為當前階段并沒有導入數據庫，所以我們這里也是使用內存進行存儲。并在BookDao.java進行了數據增加操作

對于Book類我放在了BookInfo.java中進行實現，并且在管理對象方面，使用了spring進行管理

BookController.java調用BookService.java:

BookService.java調用BookDao:

BookInfo：