关于springboot:SpringBoot-整合-Thymeleaf-如何使用后台模板快速搭建项目

36次阅读

共计 4841 个字符，预计需要花费 13 分钟才能阅读完成。

如果你和我一样，是一名 Java 路线上的编程男孩，其实我不太倡议你花工夫学 Thymeleaf，当然他的思维还是值得借鉴的。然而他的实质在我看来就是 Jsp 技术的翻版（Jsp 当初用的真的很少很少）。弄前端齐全能够间接上手前端框架 vue。

并竟学 Java 在我眼里，目前没有什么是不要学的。兼测试、运维、前端啥都要会点。另外就目前来说，学 Java 的人数恐怕依然后端中最宏大的。

收费后盾模板在文末，大家有需要能够间接下载。

我想如果不是学校作业，也不会灵机一动写这篇文章👩💻。

浏览本文播种 📖

  1. 学会 Thymeleaf 罕用语法🏄♀️
  2. 通晓 Thymeleaf 如何与 SpringBoot 集成🤹♀️
  3. 应用 Thymeleaf 实现学校老师作业 👨🔬
  4. 如果有需要，能够间接下个模板，联合 SpringBoot 写个毕业设计👨💻

一、Thymeleaf 初介绍 📓

Thymeleaf 官网

Thymeleaf 官网文档

Thymeleaf是实用于 Web 和独立环境的古代服务器端 Java 模板引擎。

Thymeleaf 的次要指标是为您的开发工作流程带来优雅的 天然模板——HTML 能够在浏览器中正确显示，也能够作为动态原型工作，从而增强开发团队的合作。

凭借 Spring Framework 的模块、与您最喜爱的工具的大量集成以及插入您本人的性能的能力，Thymeleaf 是古代 HTML5 JVM Web 开发的现实抉择——只管它还有更多功能。— 官网介绍

二、SpringBoot 整合 Thymeleaf 📚

次要针对咱们在我的项目中最常见的几种用法进行解说。同时咱们也是在我的项目中间接讲 Thymeleaf 的用法。

2.1、新建 SpringBoot 我的项目

这个就不用说了哈，我想大家都是会这个的吧。

2.2、导入依赖

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.5.2</version>
    <relativePath/>
</parent>   
<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId> 
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
    </dependency>
</dependencies>

2.3、SpringBoot 动态资源寄存门路

首先咱们将模板下载下来：

咱们点进 doc，将须要的页面文件复制到 resources/templates包下，将 css、images、js 复制到 resources/static包下。

2.4、书写配置文件

thymeleaf 能够配置的一些属性，这只是常见的哈。

spring:
  thymeleaf:
    enabled: true  #开启 thymeleaf 视图解析
    encoding: utf-8  #编码
    prefix: classpath:/templates/  #前缀 当然默认也是这个，能够不配置
    cache: false  #是否应用缓存
    mode: HTML  #严格的 HTML 语法模式
    suffix: .html  #后缀名

2.5、编写 Controller

咱们以 登录页面 为例，写个 Controller 跳转到 login.html。

@Controller
@RequestMapping
public class LoginController {

    /** * 跳转到登录页面 */
    @GetMapping("/login")
    public String login(){return "login";}

    /** * 模仿登录申请  */
    @PostMapping("/doLogin")
    public String doLogin(String username,String password){if(username!=null&&password!=null){System.out.println(username+password);
            // 重定向到 /indedx 申请  也能够重定向页面
            return "redirect:/index";
        }
        return "login";
    }

    /**  * 跳转到 index 页面 */
    @GetMapping("/index")
    public String index(){return "index";}

}

2.6、启动我的项目 & 问题解决

启动类没啥要改的，间接跑。

启动我的项目后，拜访 localhost:8080/login，可能会呈现一个 短少 css、js 的页面。而不是上面这个胜利的页面。

起因是在咱们应用 Thyemleaf 后，在页面中就不应该再应用相对路径, 如这种：<link rel="stylesheet" type="text/css" th:href="/css/main.css">。

而是应该批改为：<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">。

批改完之后，还应在 html 页面的头部做一下批改：

<html lang="en" xmlns:th="http://www.thymeleaf.org">

2.7、Thyemleaf 罕用

Thymeleaf 官网疾速入门介绍

Thymeleaf 官网文档

