第6章—渲染web视图—SpringMVC+Thymeleaf 处理表单提交

SpringMVC+Thymeleaf 处理表单提交

thymleaf处理表单提交的方式和jsp有些类似,也有点不同之处,这里操作一个小Demo,并说明:

1.demo的结构图如下所示:

pom.xml:

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com</groupId>
  <artifactId>thymleaf-form</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>thymleaf-form Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.7</maven.compiler.source>
    <maven.compiler.target>1.7</maven.compiler.target>
  </properties>

  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>

    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-api</artifactId>
      <version>1.7.12</version>
    </dependency>
    <dependency>
      <groupId>ch.qos.logback</groupId>
      <artifactId>logback-core</artifactId>
      <version>1.1.1</version>
      <scope>provided</scope>
    </dependency>
    <!--实现slf4j接口并整合-->
    <dependency>
      <groupId>ch.qos.logback</groupId>
      <artifactId>logback-classic</artifactId>
      <version>1.1.1</version>
      <scope>provided</scope>
    </dependency>

    <!--druid==>阿里巴巴数据库连接池-->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.0.25</version>
    </dependency>
    <!--2.dao框架:MyBatis依赖-->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.3.0</version>
    </dependency>
    <!--mybatis自身实现的spring整合依赖-->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.3.2</version>
    </dependency>

    <!--3.Servlet web相关依赖-->
    <dependency>
      <groupId>taglibs</groupId>
      <artifactId>standard</artifactId>
      <version>1.1.2</version>
    </dependency>
    <dependency>
      <groupId>jstl</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>

    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.5.4</version>
    </dependency>

    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
      <scope>provided</scope>
    </dependency>

    <!--4:spring依赖-->
    <!--1)spring核心依赖-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-core</artifactId>
      <version>4.3.14.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-beans</artifactId>
      <version>4.3.14.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>4.3.14.RELEASE</version>
    </dependency>
    <!--2)spring dao层依赖-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>4.3.14.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-tx</artifactId>
      <version>4.3.14.RELEASE</version>
    </dependency>
    <!--3)springweb相关依赖-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>4.3.14.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>4.3.14.RELEASE</version>
    </dependency>
    <!--4)spring test相关依赖-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-test</artifactId>
      <version>4.3.14.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.35</version>
      <scope>runtime</scope>
    </dependency>

    <!--Aop要导入的包-->
    <dependency>
      <groupId>org.aspectj</groupId>
      <artifactId>aspectjweaver</artifactId>
      <version>1.8.9</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.json/json -->
    <dependency>
      <groupId>org.json</groupId>
      <artifactId>json</artifactId>
      <version>20170516</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf -->
    <dependency>
      <groupId>org.thymeleaf</groupId>
      <artifactId>thymeleaf-spring4</artifactId>
      <version>3.0.9.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>javax.validation</groupId>
      <artifactId>validation-api</artifactId>
      <version>2.0.1.Final</version>
    </dependency>
      <dependency>
          <groupId>com.google.guava</groupId>
          <artifactId>guava</artifactId>
          <version>18.0</version>
      </dependency>
    <dependency>
      <groupId>com.google.guava</groupId>
      <artifactId>guava</artifactId>
      <version>18.0</version>
    </dependency>
    <dependency>
      <groupId>org.hibernate</groupId>
      <artifactId>hibernate-validator</artifactId>
      <version>5.3.6.Final</version>
    </dependency>
  </dependencies>

  <build>
    <finalName>thymleaf-form</finalName>
    <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
      <plugins>
        <plugin>
          <artifactId>maven-clean-plugin</artifactId>
          <version>3.0.0</version>
        </plugin>
        <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
        <plugin>
          <artifactId>maven-resources-plugin</artifactId>
          <version>3.0.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-compiler-plugin</artifactId>
          <version>3.7.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-surefire-plugin</artifactId>
          <version>2.20.1</version>
        </plugin>
        <plugin>
          <artifactId>maven-war-plugin</artifactId>
          <version>3.2.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-install-plugin</artifactId>
          <version>2.5.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-deploy-plugin</artifactId>
          <version>2.8.2</version>
        </plugin>
      </plugins>
    </pluginManagement>
  </build>
</project>

FormController:

package com.home.controller;

import com.home.entity.Animal;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.ui.ModelMap;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.*;

import javax.validation.Valid;

@Controller
@RequestMapping("/")
public class FormController {

    @RequestMapping("/shouye")
    public String shouye(){

        return "shouye";
    }

    @RequestMapping("/login")

