SpringMVC视图

SpringMVC的视图是指在处理请求后，返回给用户的最终呈现内容。视图负责将模型数据（通常是从控制器中获取的）渲染成用户可以理解的格式，比如HTML、JSON、XML等。SpringMVC通过视图解析器来确定使用哪个视图来渲染响应。

SpringMVC视图的组成

在SpringMVC中，视图的主要组成部分包括：

  1. 视图解析器：负责将逻辑视图名解析为实际的视图实现。常用的视图解析器有：
  • InternalResourceViewResolver：用于解析JSP视图。
  • BeanNameViewResolver：根据视图的Bean名称来解析视图。
  • ContentNegotiatingViewResolver：根据请求的内容类型来选择视图。
  1. 视图类型：
  • JSP：最常用的视图类型，使用JavaServer Pages技术。
  • Thymeleaf：一种现代的服务器端Java模板引擎，支持HTML5。
  • Freemarker：一种基于模板的视图技术，适合生成文本输出。
  • JSON/XML：用于RESTful服务，直接返回数据格式。
  1. 模型数据：视图通常会使用控制器传递的模型数据来填充动态内容。模型数据可以通过Model或ModelAndView对象传递。
  2. 视图的渲染：视图在渲染时会使用模型数据生成最终的响应内容，并将其返回给客户端。

如何设计一个SpringMVC视图？

设计一个SpringMVC视图涉及多个步骤，从选择视图技术到配置视图解析器。以下是一个基本的设计流程：

  1. 选择视图技术

首先，决定使用哪种视图技术。常见的选择包括：

  • JSP：适合传统的Java Web应用。
  • Thymeleaf：适合现代Web应用，支持HTML5。
  • Freemarker：适合需要复杂模板的场景。
  • JSON/XML：适合RESTful API。
  1. 创建视图文件

根据选择的视图技术，创建相应的视图文件。例如，如果选择JSP，创建一个index.jsp文件：

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <html>
    <head>
        <title>SpringMVC Example</title>
    </head>
    <body>
        <h1>Hello, ${name}!</h1>
    </body>
    </html>
  1. 配置视图解析器

在Spring配置文件中配置视图解析器，以便Spring能够找到视图文件。例如，如果使用JSP，可以在applicationContext.xml中添加以下配置：

<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/views/" />
        <property name="suffix" value=".jsp" />
    </bean>
  1. 创建控制器

创建一个控制器来处理请求并返回视图。控制器将模型数据传递给视图。例如：

import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.GetMapping;
    
    @Controller
    public class HelloController {
    
        @GetMapping("/hello")
        public String hello(Model model) {
            model.addAttribute("name", "World");
            return "index"; // 返回逻辑视图名
        }
    }
  1. 配置DispatcherServlet

确保在web.xml中配置了DispatcherServlet，以便Spring能够处理请求：

<servlet>
        <servlet-name>dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
  1. 运行应用

启动应用服务器，访问/hello路径，SpringMVC将处理请求并返回渲染后的视图。

  1. 进一步优化

根据需求，您可以进一步优化视图设计，例如：

  • 使用模板引擎的特性（如Thymeleaf的条件渲染）。
  • 实现国际化支持。
  • 处理异常和错误视图。

Thymeleaf视图

当控制器方法所设置的视图名称没有任何前缀的时候，此时的视图名称会被SpringMVC配置文件中所配置的视图解析器解析，视图名称拼接视图前缀和视图后所得到的最终路径，会通过转发的方式实现跳转。

@RequestMapping("/testHello")
public String testHello(){
	return "hello";
}

重定向视图

SpringMVC中默认的重定向视图是RedirectView

当控制器方法中所设置的视图名称以"redirect:"为前缀时，创建RedirectView视图，此时的视图名称不会被SpringMVC配置文件中所配置的视图解析器解析，而是会将前缀"redirect:"去掉，剩余部分作为最终路径通过重定向的方式实现跳转

例如"redirect:/"，“redirect:/employee”

@RequestMapping("/testRedirect")
public String testRedirect(){
	return "redirect:/testHello";
}

视图控制器view - controller

当控制器方法中，仅仅用来实现页面跳转，即只需要设置视图名称时，可以将处理器方法使用view-controller标签进行表示。

