thymeleaf简单使用

最新推荐文章于 2025-04-06 09:00:00 发布

清风H_F

最新推荐文章于 2025-04-06 09:00:00 发布

阅读量290

点赞数

分类专栏： thymeleaf 文章标签： thymeleaf

本文链接：https://blog.youkuaiyun.com/baidu_32784445/article/details/79575861

版权

thymeleaf 专栏收录该内容

1 篇文章

订阅专栏

spring boot + gradle + idea

结构

1.首先创建spring boot项目导入依赖

dependencies {
   compile('org.springframework.boot:spring-boot-starter-web')
   runtime('org.springframework.boot:spring-boot-devtools')
   testCompile('org.springframework.boot:spring-boot-starter-test')
   // 添加 Thymeleaf 的依赖
   compile('org.springframework.boot:spring-boot-starter-thymeleaf')

}

2.配置yml文件

spring:
  thymeleaf:
    cache: false # 热部署
    encoding: UTF-8 # 字符编码
    mode: HTML5 # 使用H5标准

3.写controller

@RequestMapping("/users")
@RestController
public class UserController {
    @Autowired
    private UserRepository userRepository;

    @GetMapping
    public ModelAndView userAll(Model map) {
        User user = new User("1", "张三", "45@qq.com");
        // userRepository.saveUpdateUser(user);
        map.addAttribute("userList", userRepository.selectAll());
        map.addAttribute("title","用户管理");
        return new ModelAndView("users/list", "userModel", map);
    }

    /**
     * 查看用户信息
     * @param id
     * @param model
     * @return
     */
    @RequestMapping("{id}")
    public ModelAndView view(@PathVariable("id") String id, Model model) {
        User user = userRepository.selectUserById(id);
        model.addAttribute("user",user);
        model.addAttribute("title","查看用户");
        return new ModelAndView("users/view","userModel",model);
    }


    /**
     * 创建或修改
     * @param model
     * @return
     */
    @RequestMapping("/form")
    public ModelAndView createUser(Model model) {
        User user = new User();
        model.addAttribute("user",user);
        model.addAttribute("title","创建用户");
        return new ModelAndView("users/form","userModel",model);
    }

    @RequestMapping
    public ModelAndView saveUpdateUser(User user, Model model) {
        user = userRepository.saveUpdateUser(user);
        return new ModelAndView("redirect:/users");
    }
}

4. 页面

list.html

<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html xmlns:th="http://www.thymeleaf.org"
       xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:replace="~{view/heand :: header}"></div>
<h3 th:text="${userModel.title}"></h3>
<a href="list.html" th:href="@{/users/form}">创建用户</a>
<table border="1">
    <thead>
    <tr>
        <td>id</td>
        <td>emile</td>
        <td>name</td>
    </tr>
    </thead>
    <tbody>
    <tr th:if="${userModel.userList.size()} eq 0">
        <td colspan="3">没有有户信息！!!</td>
    </tr>
    <tr th:each="user : ${userModel.userList}">
        <td th:text="${user.id}"></td>
        <td th:text="${user.emile}"></td>
        <td th:text="${user.name}"></td>
        <td></td>
        <td></td>
    </tr>
    </tbody>

</table>
<div th:replace="~{view/fooder :: fooder}"></div>
</body>
</html>

form.html

<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html xmlns:th="http://www.thymeleaf.org"
       xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:replace="~{view/heand :: header}"></div>
<h3 th:text="${userModel.title}"></h3>
<form action="/users" th:action="@{/users}" method="post">
    <input type="hidden" name="id">
    姓名：<input type="text" name="name"><br/>
    邮箱：<input type="text" name="emile"><br/>
    <input type="submit" value="提交">
</form>
<div th:replace="~{view/fooder :: fooder}"></div>
</body>
</html>

fooder.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layuot">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:fragment="fooder">
    <a href="www.baidu.com">百度一下</a>
</div>
</body>
</html>

heand.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layuot">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:fragment="header">
    <h1>首页哦</h1>
    <a href="/users" th:href="@{~/users}">首页</a>
</div>
</body>
</html>