SpringBoot集成Thymeleaf

最新推荐文章于 2023-03-06 22:20:54 发布

浪飞yes

最新推荐文章于 2023-03-06 22:20:54 发布

阅读量477

点赞数 2

分类专栏：技术杂项文章标签： springboot thymeleaf

本文链接：https://blog.csdn.net/langfeiyes/article/details/119425763

版权

技术杂项专栏收录该内容

30 篇文章 8 订阅

订阅专栏

环境

springboot2.4.3 + thymeleaf2.4.3 + bootstrap3

需求

浏览器中访问：http://localhost:8080/employee/list 列表员工数据

操作步骤

步骤1：创建项目 springboot-thymeleaf

步骤2：在/项目/resourcess/static 文件中导入bootstrap3相关文件

步骤3：导入依赖

核心依赖有3个：springboot parent + web环境 + thymeleaf 依赖

在pom.xml文件中导入

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.3</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-thymeleaf</artifactId>
        </dependency>
    </dependencies>

步骤4：在/项目/resources/application.properties配置thymeleaf

#开启thymeleaf视图解析
spring.thymeleaf.enabled=true
#编码
spring.thymeleaf.encoding=utf-8
#前缀
spring.thymeleaf.prefix=classpath:/templates/
#是否使用缓存
spring.thymeleaf.cache=false
#严格的HTML语法模式
spring.thymeleaf.mode=HTML
#后缀名
spring.thymeleaf.suffix=.html

步骤5：编写相关相关代码

代码结构：

实体类：Employee

package com.langfeiyes.thymeleaf.entities;

/**
 * 员工对象
 */
public class Employee {
    private Long id;
    private String name;
    private int age;
    public Employee() {
    }
    public Employee(Long id, String name, int age) {
        this.id = id;
        this.name = name;
        this.age = age;
    }
    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        this.age = age;
    }
}

接口类：EmployeeController

package com.langfeiyes.thymeleaf.controller;


import com.langfeiyes.thymeleaf.entities.Employee;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
@RequestMapping("employee")
public class EmployeeController {


    //假装是从数据库中查询出来的
    private List<Employee> queryList(){
        List<Employee> list = new ArrayList<>();
        list.add(new Employee(1L, "zhangsan", 16));
        list.add(new Employee(2L, "lisi", 17));
        list.add(new Employee(3L, "wangwu", 18));
        list.add(new Employee(4L, "zhaoliu", 19));
        list.add(new Employee(5L, "qianqi", 20));
        return list;
    }

    /**
     * 员工列表
     * @return
     */
    @RequestMapping("/list")
    public String list(Model model){
        model.addAttribute("emps", queryList());
        return  "employee/list"; //返回员工模板
    }

}

启动类：App

package com.langfeiyes.thymeleaf;


import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class App {
    public static void main(String[] args) {
        SpringApplication.run(App.class, args);
    }
}

步骤6：编写员工列表模板

代码结构：

<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>员工列表</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.css" type="text/css" />
    <script type="text/javascript" src="/bootstrap/js/bootstrap.js"></script>
</head>
<body>

<div class="container-fluid " style="margin-top: 20px">
    <div class="row">
        <div class="col-sm-10">
            <table class="table table-striped table-hover" >
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>员工名称</th>
                        <th>员工年龄</th>
                        <th>操作</th>
                    </tr>
                </thead>
               <tr th:each="e,eStat:${emps}">
                   <td th:text="${eStat.index+1}"></td>
                   <td th:text="${e.name}"></td>
                   <td th:text="${e.age}"></td>

                   <td>
                       <a class="btn btn-info btn-xs " href="javascript:;" >
                           <span class="glyphicon glyphicon-edit"></span> 编辑
                       </a>
                       <a href="javascript:;" class="btn btn-danger btn-xs ">
                           <span class="glyphicon glyphicon-trash"></span> 删除
                       </a>
                   </td>
               </tr>
            </table>

        </div>
    </div>
</div>

</body>
</html>

步骤7：测试

右键执行App类

浏览器输入：http://localhost:8080/employee/list

显示最终效果：

到这，Springboot集成thymeleaf成功。

案例源码：传送门

浪飞yes

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
2
评论
SpringBoot集成Thymeleaf

环境springboot2.4.3+ thymeleaf2.4.3+ bootstrap3需求浏览器中访问：http://localhost:8080/employee/list 列表员工数据操作步骤步骤1：创建项目 springboot-thymeleaf步骤2：在/项目/resourcess/static 文件中导入bootstrap3相关文件步骤3：导入依赖核心依赖有3个：springboot parent + web环境 + thymeleaf 依...
复制链接

扫一扫