springboot（十一）：springboot集成thymeleaf

最新推荐文章于 2024-09-12 11:04:33 发布

启帆远航

最新推荐文章于 2024-09-12 11:04:33 发布

阅读量1.5k

点赞数 1

分类专栏： # springboot

本文链接：https://blog.csdn.net/yu1755128147/article/details/106460451

版权

springboot 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、创建maven项目并添加依赖

    <!-- Import dependency management from Spring Boot -->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.4.RELEASE</version>
    </parent>
    <!-- 统一管理jar包版本 -->
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>
 
   <dependencies>
        <!--启动器构建web，包括RESTful，使用Spring MVC的应用程序。使用Tomcat作为默认嵌入式容器-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
 
        <!-- lombok：用来消除Java类中的大量样板代码，产生干净，简洁且易于维护的Java类 -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

        <!-- Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，可以动态或者静态显示文本内容,它可以完全替代JSP -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    </dependencies>

2、添加配置文件application.yml

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

3、编写启动类

package com.wedu.thymeleaf;

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

@SpringBootApplication
public class ThymeleafApplication {

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

4、编写实体

package com.wedu.thymeleaf.pojo;

import lombok.Data;

import java.sql.Date;

/**
 * 用户信息实体
 */
@Data
public class UserInfo {

    private Integer id;
    private String username;
    private String password;
    private Integer age;
    private Date regtime;
    private String siteaddress;
}

5、编写业务层代码

package com.wedu.thymeleaf.service;

import com.wedu.thymeleaf.pojo.UserInfo;
import org.springframework.stereotype.Service;

import java.sql.Date;
import java.util.ArrayList;
import java.util.List;

/**
 * 用户信息业务层
 */
@Service
public class UserInfoService {

    public List<UserInfo> findAll() {
        List<UserInfo> userInfos = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            UserInfo userInfo = new UserInfo();
            userInfo.setId(i);
            userInfo.setUsername("test" + i);
            userInfo.setPassword("98765" + i);
            userInfo.setAge(26 + i);
            userInfo.setRegtime(new Date(1234567890L));
            userInfo.setSiteaddress("https://www.csdn.net");
            userInfos.add(userInfo);
        }
        return userInfos;
    }
}

注：这里为了演示，直接手动造了一些数据。

6、编写控制层

package com.wedu.thymeleaf.web;

import com.wedu.thymeleaf.pojo.UserInfo;
import com.wedu.thymeleaf.service.UserInfoService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.List;

/**
 * 用户信息
 */
@Controller //注意：此处不能使用@RestController，@RestController只返回字符串，不能返回页面
public class UserInfoController {

    @Autowired
    private UserInfoService userInfoService;

    @GetMapping("findAll")
    public String findAll(Model model) {
        List<UserInfo> userInfos = userInfoService.findAll();
        model.addAttribute("userInfos",userInfos);
        return "users";
    }
}

7、编写页面，并将model中数据渲染到页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style type="text/css">
        table {border-collapse: collapse; font-size: 14px; width: 80%; margin: auto}
        table, th, td {border: 1px solid darkslategray;padding: 10px}
    </style>
</head>
<body>
<div style="text-align: center">
    <span style="color: darkslategray; font-size: 30px">欢迎光临！</span>
    <hr/>
    <table class="list">
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>用户名</th>
            <th>年龄</th>
            <th>注册时间</th>
            <th>网站地址</th>
        </tr>
        <tr th:each="user : ${userInfos}">
            <td th:text="${user.id}">1</td>
            <td th:text="${user.username}">张三</td>
            <td th:text="${user.password}">zhangsan</td>
            <td th:text="${user.age}">20</td>
            <td th:text="${#dates.format(user.regtime, 'yyyy-MM-dd')}">1980-02-30</td>
            <td th:text="${user.siteaddress}">1</td>
        </tr>
    </table>
</div>
</body>
</html>

注意：页面使用thymeleaf，一定记得在页面的开始引用<html xmlns:th="http://www.thymeleaf.org">。

8、运行项目，打开页面访问地址：http://localhost:8080/findAll，显示结果如下：