springBoot整合thymeleaf(超简单)

Thymeleaf是一款现代的服务器端 Java 模板引擎,可以轻松与SpringMvc、springBoot等web框架进行集成,适用于 Web 和独立环境开发。与jsp、Velocity、FreeMaker功能类似,thymeleaf可以通过thymeleaf标签渲染处理数据用以展示给用户。

目前团队项目基本都是前后端分离模式,但thymeleaf对于行业初学者学习或个人承接项目使用都还是个不错的选择。

前期文章已经介绍springBoot项目的创建过程,此处不再赘述

传送门:eclipse创建springBoot项目详细教程

springBoot整合thymeleaf步骤:

第一步:pom文件引入thymeleaf依赖


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

第二步:properties或yml文件添加配置

#html存放的具体路径,可进行自定义,示例:resources/templates
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.cache=false
spring.thymeleaf.suffix=.html
spring.thymeleaf.servlet.content-type=text/html

 第三步:在templates目录下添加html文件,示例:templates/demo/demoHtm.html





Demo HTML


Hello World!

第四步:添加控制器接口

@Controller
public class DemoController {
	@RequestMapping("/getDemoHtml")
	public String getDemoHtml(){
        //此处是需要展示的html在templates下的具体路径
		return "demo/demoHtm";
	}
}

PS:此处需要注意return的路径写法,最前面是没有斜线(/)的,不然可能会出现本地运行正常,但部署到Linux出现404无法访问的情况。 

第五步:浏览器请求测试

springBoot整合thymeleaf(超简单)_第1张图片

到此,springBoot整合thymeleaf的过程就算结束了。

展示后端数据库数据,常用的基本有两种方式:

1.在控制器代码中增加返回数据、html文件使用thymeleaf标签展示即可。

2.上述步骤结构不变,html使用jquery调取API数据接口获取数据后通过jquery语法赋值(此种方式不必使用thymeleaf标签)。

以第一种方式为例:

后端修改后:

@Controller
public class DemoController {
	@RequestMapping("/getDemoHtml")
    //返回数据有多种方式,以下只是其中一种
	public String getDemoHtml(Model model){
		HashMap reMap=new HashMap<>();
		reMap.put("userName", "张三");
		reMap.put("userAge", 20);
		model.addAllAttributes(reMap);
		return "demo/demoHtm";
	}
}

前端修改后:





Demo HTML





浏览器请求测试:

springBoot整合thymeleaf(超简单)_第2张图片

超详细的springBoot前后端完整案例:

springBoot整合myBatis详细前后端项目实例

以上,喜欢请点个赞吧~

你可能感兴趣的:(java,html,spring,boot)