文章目录
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>