spring boot 整合thymeleaf实例演示

缺乏、安全感 2021-12-08 23:49 201阅读 0赞

###  ###

*   *  step1 pom依赖
     *  step2 application.yml配置文件
     *  step3 HelloWorldController 类 代码
     *  step4 新建 hello.html 页面
     *  step 5 启动工程访问
     *  工程结构图

我们在上篇文章 [https://blog.csdn.net/whandgdh/article/details/95937078][https_blog.csdn.net_whandgdh_article_details_95937078]  
spring boot 整合freemarker实例基础上修改 整合thymeleaf。

## step1 pom依赖 ##

<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-freemarker</artifactId>
    		</dependency>
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-web</artifactId>
    		</dependency>
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-test</artifactId>
    			<scope>test</scope>
    		</dependency>
    		
    	<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-thymeleaf</artifactId>
    		</dependency>

## step2 application.yml配置文件 ##

spring:
      thymeleaf:
        prefix: classpath:/templates/
        suffix: .html
        encoding: UTF-8
        servlet:
         content-type: text/html
        enabled: true
        mode: HTML5
        cache: false

看到配置文件访问的页面类型是html

## step3 HelloWorldController 类 代码 ##

@RequestMapping("/helloByMv")
        public ModelAndView helloByMv(){
             ModelAndView model=new ModelAndView("hello") ;
             Map<String,String>map=new HashMap<String,String>();
             map.put("msg", "Hello thymeleaf!");
             model.addAllObjects(map);
             return model;
        }
        @RequestMapping("/helloToThy")
        public String helloByMv(ModelMap map  ){
            map.addAttribute("msg", "Hello thymeleaf!");
            return "hello";
        }

## step4 新建 hello.html 页面 ##

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h1 th:text="${msg}"> </h1>
    </body>
    </html>

## step 5 启动工程访问 ##

访问路径  
[http://127.0.0.1:8080/helloByMv][http_127.0.0.1_8080_helloByMv]  
![在这里插入图片描述][20190715232307283.png]  
[http://127.0.0.1:8080/helloToThy][http_127.0.0.1_8080_helloToThy]  
![在这里插入图片描述][2019071523232430.png]

## 工程结构图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doYW5kZ2Ro_size_16_color_FFFFFF_t_70]

[https_blog.csdn.net_whandgdh_article_details_95937078]: https://blog.csdn.net/whandgdh/article/details/95937078
[http_127.0.0.1_8080_helloByMv]: http://127.0.0.1:8080/helloByMv
[20190715232307283.png]: /images/20211209/5d3f40e8ceb84cb58c01bae4b4e75cac.png
[http_127.0.0.1_8080_helloToThy]: http://127.0.0.1:8080/helloToThy
[2019071523232430.png]: /images/20211209/f8e160e2ff8a40559b4a03a7edb8c15c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doYW5kZ2Ro_size_16_color_FFFFFF_t_70]: /images/20211209/596673b8e5874d409a15de5d90a6cc3e.png