1. SpringMVC简单回顾
1. idea使用maven创建web项目
2. 在pom.xml中加入springmvc所用的依赖
3. 在resources (java项目的src)创建springmvc.xml
4. 配置web.xml
5. 在springmvc中开始包扫描,开启注解驱动,配置视图解析器。
6. 定义一个controller类
6.1 定义一个方法,返回字符串。
6.2 创建一个页面。
7. 启动tomcat访问controller配的requestMapper访问页面。
2. thymeleaf
github源码(day50-springmvc):https://github.com/1196557363/ideaMavenProject.git
1. 需要导入thymeleaf依赖包
<!-- thymeleaf依赖包 -->
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.0.11.RELEASE</version>
</dependency>
<!-- thymeleaf与spring整合依赖包 -->
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring5</artifactId>
<version>3.0.11.RELEASE</version>
</dependency>
3. 配置thymeleaf视图解析器
<bean id="templateResolver" class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver">
<!--前缀配置-->
<property name="prefix" value="/WEB-INF/view/"></property>
<!--后缀配置-->
<property name="suffix" value=".html"></property>
<!--模板类型-->
<property name="templateMode" value="HTML"></property>
<!--不使用缓存-->
<property name="cacheable" value="false"></property>
<!--编码类型-->
<property name="characterEncoding" value="UTF-8"></property>
</bean>
<!--模板引擎配置-->
<bean id="templateEngine" class="org.thymeleaf.spring5.SpringTemplateEngine">
<property name="templateResolver" ref="templateResolver"></property>
</bean>
<!--视图处理器-->
<bean class="org.thymeleaf.spring5.view.ThymeleafViewResolver">
<property name="templateEngine" ref="templateEngine"></property>
<property name="characterEncoding" value="UTF-8"></property>
</bean>
3. 定义TestController
@Controller
public class TestController {
@RequestMapping("/thymeleaf")
public String thymeleaf(ModelMap map) {
map.put("name", "jieKaMi");
return "thymeleaf";
}
}
4. 创建一个index.html页面
<!DOCTYPE html>
<!-- 导入thymeleaf约束,thymeleaf标签必须结合html标签一起使用-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 通过th访问访问 -->
<span th:text="${name}"></span>
<body>
</html>
5. 在springmvc中处理静态资源文件
<!-- 判断访问的地址和配置是否匹配,如果匹配到了当成静态资源,直接放行 -->
<mvc:default-servlet-handler />
6. 配置好tomcat后,运行tomcat。 访问 http://localhost:8080/day50-springmvc/thymeleaf
2.1 thymeleaf案例
2.1.1 输出对象
1. 定义一个User对象
/**
* 定义user对象,声明name和age,提供构造方法和getter setter方法
*/
public class User {
private String name;
private int age;
public User() { }
public User(String name, int age) {
this.name = name;
this.age = age;
}
public String getName() { return name; }
public void setName(String name) { this.name = name; }
public int getAge() {return age; }
public void setAge(int age) { this.age = age; }
}
2. 在controller中创建User对象并存入ModekMap中
@RequestMapping("/user")
public String user(ModelMap map) {
map.put("user", new User("jieKaMi", 22));
return "user";
}
3. 在user.html获取对象内容
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 使用th输入user的信息-->
名字 : <span th:text="${user.name}"></span><br />
年龄 : <span th:text="${user.age}"></span>
</body>
</html>
2.1.2 th:text和th:value的区别
<!-- 自己测 -->
<input id='name' type="text" th:value="${user.name}"><br />
<input id='age' type="text" th:text="${user.age}">
2.1.3 th:each的使用
1. 定义User对象
2. 在controller中定义一个存有10个User对象List,存入ModelMap中
@RequestMapping("/each")
public String each(ModelMap map) {
List<User> userList = new ArrayList<User>();
for(int i = 0; i < 10; i++) {
userList.add(new User("jieKaMi" + i, ((int)(Math.random()*20)+1)));
}
System.out.println(userList);
map.put("userList", userList);
return "each";
}
3. 在页面用th:each遍历
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<th width="100px">NAME</th>
<th width="50px">AGE</th>
</tr>
<tr th:each="user:${userList}">
<td th:text="${user.name}"></td>
<td th:text="${user.age}"></td>
</tr>
</table>
</body>
</html>
4. 使用索引
<!-- 携带索引 -->
<tr>
<td>ID</td>
<th width="100px">NAME</th>
<th width="50px">AGE</th>
</tr>
<tr th:each="user,index:${userList}">
<td th:text="${index.index+1}"></td>
<td th:text="${user.name}"></td>
<td th:text="${user.age}"></td>
</tr>
2.1.4 th:if
map.put("sex",1);
<!-- 自己测 -->
<span th:if="${sex == 1}">man</span>
<span th:if="${sex == 2}">woman</span>
2.1.5 th:insert 和 th:fragment
1. 在controller中定义方法跳转到包含别的页面的页面
@RequestMapping("/insert")
public String insert() {
return "insert";
}
2. 创建被包含页面 fragment.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<footer th:fragment="fragmentDiv">
fragment success!
</footer>
</body>
</html>
3. 创建包含页面 insert.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- fragment 被包含的页面 fragmentDiv 页面里唯一标识 -->
<div th:insert="fragment::fragmentDiv">
</div>
</body>
</html>
2.1.5.1 th:insert
把fragment.html中footer里面的内容(包含标签)全部包含到insert.html的div里面
<div>
<footer>
fragment success!
</footer>
</div>
2.1.5.2 th:include
把fragment.html中footer里面的内容(不包含标签)全部包含到insert.html的div里面
<div>
fragment success!
</div>
2.1.5.3 th:replace
直接替换div
<footer>
fragment success!
</footer>
2.1.6 th:object
<!-- 不常用 自己测 -->
<div th:object="${user}">
name: <span th:text="*{name}"></span>
age: <span th:text="*{age}"></span>
</div>
2.1.7 th:utext
识别<html>标签