SpringBoot基础实战-第九篇-web开发-Thymeleaf的使用

 

1 新建项目

在com.wsc.controller下创建HelloController

package com.wsc.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;


@Controller
public class HelloController {

    @ResponseBody
    @RequestMapping("/hello")
    public  String hello(){
        return "Hello World";
    }
}

启动SpringbootWebCrudApplication类中的main方法，

浏览器中输入http://localhost:8080/hello，得结果：

Hello World

2 整合页面

在pom.xml中导入依赖

	4.0.0

	com.wsc
	springboot-web-crud
	0.0.1-SNAPSHOT
	jar

	springboot-web-crud
	Demo project for Spring Boot

	
		org.springframework.boot
		spring-boot-starter-parent
		1.5.10.RELEASE
		 
	

	
		UTF-8
		UTF-8
		1.8
		3.0.9.RELEASE
		
		
		2.2.2
	

	
		
		
			org.springframework.boot
			spring-boot-starter-web

		

		
		

		
			org.springframework.boot
			spring-boot-starter-thymeleaf
		


		
		
			org.webjars
			jquery
			3.3.1
		

		
		
			org.webjars
			bootstrap
			4.0.0
		

		
			org.springframework.boot
			spring-boot-starter-test
			test
		
	

	
		
			
				org.springframework.boot
				spring-boot-maven-plugin
			
		
	

在https://getbootstrap.com/docs/4.3/examples/，中选择一个模版，如图：

下载该模版网页（下载）

按图中的目录结构进行复制

说明:把HTML页面放在classpath:/templates/，thymeleaf就能自动渲染；

然后在templates创建success.html

    
    


成功！

HelloController中添加success接口，thymeleaf会在classpath:/templates/下找到success.html

 @RequestMapping("/success")
    public String success(){
        return "success";
    }

运行SpringbootWebCrudApplication，浏览器中输入：http://localhost:8080/success

结果：成功！！

3 th:text,th:utext,th:each的使用

在HelloController中改写/success接口

 @RequestMapping("/success")
    public String success(Map map){
        map.put("hello","
你好
");
        map.put("users", Arrays.asList("紫金山","头驼铃","山顶公园"));
        return "success";
    }

改写success.html页面：

    
    


成功！

这是显示欢迎信息









     [[${user}]] 

说明：

• 标签添加属性xmlns:th="http://www.thymeleaf.org"，表示可以使用thymeleaf语法
• th:text转译字符，th:utext不转译字符
• th:each遍历数组

运行 SpringbootWebCrudApplication，在浏览器中输入：http://localhost:8080/success