    public  String login(ModelMap map){
        map.put("title","这是标题");

        Animal animal = new Animal();

        animal.setId(1);
        animal.setName("熊猫");

        animal.setCount(5);

        map.put("animal", animal);
        return "login";
    }

    @RequestMapping(value="/add",method=RequestMethod.POST)
    public String add( Model model,@Valid Animal animal,BindingResult result){
        String name = animal.getName();
        Integer count = animal.getCount();
        model.addAttribute("name",name);
        model.addAttribute("count",count);

        if(result.hasErrors()){
            model.addAttribute("MSG", "出错啦！");
//            model.addAttribute("result",result);
            String defaultMessage = result.getFieldError().getDefaultMessage();
            model.addAttribute("defaultMessage",defaultMessage);
        }else{
            model.addAttribute("MSG", "提交成功！");
        }

        return "result";
    }

}

Animal:

package com.home.entity;

import org.hibernate.validator.constraints.Range;

import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;

public class Animal {

    @NotNull(message="id: 不能为空")
    private  Integer id;

    @Size(max = 10, message="备注: 长度不能超过10个字符")
    private  String name;

    @Range(min = 1, message="数量: 必须大于0")
    @NotNull(message="数量: 不能为空")
    private   Integer count;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getCount() {
        return count;
    }

    public void setCount(Integer count) {
        this.count = count;
    }

    @Override
    public String toString() {
        return "Animal{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", count=" + count +
                '}';
    }
}

applicationContext-mvc.xml:

<?xml version="1.0" encoding="UTF-8"?>
<beans
        xmlns="http://www.springframework.org/schema/beans"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xmlns:mvc="http://www.springframework.org/schema/mvc"
        xmlns:context="http://www.springframework.org/schema/context"
        xmlns:p="http://www.springframework.org/schema/p"
        xsi:schemaLocation="http://www.springframework.org/schema/beans
    http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
    http://www.springframework.org/schema/mvc
    http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd
    http://www.springframework.org/schema/context
    http://www.springframework.org/schema/context/spring-context-4.3.xsd">

    <!-- 开启注解. 扫描 -->
    <context:annotation-config></context:annotation-config>
    <context:component-scan base-package="com.home.controller"></context:component-scan>

    <!-- 过滤掉js, jpg, png, css, 静态文件 -->
    <mvc:default-servlet-handler/>

    <!-- 开启mvc -->
    <mvc:annotation-driven />

    <!-- 地址解析器  -->
    <!--<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">-->
        <!--<property name="prefix" value="/WEB-INF/views/"></property>-->
        <!--<property name="suffix" value=".jsp"></property>-->
    <!--</bean>-->

    <!--viewResolver-->
    <bean id="viewResolver" class="org.thymeleaf.spring4.view.ThymeleafViewResolver">
        <property name="order" value="1"/>
        <property name="characterEncoding" value="UTF-8"/>
        <property name="templateEngine" ref="templateEngine"/>
    </bean>
    <!-- templateEngine -->
    <bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
        <property name="templateResolver" ref="templateResolver"/>
    </bean>
    <bean id="templateResolver" class="org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver">
        <property name="prefix" value="/WEB-INF/templates/"/>
        <property name="suffix" value=".html"/>
        <property name="templateMode" value="HTML5"/>
        <property name="characterEncoding" value="UTF-8"/>
    </bean>

</beans>

注意这里的的跳转路径由原来的jsp改为了template的文件夹的路径,并且将characterEncoding统一为了UTF-8,防止出现中文乱码,当然web.xml中也要设置,如下可以见:

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
         xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

  <!-- 读取除了mvc外的配置文件 -->
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:/applicationContext-mvc.xml</param-value>
  </context-param>

  <!-- 整个web容器的动向由这个监听器进行监听. 这个监听器可以监听项目的启动. 从而直接加载核心配置文件 -->
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>

  <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>
  <filter-mapping>
    <filter-name>characterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

  <servlet>
    <servlet-name>springMVC</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <!-- 给出spring的路径 -->
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:applicationContext-mvc.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup><!-- 当web容器加载的时候, 初始化spring -->
  </servlet>
  <servlet-mapping>
    <servlet-name>springMVC</servlet-name>
    <url-pattern>/</url-pattern><!-- 所有 -->
  </servlet-mapping>
  <listener>
    <listener-class>org.springframework.web.context.request.RequestContextListener</listener-class>
  </listener>

</web-app>

login.html:

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