<!--
    path：设置处理的请求地址
    view-name：设置请求地址所对应的视图名称
    视图控制权 ：为当前的请求直接设置视图名称实现页面跳转
-->
<mvc:view-controller path="/testView" view-name="success"></mvc:view-controller>

Restful

RESTful（Representational State Transfer）是一种架构风格，主要用于网络应用程序的设计。它通过一组约定的原则和约束，利用HTTP协议来实现客户端与服务器之间的通信。RESTful API通常使用HTTP方法（如GET、POST、PUT、DELETE等）来操作资源，资源通常以JSON或XML格式进行表示。

Restful的基本原则：

  1. 无状态性：每个请求都应包含所有必要的信息，以便服务器能够理解和处理请求。服务器不应存储客户端的状态信息。
  2. 资源的标识：每个资源都应有一个唯一的URI（统一资源标识符）来标识。
  3. 统一接口：通过统一的接口来简化架构，通常使用HTTP方法来操作资源。
  4. 可缓存性：响应应标明是否可缓存，以提高性能。
  5. 分层系统：客户端不需要知道它与服务器之间的具体结构，可以通过中间层（如负载均衡器、缓存等）进行交互。

Restful的实现：

  • 具体说，就是 HTTP 协议里面，四个表示操作方式的动词：GET、POST、PUT、DELETE。
  • 它们分别对应四种基本操作：GET 用来获取资源，POST 用来新建资源，PUT 用来更新资源，DELETE用来删除资源。
  • REST 风格提倡 URL 地址使用统一的风格设计，从前到后各个单词使用斜杠分开，不使用问号键值对方式携带请求参数，而是将要发送给服务器的数据作为 URL 地址的一部分，以保证整体风格的一致性。

操作

传统方式

REST风格

查询操作

getUserById?id=1

user/1–>get请求方式

保存操作

saveUser

user–>post请求方式

删除操作

deleteUser?id=1

user/1–>delete请求方式

更新操作

updateUser

user–>put请求方式

HiddenHttpMethodFilter

由于浏览器只支持发送get和post方式的请求，那么该如何发送put和delete请求呢？

SpringMVC 提供了 HiddenHttpMethodFilter 帮助我们将 POST 请求转换为 DELETE 或 PUT 请求HiddenHttpMethodFilter 处理put和delete请求的条件：

  • a>当前请求的请求方式必须为post
  • b>当前请求必须传输请求参数_method

满足以上条件，HiddenHttpMethodFilter 过滤器就会将当前请求的请求方式转换为请求参数 method的值，因此请求参数_method的值才是最终的请求方式

在web.xml中注册HiddenHttpMethodFilter

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <!--    设置SpringMVC的编码集过滤器-->
    <filter>
        <filter-name>CharacterEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>

        <init-param>
            <param-name>forceEncoding</param-name>
            <param-value>true</param-value>
        </init-param>

    </filter>

<!--    设置处理请求的过滤器 在发现put修改值的时候，我们发现他走的get方法而不是put方法

-->
    <filter>
        <filter-name>HiddenHttpMethodFilter</filter-name>
        <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
    </filter>

    <filter-mapping>
        <filter-name>HiddenHttpMethodFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>


    <filter-mapping>
        <filter-name>CharacterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <!--    设置SpringMVC的前端控制权-->

    <servlet>
        <servlet-name>SpringMVC</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc.xml</param-value>
        </init-param>
        <!--        启动加载，防止加载时间过长-->
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>SpringMVC</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
</web-app>

目前为止，SpringMVC中提供了两个过滤器：CharacterEncodingFilter和HiddenHttpMethodFilter

在web.xml中注册时，必须先注册CharacterEncodingFilter，再注册HiddenHttpMethodFilter

原因：

  • 在 CharacterEncodingFilter 中通过 request.setCharacterEncoding(encoding) 方法设置字符集的
  • request.setCharacterEncoding(encoding) 方法要求前面不能有任何获取请求参数的操作
  • 而 HiddenHttpMethodFilter 恰恰有一个获取请求方式的操作：
String paramValue = request.getParameter(this.methodParam);

Html文件：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>

<h1>index.html</h1>
<a th:href="@{/user}">查询所有的用户信息</a>
<hr>
<a th:href="@{/user/520}">根据ID查询用户信息</a>
<hr> 添加用户信息
<form th:action="@{/user}" method="post">
    <input type="submit" value="添加用户信息">