2.7.1、th:href | 链接 (URL) 表达式

其实咱们刚刚曾经说了这点：

// 以前的
<link rel="stylesheet" type="text/css" href="/css/main.css">
// 批改后的：<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">

至于这么做的起因是因为 Thymeleaf 的语法规定规定。

谬误示例：

<link rel="stylesheet" type="text/css" th:href="@{/static/css/main.css}">

引入的资源门路千万不要动态资源门路的汇合中门路的前缀。否则会导致申请不到资源。

咱们在应用 Thymeleaf 的 @{} 润饰后，它会本人去 static 包下寻找。

留神 : 在 springboot2.0 版本以前拦截器会默认对动态资源不拦挡，然而 springboot 2.0 当前拦截器会拦挡所有，所以须要重写 addInterceptors 办法，不论是本人的动态资源还是 webjars 中的资源，都要放行

当然我只是在这提上一嘴，本文没写拦截器相干常识。

2.7.2、th:text

咱们都会有一个须要提示信息的时候，就是简略展现一段文本，如：

<p th:text="#{home.welcome}">Welcome to our grocery store!</p>

咱们批改一下之前的 Controller:

/*** 跳转到登录页面  */
@GetMapping("/login")
public String login(Model model){model.addAttribute("systemName","学生管理系统");
    return "login";
}

另外批改一下登录页面：

<div class="logo">
    <h1 th:text="${systemName}"></h1>
</div>

2.7.3、th:action

表单提交我想是最常见的啦吧。

<form class="login-form" method="post" th:action="@{/doLogin}">
</form>

在这里提交的门路，也是须要用 @{} 包裹起来。

后端还是照写，没有变动。

2.7.4、th:each & th:if

循环、判断应该是没有哪里用不到的啦吧。

写个 Student 类，稍后会用到

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Student {
    private Long id;
    private String name;
    private Integer age;
    /**
     * true 为男
     * false 为女
     */
    private Boolean gender;
}

写个 controller

/**
     * 增加多个学生
     */
@GetMapping("/doEach")
public String doEach(Model model){List<Student> students = new ArrayList<>();
    Student student1 = new Student(1L,"1 号学生",20,true);
    students.add(student1);
    Student student2 = new Student(2L,"2 号学生",21,true);
    students.add(student2);
    Student student3 = new Student(3L,"3 号学生",22,false);
    students.add(student3);
    Student student4 = new Student(4L,"4 号学生",23,true);
    students.add(student4);
    model.addAttribute("students",students);
    return "each";
}

再写个 each.html 页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>for 循环 </title>
</head>
<body>

<table border="1">
    <tr>
        <th>id</th>
        <th> 姓名 </th>
        <th> 年龄 </th>
        <th> 性别 </th>
    </tr>
    <tr  th:each="student : ${students}" >
        <td th:text="${student.id}"></td>
        <td th:text="${student.name}"></td>
        <td th:text="${student.age}"></td>
<!--      三元表达式  -->
        <td th:text="${student.gender}? 男: 女"></td>
        <td th:if="${student.gender}"> 利用 if 判断性别 男 </td>
        <td th:if="${not student.gender}"> 利用 if 判断性别 女 </td>
    </tr>
</table>
</body>
</html>

成绩：

2.8、小结

我只是简略的说了一下 Thymeleaf，它反对的货色还是有不少的，在这没有一一阐明，有需要时，可间接查问 Thymeleaf 文档即可。

三、收费后盾模板 📋

1、收费的后盾模板：Vail Admin

2、汇集多个收费的后盾模板：免费模板

点进去间接下载就能够啦。在 SpringBoot 我的项目中间接援用就能够啦。

四、喃喃自语 🚀

你好，我是博主 宁在春

心愿本篇文章能让你感到有所播种！！！

祝 咱们: 待别日相见时，都已有所成。

欢送大家一起探讨问题😁，躺了🛌

简书 | 宁在春

CSDN | 宁在春

掘金 | 宁在春

知乎 | 宁在春

博客园 | 宁在春

正文完
springboot
发表至： springboot
2021-10-19
 0
SpringBootMyBatis集成多数据库
关于springboot:SpringBoot-自定义全局异常捕获
关于springboot:Spring-Boot快速入门之四Tomcat-部署
关于springboot:micamqtt-130-发布拆分-client-和-server-的-spring-boot-starter