文章目錄
Springboot 下 ModelAndView的簡單使用
1.加載前臺界面
1.配置文件進行設定
2.使用 ModelAndView 進行資源映射
2.前後臺數據交互
1.使用配置文件設置路徑顯示前臺界面
2.使用 ModelAndView 進行前臺界面顯示
3.在 ModelAandView 模式下進行數據交互
1.前臺向後臺傳輸數據
1.傳入對象
2.使用路徑傳值
2.前臺從後臺提取數據
3.前臺——從後臺提取複雜參數的處理
本文簡單介紹了在Springboot 下 ModelAndView 的簡單使用。項目環境爲：idea + gradle+ h2數據庫
項目地址：[https://github.com/yr0418/learn]
1.加載前臺界面
1.配置文件進行設定
在配置文件中設置網頁資源映射：以 user.html 爲例，訪問路徑：http://localhost:8081/static/user.html
spring:
mvc:
static-path-pattern: /static/**
1
2
3
2.使用 ModelAndView 進行資源映射
以 indexController 爲例，通過書寫接口，默認在 templates 文件中創建對應的前臺文件，文件後綴名默認爲“.ftl”。通過在瀏覽器中輸入對應接口的路徑進行前臺界面的顯示。@RequestMapping() 括號中的值即爲路徑。
以 indexController 爲例，在瀏覽器中輸入路徑：localhost:8081/index/test
顯示 index.ftl 界面的內容
//由於是返回的網頁，所以不能使用RestController以及相應的GetMapping、PostMapping等
@RequestMapping("/test")
public ModelAndView index() {
ModelAndView mav = new ModelAndView();
//設置對應網頁的名字
mav.setViewName("index");
return mav;
}
1
2
3
4
5
6
7
8
2.前後臺數據交互
由於是使用的 ModelAndView 進行的界面顯示，因此，前後臺的數據交互與一般的前後臺分離項目是不一樣的。同時，對於上文的兩種前臺界面顯示的方法，所對應的數據交互的方式也是不一樣的。在此只說明對前後端不分離項目進行數據交互的示例。
1.使用配置文件設置路徑顯示前臺界面
使用這種方式，前後臺的數據交互，推薦和前後臺分離項目一樣，使用 axios 或者 flyio 進行。在這種模式下，前臺跟後臺之間的耦合度其實很低，在一定程度上跟前後臺項目沒有什麼區別，只是前臺文件跟後臺文件放在了一個工程裏面。
因此在這種情況下，後臺的 controller 層 需要使用 “RestController” 註解，同時在每一個接口前需要指明接口的請求類型，因爲需要返回 json 數據給前臺。關於接口的書寫以及 axios、flyio 的使用請自行百度。
2.使用 ModelAndView 進行前臺界面顯示
在這種方式下進行的界面顯示與界面之間的跳轉完全依賴於 controller 層中書寫的返回 ModelAndView 的接口，前後臺之間的耦合度很高，數據交互需要雙方在書寫代碼時進行配合。
3.在 ModelAandView 模式下進行數據交互
以 userController 爲例，數據交互分爲
1. 前臺向後臺傳輸數據
2. 前臺從後臺提取數據
1.前臺向後臺傳輸數據
1.傳入對象
以 user_add.ftl 爲例，添加用戶，向後臺傳輸 一個 User 對象。使用這種方式，傳入值比較多變，而且具有良好的封閉性，推薦使用這種方式向後臺傳輸比較複雜的參數。
後臺代碼如下：
//顯示 user_add.ftl 界面
@RequestMapping("/add")
public ModelAndView addUser() {
ModelAndView mav = new ModelAndView();
mav.setViewName("user_add");
return mav;
}
//執行具體的 添加用戶 操作，接收一個 User 對象
@RequestMapping("/do_add")
public ModelAndView doAddUser(User user) {
user.setAvatar("");
userService.addUser(user);
ModelAndView mav = new ModelAndView("redirect:/user/list");
return mav;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
前臺代碼如下：
<div class="col-md-8">
<!-- 一個 from 標籤，設置 action 爲所調用方法的路徑，進行後臺接口的調用-->
<form action="/user/do_add">
<div class="form-group">
<label for="username">用戶名</label>
<!-- input 標籤獲取值，設置 “name”的屬性值與要傳入的值的名字一致，在該例中，這個 input標籤用於獲取 用戶名，所以設置 name = "username"-->
<input type="text" class="form-control" id="username" name="username" placeholder="請輸入用戶名">
</div>
<div class="form-group">
<label for="password">密碼</label>
<input type="password" class="form-control" id="password" name="password" placeholder="請輸入密碼">
</div>
<!-- 由於要向後臺傳入相關的值，所以 button 的 type 設爲 submit -->
<button type="submit" class="btn btn-default">確認</button>
</form>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2.使用路徑傳值
以 userController 下 user 爲例。
以 id = 1 爲示例，要訪問該接口，輸入路徑：localhost:8081/user/1
該方法只能用來傳輸單個參數，無法像上面的方法一樣傳輸對象，同時，傳輸的參數的值會在瀏覽器的路徑欄上顯示出來，不用於傳輸需要保密的數據。
後臺代碼如下
/**
* 使用 ModelAndView 顯示前臺界面，界面的路徑爲：/user/{id}
* 其中 id 是前臺傳入的主鍵值。
* PathVariable註解：標明該參數的值來自路徑。
* RequestMapping("/{id}")：表示在路徑後面添加主鍵值，該主鍵值將傳給該接口。
*/
@RequestMapping("/{id}")
public ModelAndView user(@PathVariable Long id) {
ModelAndView mav = new ModelAndView();
User user = userService.getUser(id);
mav.addObject("user", user);
mav.setViewName("user");
return mav;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2.前臺從後臺提取數據
以 user.ftl 爲例。從前臺向後臺提取數據均是這種方式。
後臺代碼如下所示
@RequestMapping("/{id}")
public ModelAndView user(@PathVariable Long id) {
ModelAndView mav = new ModelAndView();
User user = userService.getUser(id);
//使用 addObject 像前臺傳輸參數，第一個變量爲在前臺設定的參數名，第二個變量爲要傳輸的數據
mav.addObject("user", user);
mav.addObject("test","測試");
mav.setViewName("user");
return mav;
}
1
2
3
4
5
6
7
8
9
10
前臺代碼如下所示：
<html>
<head></head>
<body>
<#-- 使用 ${user.username} 綁定從後臺提取的參數user的 username 的值-->
<h1>welcome ${user.username} !</h1><br>
<#--使用 ${test} 綁定從後臺提取的參數 test 的值-->
<h1>welcome ${test} !</h1><br>
</body>
</html>