<form th:action="@{/add}" th:method="post" th:object="${animal}" >

    <table border="1">
       <tr>
            <th>动物id</th>
            <th>动物名字</th>
            <th>动物数量</th>
            <th>动作</th>
        </tr>
        <tr>
        <td><input type="text" th:field="*{id}" /></td>
        <td><input type="text" th:field="*{name}" /></td>
        <td><input type="text" th:field="*{count}" /></td>
        <td><input type="submit"  value="提交" /></td>
        </tr>
    </table>
</form>
</body>
</html>

result.html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p th:text="${name}"></p>
<p th:text="${count}"></p>
<p th:text="${MSG}"></p>
<p th:text="${result}"></p>
<p style="color: red" th:text="${defaultMessage}"></p>
</body>
</html>

这边我是用的表单的验证并返回相关的错误信息,配置完成后我们启动这个项目,访问:

http://localhost:8080/login

这边我们如果输入相关的参数进行演示:

需要注意的地方:

引用命名空间 <html xmlns:th="http://www.thymeleaf.org">

如果我们刚开始没有值,也可以像jsp那样进行编写相关的参数,然后提交,如下:

<form th:action="@{/add}" th:method="post" >
    <table border="1">
        <tr>
            <th>动物id</th>
            <th>动物名字</th>
            <th>动物数量</th>
            <th>动作</th>
        </tr>
        <tr>
            <td><input type="text" name="id" /></td>
            <td><input type="text" name="name" /></td>
            <td><input type="text" name="count"/></td>
            <td><input type="submit"  value="提交" /></td>
        </tr>
    </table>
</form>

日期的表达:

controller层增加如下代码:

map.put("today",new Date());

html中增加如下代码:

<span th:text="${#calendars.format(today,'dd MMMM yyyy')}">13 May 2011</span>

附相关代码的查看地址:

其它公共对象参考: http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-a-expression-basic-objects

重点:thymeleaf与jsp相关的对照:

1,变量表达式

Thymeleaf模板引擎在进行模板渲染时，还会附带一个Context存放进行模板渲染的变量，在模板中定义的表达式本质上就是从Context中获取对应的变量的值

<p>Today is: <span th:text="${day}">2 November 2016</span>.</p>1

假设day的值为2016年11月2日，那么渲染结果为：<p>Today is: 2016年11月2日.</p>。
注意 : 渲染后,模板中span值2 November 2016将被覆盖

2,选择(星号)表达式

可以简单理解为内层是对外层对象的引用

<div th:object="${session.user}">
    <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
    <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
    <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
</div>

等同于以下方式:

<div>
  <p>Name: <span th:text="${session.user.firstName}">Sebastian</span>.</p>
  <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
  <p>Nationality: <span th:text="${session.user.nationality}">Saturn</span>.</p>
</div>

也可以混用,如下:

<div th:object="${session.user}">
  <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
  <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
  <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
</div>

如何没有与th:object结合使用，*{}与${}效果一样，因为其范围自动扩展到context。

3,URL表达式

URL表达式指的是把一个有用的上下文或会话信息添加到URL，这个过程经常被叫做URL重写。

Thymeleaf对于URL的处理是通过语法@{…}来处理的

<!— 绝对路径 —>
<!-- Will produce 'http://localhost:8080/gtvg/order/details?orderId=3' (plus rewriting) -->
<a href="details.html" th:href="@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view</a>

<!— 相对路径 带参数—>
<!-- Will produce '/gtvg/order/details?orderId=3' (plus rewriting) -->
<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>

<!-- Will produce '/gtvg/order/3/details' (plus rewriting) -->
<a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>

Thymeleaf支持相对路径和绝对路径
(orderId=${o.id})表示将括号内的内容作为URL参数处理
@{...}表达式中可以通过{orderId}访问Context中的orderId变量
@{/order}是Context相关的相对路径，在渲染时会自动添加上当前Web应用的Context名字，假设context名字为app，那么结果应该是/app/order

4,文字国际化表达式

文字国际化表达式允许我们从一个外部文件获取区域文字信息(.properties)

使用Key-Value方式，还可以提供一组参数(可选).

.properties

#{main.title}
#{message.entrycreated(${entryId})}12

模板引用:

<table>
    <th th:text="#{header.address.city}">...</th>
    <th th:text="#{header.address.country}">...</th>
</table>

---

二.thymeleaf-字面值

　　1.文本文字：’one text’, ‘Another one!’,…

　　2.文字数量：0, 34, 3.0, 12.3,…

　　3.布尔型常量：true, false

　　4.空的文字：null

　　5.文字标记：one, sometext, main,…

---

三：thymeleaf-文本处理

1.字符串拼接：+

<span th:text="'Welcome to our application, ' + ${user.name} + '!'">1

