Springboot 下 ModelAndView的简单使用

文章目录

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/**

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;
}

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;}

前台代码如下：

<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>

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;}

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;
}

前台代码如下所示：

<html>
<head></head><body><#-- 使用 ${user.username} 绑定从后台提取的参数user的 username 的值--><h1>welcome ${user.username} !</h1><br><#--使用 ${test} 绑定从后台提取的参数 test 的值--><h1>welcome ${test} !</h1><br></body>
</html>

3.前台——从后台提取复杂参数的处理

以前台从后台提取集合型参数数据为例，简要解释前台对这种参数进行的处理。重点在前台。

以 users.ftl 为例。

后台代码如下所示：

@RequestMapping("/list")
public ModelAndView users() {ModelAndView mav = new ModelAndView();List<User> users = userService.getUsers();mav.addObject("users", users);mav.setViewName("users");return mav;
}

前台代码如下所示

<div class="col-md-8">      <table class="table table-hover"><thead><th>ID</th><th>名称</th><th>密码</th><th>头像</th><th>删除</th><th>修改</th><th>头像</th></thead><tbody>
<#-- 对集合型参数的处理如下，通过 <#list> 标签来绑定后台传来的 users 参数-->
<#-- <#list users as user> users：后台传来的参数users。由于集合型参数，而进行数据渲染的时候操作的是集合中单个的对象，因此使用 “users as user” 将集合中的单个元素命名为 “user”，如下所示，再对 user 进行操作--><#list users as user><tr><td>${user.id}</td><td>${user.username}</td><td>${user.password}</td><td>${user.avatar}</td>
<#-- 在这里对前台调用后台接口的方式进行简要的说明，后台接口写好之后是通过具体的路径来进行调用的，因此在这里，可以直接通过href 标签，设定接口的路径直接进行接口的调用--><td><a href="/user/delete/${user.id}">删除</a></td><td><a href="/user/modify/${user.id}">修改</a></td><td><a href="/user/add_avatar/${user.id}">上传</a></td></tr></#list></tbody></table>
</div>