</form>
<hr>修改用户信息
<form th:action="@{/user}" method="post">
<!--    这种方式才能发送put请求-->
    <input type="text" name="_method" value="put">
    <input type="submit" value="修改用户信息">
</form>
<hr> 删除用户信息

<form th:action="@{/user/520}" method="post">
    <input type="hidden" name="_method" value="delete">
    <input type="submit" value="删除用户信息">
</form>


</body>
</html>

控制器

@RestController
public class TestRestController {

    @RequestMapping(value = "/user",method = RequestMethod.GET)
    public String getUser(){
        System.out.println("findAll User from /user->get");
        return "success";
    }

    @RequestMapping(value = "/user/{id}",method = RequestMethod.GET)
    public String getUserById(@PathVariable("id") String id){
        System.out.println("findById from /user=>" + id +"->getById");
        return "success";
    }

    @RequestMapping(value = "/user",  method = RequestMethod.POST)
    public String addUser(){
        System.out.println("add user  from /user->post");
        return "success";
    }

    @RequestMapping(value = "/user",  method = RequestMethod.PUT)
    public String updateUser(){
        System.out.println("update user from /user->put");
        return "success";
    }

    @RequestMapping(value = "/user/{id}",  method = RequestMethod.DELETE)
    public String deleteUser(@PathVariable("id") String id){
        System.out.println("delete user from /user/"+id+"->delete");
        return "success";
    }
}

一个Restful案例

创建一个实体类

public class Employee {
    private Integer id;
    private String lastName;
    private String email;
    //1 male, 0 female
    private Integer gender;
    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }
    public String getLastName() {
        return lastName;
    }
    public void setLastName(String lastName) {
        this.lastName = lastName;
    }
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
    public Integer getGender() {
        return gender;
    }
    public void setGender(Integer gender) {
        this.gender = gender;
    }
    public Employee(Integer id, String lastName, String email, Integer gender) {
        super();
        this.id = id;
        this.lastName = lastName;
        this.email = email;
        this.gender = gender;
    }
    public Employee() {
    }
}

准备dao模拟数据

import java.util.Collection;
import java.util.HashMap;
import java.util.Map;
import com.miaow.mvc.bean.Employee;
import org.springframework.stereotype.Repository;
@Repository
public class EmployeeDao {
    private static Map<Integer, Employee> employees = null;
    static{
        employees = new HashMap<Integer, Employee>();
        employees.put(1001, new Employee(1001, "E-AA", "aa@163.com", 1));
        employees.put(1002, new Employee(1002, "E-BB", "bb@163.com", 1));
        employees.put(1003, new Employee(1003, "E-CC", "cc@163.com", 0));
        employees.put(1004, new Employee(1004, "E-DD", "dd@163.com", 0));
        employees.put(1005, new Employee(1005, "E-EE", "ee@163.com", 1));
    }
    private static Integer initId = 1006;
    public void save(Employee employee){
        if(employee.getId() == null){
            employee.setId(initId++);
        }
        employees.put(employee.getId(), employee);
    }
    public Collection<Employee> getAll(){
        return employees.values();
    }
    public Employee get(Integer id){
        return employees.get(id);
    }
    public void delete(Integer id){
        employees.remove(id);
    }
}

功能菜单

功能

URL 地址

请求方式

访问首页√

/

GET

查询全部数据√

/employee

GET

删除√

/employee/2

DELETE

跳转到添加数据页面√

/toAdd

GET

执行保存√

/employee

POST

跳转到更新数据页面√

/employee/2

GET

执行更新√

/employee

PUT

具体功能：访问首页

配置view-controller
springmvc.xml文件

<mvc:view-controller path="/" view-name="index"/>
创建首页：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8" >
        <title>Title</title>
    </head>
    <body>
        <h1>首页</h1>
        <a th:href="@{/employee}">访问员工信息</a>
    </body>
</html>
查询所有员工数据
@RequestMapping(value = "/employee", method = RequestMethod.GET)
public String getEmployeeList(Model model){
    Collection<Employee> employeeList = employeeDao.getAll();
    model.addAttribute("employeeList", employeeList);
    return "employee_list";
}

