如何配置Thymeleaf教程，及Thymeleaf的简单使用教程【一篇足够入门】

最新推荐文章于 2024-06-27 10:38:46 发布

java实习生886

最新推荐文章于 2024-06-27 10:38:46 发布

阅读量4.2k

点赞数 4

分类专栏： java-spring 文章标签： mybatis java maven

本文链接：https://blog.csdn.net/lmd770013209/article/details/127783650

版权

java-spring 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

如何配置Thymeleaf教程，及Thymeleaf的简单使用教程【一篇足够入门】

第一步【进行maven项目的建立（maven的建立前面文章中有提过），建立完之后在pom.xml中进行相关包的导入跟配置】

建立好的项目结构大致如下所示
在这里插入图片描述

项目建好之后打开pom.xml进行配置，在里面增加以下内容

<!-- 配置 Springboot 依赖-->
<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.1.6.RELEASE</version>
</parent>
<dependencies>
    <!-- 配置 SpringMVC 依赖 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- 引入freeMarker的依赖包. -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-freemarker</artifactId>
    </dependency>
    <!-- mybatis 依赖 -->
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>1.1.1</version>
    </dependency>
    <!-- mysql 依赖 -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>5.1.45</version>
    </dependency>

    <!-- thymeleaf 依赖 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

</dependencies>

加完之后进行导包，导包成功进行第二步

第二步【在src目录下的resources下面新增如下文件夹跟文件】

在这里插入图片描述

第三步【进行application.properties的配置】

要根据自己的数据库配置进行配置

#mysql
spring.datasource.url=jdbc:mysql://localhost:3306/test?characterEncoding=UTF-8
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.jdbc.Driver




#配置thymeleaf
spring.thymeleaf.cache=false

spring.freemarker.template-loader-path=classpath:/templates/
#mybatis隐射文件路径
#mybatis.mapper-locations=classpath:mapper/*.xml
#实体类别名<select id="list" resultType="Book">
#mybatis.type-aliases-package=com.web.entity

配置完了之后进行第四步

第四步【进行文件的目录结构设计】

在这里插入图片描述

static文件夹中存放静态的文件，包括静态网页，css,js,图片等

在templates下存放与后台有交互的网页

第五步【thymeleaf】如何与后台进行交互

html下的网页格式【根据网页中的相关交互进行模仿】

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" th:href="@{css/mystyle.css}"/>
    <script type="text/javascript" th:src="@{js/myscript.js}"></script>
    <script th:inline="javascript">
        function test(){
            //在JavaScript获取请求对象绑定的数据
            var username = [[${username}]];
            alert(username);
        }
    </script>
</head>
<body>
    <img th:src="@{image/mmexport1599813548353.jpg}" width="300px" onclick="fun()"/>
    <h1 th:text="${username}">lifan</h1>
    <h1 th:if="${username==null}">登录，注册</h1>
    <h1 th:if="${username!=null}"><span th:text="${username}"></span></h1>
    <div th:switch="${user.role}">
        <p th:case="admin">管理员</p>
        <p th:case="user">普通用户</p>
        <p th:case="guest">游客</p>
    </div>
    <input type="text" th:value="${user.username}"/>
    <input type="password" th:value="${user.username}"/>
    <input type="button" value="按钮" onclick="test()"/>
    <table border="1" width="60%">
        <tr>
            <th>账户</th>
            <th>密码</th>
            <th>角色</th>
            <th>角色</th>
        </tr>
        <tr th:each="u:${list}" align="center">
            <td th:text="${u.username}">lifan</td>
            <td th:text="${u.password}">123456</td>
            <td th:text="${u.role}">admin</td>
            <td>
                <a>修改</a>
                <a th:href="${'delete?username='}+${u.username}">删除</a>
                <a th:href="@{'delete?username='+${u.username}}">删除</a>
                <a th:href="@{delete(username=${u.username},password=${u.password})}">删除</a>
            </td>
        </tr>
    </table>
</body>
</html>



<a th:href="@{addinit}">新增</a>
<table border="1" width="60%">
    <tr>
        <th>账户id</th>
        <th>账户</th>
        <th>密码</th>
        <th>真实姓名</th>
        <th>年龄</th>
        <th>性别</th>>
        <th>角色</th>
    </tr>
    <tr th:each="u:${list}" align="center">
        <td th:text="${u.uid}">1</td>
        <td th:text="${u.uname}">limaodong</td>
        <td th:text="${u.upwd}">123456</td>
        <td th:text="${u.rname}">李茂东</td>
        <td th:text="${u.age}">12</td>
        <td th:text="${u.role}">admin</td>
        <td>
            <a>修改</a>
            <a th:href="@{delete(username=${u.uid})}">删除</a>
        </td>
    </tr>
</table>

</body>

【重点】这里要注意

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

这个地方一定要写这样，不然thymeleaf用不了

Controller相关代码

package com.web.controller;

import com.web.entity.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.List;

/**
 * 默认访问首页的控制器
 */
@Controller
public class IndexController {

    //配置不需要输入网页请求地址直接访问首页
    @RequestMapping("/")
    public String index(HttpServletRequest request){
        request.setAttribute("username","admin");
        request.setAttribute("user",new User("zhangsan","123456","guest"));
        List<User> list = new ArrayList<>();
        list.add(new User("zhangsan1","123456","guest"));
        list.add(new User("zhangsan2","123456","admin"));
        list.add(new User("zhangsan3","123456","user"));
        list.add(new User("zhangsan4","123456","user"));
        request.setAttribute("list",list);
        return "index";
    }

    @RequestMapping("/delete")
    public String delete(User u){
        System.out.println(u);
        return "redirect:/";
    }

}