05_thymeleaf入门案例

张创琦 2022.03.12

  1. 编写service

UserService.java

  1. package com.lxs.service;
  3. import com.lxs.dao.UserDao;
  4. import com.lxs.dao.UserMapper;
  5. import com.lxs.domain.User;
  6. import org.springframework.beans.factory.annotation.Autowired;
  7. import org.springframework.stereotype.Service;
  9. import java.util.List;
  11. @Service
  12. public class UserService {
  14.     @Autowired
  15.     private UserMapper userMapper;
  17.     public List<User> findAll() {
  18.         return userMapper.selectAll();
  19.     }
  20. }
  1. 编写Controller

UserController.java

  1. package com.lxs.controller;
  3. import com.lxs.domain.User;
  4. import com.lxs.service.UserService;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.stereotype.Controller;
  7. import org.springframework.ui.Model;
  8. import org.springframework.web.bind.annotation.RequestMapping;
  10. import java.util.List;
  12. @Controller
  13. public class UserController {
  15.     @Autowired
  16.     private UserService userService;
  18.     @RequestMapping("/all")
  19.     public String all(Model model) {
  20.         List<User> list = userService.findAll();
  21.         model.addAttribute("users", list);
  22.         // 默认跳转路径是: classpath:/templates/users.html
  23.         return "users";
  25.     }
  26. }
  1. pom.xml 中引入启动器
  1. <!-- thymeleaf 相关依赖 -->
  2. <dependency>
  3.     <groupId>org.springframework.boot</groupId>
  4.     <artifactId>spring-boot-starter-thymeleaf</artifactId>
  5. </dependency>
  1. 静态页面的搭建

resources/templates/users.html

注意第二行 html 的引入链接

  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>用户</title>
  6.     <style type="text/css">
  7.         table {border-collapse: collapse; font-size: 14px; width: 80%; margin: auto}
  8.         table, th, td {border: 1px solid darkslategray; padding: 10px}
  9.     </style>
  10. </head>
  11. <body>
  12. <div style="text-align: center">
  13.     <span style="color: darkslategray; font-size: 30px">欢迎光临！</span>
  14.     <hr/>
  15.     <table class="list">
  16.         <tr>
  17.             <th>id</th>
  18.             <th>姓名</th>
  19.             <th>用户名</th>
  20.             <th>年龄</th>
  21.             <th>性别</th>
  22.             <th>生日</th>
  23.             <th>备注</th>
  24.             <th>操作</th>
  25.         </tr>
  26.         <tr th:each="user : ${users}" th:object="${user}">
  27.             <td th:text="${user.id}">1</td>
  28.             <td th:text="*{name}">张三</td>
  29.             <td th:text="*{userName}">zhangsan</td>
  30.             <td th:text="${user.age}">20</td>
  31.             <td th:text="${user.sex} == 1 ? '男': '女'">男</td>
  32.             <td th:text="${#dates.format(user.birthday, 'yyyy-MM-dd')}">1980-02-30</td>
  33.             <td th:text="${user.note}">1</td>
  34.             <td>
  35.                 <a th:href="@{/delete(id=${user.id}, userName=*{userName})}">删除</a>
  36.                 <a th:href="|/update/${user.id}|">修改</a>
  37.                 <a th:href="'/approve/' + ${user.id}">审核</a>
  38.             </td>
  39.         </tr>
  41.     </table>
  42. </div>
  43. </body>
  44. </html>
    1. # 开发阶段关闭thymeleaf的模板缓存
    2. spring.thymeleaf.cache=false

在 Idea 中，我们需要在修改页面后按快捷键 Ctrl + Shift + F9 对项目进行 rebuild 才可以。