创建employee_list.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Employee Info</title>
        <script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
    </head>
    <body>
        <table border="1" cellpadding="0" cellspacing="0" style="text-align:center;" id="dataTable">
            <tr>
                <th colspan="5">Employee Info</th>
            </tr>
            <tr>
                <th>id</th>
                <th>lastName</th>
                <th>email</th>
                <th>gender</th>
                <th>options(<a th:href="@{/toAdd}">add</a>)</th>
            </tr>
            <tr th:each="employee : ${employeeList}">
                <td th:text="${employee.id}"></td>
                <td th:text="${employee.lastName}"></td>
                <td th:text="${employee.email}"></td>
                <td th:text="${employee.gender}"></td>
                <td>
                    <a class="deleteA" @click="deleteEmployee"
                       th:href="@{'/employee/'+${employee.id}}">delete</a>
                    <a th:href="@{'/employee/'+${employee.id}}">update</a>
                </td>
            </tr>
        </table>
    </body>
</html>
删除功能的实现
<!-- 作用：通过超链接控制表单的提交，将post请求转换为delete请求 -->
<form id="delete_form" method="post">
    <!-- HiddenHttpMethodFilter要求：必须传输_method请求参数，并且值为最终的请求方式 -->
    <input type="hidden" name="_method" value="delete"/>
</form>

引入vue.js

<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>

删除超链接

<a class="deleteA" @click="deleteEmployee"th:href="@{'/employee/'+${employee.id}}">delete</a>

通过vue处理点击事件

<script type="text/javascript">
    var vue = new Vue({
        el:"#dataTable",
        methods:{
            //event表示当前事件
            deleteEmployee:function (event) {
                //通过id获取表单标签
                var delete_form = document.getElementById("delete_form");
                //将触发事件的超链接的href属性为表单的action属性赋值
                delete_form.action = event.target.href;
                //提交表单
                delete_form.submit();
                //阻止超链接的默认跳转行为
                event.preventDefault();
            }
        }
    });
</script>

控制器方法：

@RequestMapping(value = "/employee/{id}", method = RequestMethod.DELETE)
public String deleteEmployee(@PathVariable("id") Integer id){
    employeeDao.delete(id);
    return "redirect:/employee";
}
跳转到添加数据页面：
<mvc:view-controller path="/toAdd" view-name="employee_add"></mvc:view-controller>

创建employee_add.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Add Employee</title>
    </head>
    <body>
        <form th:action="@{/employee}" method="post">
            lastName:<input type="text" name="lastName"><br>
            email:<input type="text" name="email"><br>
            gender:<input type="radio" name="gender" value="1">male
            <input type="radio" name="gender" value="0">female<br>
            <input type="submit" value="add"><br>
        </form>
    </body>
</html>
执行保存功能
@RequestMapping(value = "/employee", method = RequestMethod.POST)
public String addEmployee(Employee employee){
    employeeDao.save(employee);
    return "redirect:/employee";
}
跳转到更新数据页面
<a th:href="@{'/employee/'+${employee.id}}">update</a>

控制器方法

@RequestMapping(value = "/employee/{id}", method = RequestMethod.GET)
public String getEmployeeById(@PathVariable("id") Integer id, Model model){
    Employee employee = employeeDao.get(id);
    model.addAttribute("employee", employee);
    return "employee_update";
}

创建employee_update.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Update Employee</title>
    </head>
    <body>
        <form th:action="@{/employee}" method="post">
            <input type="hidden" name="_method" value="put">
            <input type="hidden" name="id" th:value="${employee.id}">
            lastName:<input type="text" name="lastName" th:value="${employee.lastName}">
            <br>
            email:<input type="text" name="email" th:value="${employee.email}"><br>
            <!--
                th:field="${employee.gender}"可用于单选框或复选框的回显
                若单选框的value和employee.gender的值一致，则添加checked="checked"属性
			-->
            gender:<input type="radio" name="gender" value="1"th:field="${employee.gender}">male
            <input type="radio" name="gender" value="0"th:field="${employee.gender}">female<br>
            <input type="submit" value="update"><br>
        </form>
    </body>
</html>

执行更新方法

@RequestMapping(value = "/employee", method = RequestMethod.PUT)
public String updateEmployee(Employee employee){
    employeeDao.save(employee);
    return "redirect:/employee";
}