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

时间:2022-08-23 10:54:03

SpringMVC+Thymeleaf 处理表单提交

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

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

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

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

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

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

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

需要注意的地方:

引用命名空间 <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} &gt; "
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属性(例如,由于迭代)。