【SpringMVC篇】一.简单的springmvc回顾及thymeleaf使用

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>标签
发布了42 篇原创文章 · 获赞 8 · 访问量 2452

猜你喜欢

转载自blog.csdn.net/TheNew_One/article/details/103772352