2.文字替换：|The name is ${name}|

<span th:text="|Welcome to our application, ${user.name}!|">

相比以上两种方式都可以实现字符串合并,但是,|…|中只能包含变量表达式${…}，不能包含其他常量、条件表达式等。

---

四.表达基本对象

　　1.#ctx:上下文对象

　　2.#vars:上下文变量

　　3.#locale:上下文语言环境

　　4.#httpServletRequest:(只有在Web上下文)HttpServletRequest对象

　　5.#httpSession:(只有在Web上下文)HttpSession对象。

例如:

<span th:text="${#locale.country}">US</span>.

th:text="${#calendars.format(today,'dd MMMM yyyy')}"

---

五,表达式预处理

表达式预处理，它被定义在_之间：

#{selection.__${sel.code}__}

${sel.code}将先被执行，结果(假如是AAA)将被看做表达式的一部分被执行
结果#{为selection.AAA}。
123

---

六,thymeleaf运算符

在表达式中可以使用各类算术运算符，例如+, -, *, /, %

th:with="isEven=(${prodStat.count} % 2 == 0)"

逻辑运算符>, <, <=,>=，==,!=都可以使用

需要注意的是使用 > ,<, >=, <=时需要用它的HTML转义符(> gt; < lt; >= ge; gte; <= le; lte; == eq; != ne; neq;)

th:if="${prodStat.count} > "
th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"

布尔运算符 and,or

---

七,thymeleaf循环

数据集合必须是可以遍历的，使用th:each标签：

<body>
  <h1>Product list</h1>

  <table>
    <tr>
      <th>NAME</th>
      <th>PRICE</th>
      <th>IN STOCK</th>
    </tr>
    <tr th:each="prod : ${prods}">
      <td th:text="${prod.name}">Onions</td>
      <td th:text="${prod.price}">2.41</td>
      <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
    </tr>
  </table>

  <p>
    <a href="../home.html" th:href="@{/}">Return to home</a>
  </p>
</body>

被循环渲染的元素<tr>中加入th:each标签
th:each="prod : ${prods}"对集合变量prods进行遍历，对象prod在循环体中可通过表达式访问

---

八,thymeleaf条件求值

1,If/Unless

Thymeleaf中使用th:if和th:unless属性进行条件判断

设置标签只有在th:if中条件成立时才显示:

<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>

th:unless与th:if相反，表达式条件不成立时显示内容。

2,Switch

多路选择Switch结构,默认属性default,用*表示

<div th:switch="${user.role}">
  <p th:case="'admin'">User is an administrator</p>
  <p th:case="#{roles.manager}">User is a manager</p>
  <p th:case="*">User is some other thing</p>
</div>

3.If-then-else: (if)?(then):else 三元运算符

三元运算控制class属性选择

 <tr th:class="${row.even}? 'even' : 'odd'">

三元运算嵌套

<tr th:class="${row.even}? (${row.first}? 'first' : 'even') : 'odd'">

还可以省略else部分，当表达式结果为false，返回null，否则返回’alt’

<tr th:class="${row.even}? 'alt'">
    ...
</tr>

4.If-then: (if) ? (then) ,省略了else部分，如果条件不成立，返回null

如果第一个表达式的计算结果为null，则取第二个表达式的结果

<div th:object="${session.user}">
    <p>Age: <span th:text="*{age}?: '(no age specified)'">27</span>.</p>
</div>

等效于：

<p>Age: <span th:text="*{age != null}? *{age} : '(no age specified)'">27</span>.</p>

条件表达式嵌套：

<p>Name: <span th:text="*{firstName} ?: (*{admin} ? 'Admin' : #{default.username})">Sebastian</span>.</p>

---

九,Thymeleaf-Utilities

Thymeleaf提供了套Utility对象,内置于Context中,可通过#直接访问：

- #dates: java.util的实用方法。对象:日期格式、组件提取等.
- #calendars: 类似于#日期,但对于java.util。日历对象
- #numbers: 格式化数字对象的实用方法。
- #strings:字符串对象的实用方法:包含startsWith,将/附加等。
- #objects: 实用方法的对象。
- #bools: 布尔评价的实用方法。
- #arrays: 数组的实用方法。
- #lists: list集合。
- #sets:set集合。
- #maps: map集合。
- #aggregates: 实用程序方法用于创建聚集在数组或集合.
- #messages: 实用程序方法获取外部信息内部变量表达式,以同样的方式,因为他们将获得使用# {…}语法
- #ids: 实用程序方法来处理可能重复的id属性(例如,由于迭代)。