SpringMVC+Thymeleaf 处理表单提交
thymleaf处理表单提交的方式和jsp有些类似,也有点不同之处,这里操作一个小Demo,并说明:
1.demo的结构图如下所示:
demo.gif
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>
这边我是用的表单的验证并返回相关的错误信息,配置完成后我们启动这个项目,访问:
image.png
这边我们如果输入相关的参数进行演示:
ff.gif
需要注意的地方:
引用命名空间 <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将被覆盖
123
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>12345
等同于以下方式:
<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>12345
也可以混用,如下:
<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>12345
如何没有与th:object结合使用，*{}与${}效果一样，因为其范围自动扩展到context。
12
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>12345678910
Thymeleaf支持相对路径和绝对路径
(orderId=${o.id})表示将括号内的内容作为URL参数处理
@{...}表达式中可以通过{orderId}访问Context中的orderId变量
@{/order}是Context相关的相对路径，在渲染时会自动添加上当前Web应用的Context名字，假设context名字为app，那么结果应该是/app/order
12345
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>1234
二.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
相比以上两种方式都可以实现字符串合并,但是,|…|中只能包含变量表达式${…}，不能包含其他常量、条件表达式等。
四.表达基本对象
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')}"123
五,表达式预处理
表达式预处理，它被定义在_之间：
#{selection.__${sel.code}__}1
${sel.code}将先被执行，结果(假如是AAA)将被看做表达式的一部分被执行
结果#{为selection.AAA}。
123
六,thymeleaf运算符
在表达式中可以使用各类算术运算符，例如+, -, *, /, %
th:with="isEven=(${prodStat.count} % 2 == 0)"1
逻辑运算符>, <, <=,>=，==,!=都可以使用
需要注意的是使用 > ,<, >=, <=时需要用它的HTML转义符(> gt; < lt; >= ge; gte; <= le; lte; == eq; != ne; neq;)
th:if="${prodStat.count} > 1"
th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"12
布尔运算符 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>1234567891011121314151617181920
被循环渲染的元素<tr>中加入th:each标签
th:each="prod : ${prods}"对集合变量prods进行遍历，对象prod在循环体中可通过表达式访问
123
八,thymeleaf条件求值
1,If/Unless
Thymeleaf中使用th:if和th:unless属性进行条件判断
设置标签只有在th:if中条件成立时才显示:
<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>1
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>12345
3.If-then-else: (if)?(then):else 三元运算符
三元运算控制class属性选择
<tr th:class="${row.even}? 'even' : 'odd'">1
三元运算嵌套
<tr th:class="${row.even}? (${row.first}? 'first' : 'even') : 'odd'">1
还可以省略else部分，当表达式结果为false，返回null，否则返回’alt’
<tr th:class="${row.even}? 'alt'">
...
</tr>123
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>123
等效于：
<p>Age: <span th:text="*{age != null}? *{age} : '(no age specified)'">27</span>.</p>1
条件表达式嵌套：
<p>Name: <span th:text="*{firstName} ?: (*{admin} ? 'Admin' : #{default.username})">Sebastian</span>.</p>1
九,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属性(例如,由于迭代)。
