SpringBoot 开发使用thymeleaf模板开发html页面_springboot themeleaf生成html-CSDN博客

本文链接：https://blog.csdn.net/weixin_36586564/article/details/88570959

最近写一些小功能时，想写些页面验证一下效果，后台用的是SpringBoot，当时想用jsp写页面来着，但是springboot不推荐使用jsp，因为jsp在springboot中有诸多限制。
springboot中推荐使用thymeleaf模板，使用html作为页面展示，所以这篇博客记录一下如何初步使用thymeleaf开发html。

1、在pom.xml文件中添加thymeleaf依赖

<dependencies>
        <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>
    </dependencies>

2.在application.xml中添加访问请求配置(也可以是application.yml文件，个人习惯)

#thymeleaf
#默认到resource/templates目录下寻找
spring.thymeleaf.suffix=.html
spring.thymeleaf.check-template-location=true
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.cache=false
spring.thymeleaf.mode=HTML5

springboot中默认resources中static文件夹存放静态资源，如js文件、css文件、图片等等。templates文件夹中存放html页面。

3.在templates文件夹中创建html文件
在这里插入图片描述

index.html:

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>thymeleaf</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <h1>Welcome thymeleaf.</h1>
    <a href="/redirect">redirect</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/model">model</a>
</body>
</html>

hello.html:

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>model</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <p>welcome : [[${name}]].</p>
    <h1>hi , [[${boss}]] !</h1>
</body>
</html>

redirect.html:

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>redirectPage</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <h1>congratulation redirect success !</h1>
</body>
</html>

4.编写Controller
注意：不要使用@RestController注解，@RestController注解是@ResponseBody和@Controller的集合体，使用@RestController注解会默认返回数据，而不会请求到页面。

package com.boss.info.thymeleaf;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * Created by qxr4383 on 2019/3/15.
 */
@Controller
public class pageController {
    /**
     * 首页
     * @return
     */
    @RequestMapping("/")
    public String page(){
        return "system/index";
    }


    /**
     * 跳转
     * @return
     */
    @RequestMapping("/redirect")
    public String page2(){
        return "redirect/redirect";
    }


    /**
     *视图
     * @param model
     * @return
     */
    @RequestMapping("/model")
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190315122420378.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjU4NjU2NA==,size_16,color_FFFFFF,t_70)    public String page3(Model model){
        model.addAttribute("name","seawater");
        model.addAttribute("boss","you will be a boss!");
        return "hello";
    }
}

5.在浏览器中输入请求地址
localhost:8080
在这里插入图片描述