Springboot 下 ModelAndView 的简单使用

最新推荐文章于 2024-04-17 12:03:07 发布

LoveInTheSky

最新推荐文章于 2024-04-17 12:03:07 发布

阅读量1w

点赞数 1

文章标签： Springboot ModelAndVIew

本文链接：https://blog.csdn.net/loveinthesky/article/details/102988891

版权

Springboot 下 ModelAndView的简单使用

文章目录

Springboot 下 ModelAndView的简单使用

本文简单介绍了在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>