SpringBoot 實戰 (十二) | 整合 thymeleaf

微信公眾號：一個優秀的廢人 如有問題或建議，請後臺留言，我會盡力解決你的問題。

前言

如題，今天介紹 Thymeleaf ，並整合 Thymeleaf 開發一個簡陋版的學生資訊管理系統。

SpringBoot 提供了大量模板引擎，包含 Freemarker、Groovy、Thymeleaf、Velocity 以及 Mustache，SpringBoot 中推薦使用 Thymeleaf 作為模板引擎，因為 Thymeleaf 提供了完美的 SpringMVC 支援。Thymeleaf 是新一代 Java 模板引擎，在 Spring 4 後推薦使用。

什麼是模板引擎？

Thymeleaf 是一種模板語言。那模板語言或模板引擎是什麼？常見的模板語言都包含以下幾個概念：資料（Data）、模板（Template）、模板引擎（Template Engine）和結果文件（Result Documents）。

• 資料 資料是資訊的表現形式和載體，可以是符號、文字、數字、語音、影像、視訊等。資料和資訊是不可分離的，資料是資訊的表達，資訊是資料的內涵。資料本身沒有意義，資料只有對實體行為產生影響時才成為資訊。
• 模板 模板，是一個藍圖，即一個與型別無關的類。編譯器在使用模板時，會根據模板實參對模板進行例項化，得到一個與型別相關的類。
• 模板引擎 模板引擎（這裡特指用於Web開發的模板引擎）是為了使使用者介面與業務資料（內容）分離而產生的，它可以生成特定格式的文件，用於網站的模板引擎就會生成一個標準的HTML文件。
• 結果文件 一種特定格式的文件，比如用於網站的模板引擎就會生成一個標準的HTML文件。

模板語言用途廣泛，常見的用途如下：

• 頁面渲染
• 文件生成
• 程式碼生成
• 所有 “資料+模板=文字” 的應用場景

Thymeleaf 簡介

Thymeleaf 是一個 Java 類庫，它是一個 xml/xhtml/html5 的模板引擎，可以作為 MVC 的 web 應用的 View 層。

Thymeleaf 還提供了額外的模組與 SpringMVC 整合，所以我們可以使用 Thymeleaf 完全替代 JSP 。

Thymeleaf 語法

部落格資料：www.cnblogs.com/nuoyiamy/p/… 官方文件：www.thymeleaf.org/documentati…

SpringBoot 整合 Thymeleaf

下面使用 SpringBoot 整合 Thymeleaf 開發一個簡陋版的學生資訊管理系統。

1、準備工作

• IDEA
• JDK1.8
• SpringBoot2.1.3

2、pom.xml 主要依賴

<dependencies>
        <!-- JPA 資料訪問 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <!-- thymeleaf 模板引擎 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!-- web 啟動類 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- mysql 資料庫連線類 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
</dependencies>
複製程式碼

3、application.yaml 檔案配置

spring:
  # 資料庫相關
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/test?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC&useSSL=true
    username: root
    password: 123456
  # jpa 相關
  jpa:
    hibernate:
      ddl-auto: update   # ddl-auto: 第一次啟動專案設為 create 表示每次都重新建表，之後設定為 update
    show-sql: true
複製程式碼

4、實體類

@Data
@Entity
@AllArgsConstructor
@NoArgsConstructor
public class Student {

    @Id
    @GeneratedValue
    /**
     * 主鍵
     */
    private Long id;

    /**
     * 主鍵
     */
    private Long studentId;

    /**
     * 姓名
     */
    private String name;

    /**
     * 年齡
     */
    private Integer age;

    /**
     * 專業
     */
    private String major;

    /**
     * 宿舍
     */
    private String dormitory;

    /**
     * 籍貫
     */
    private String city;

    /*@Temporal(TemporalType.TIMESTAMP)//將時間戳，轉換成年月日時分秒的日期格式
    @Column(name = "create_time",insertable = false, updatable=false, columnDefinition = "timestamp default current_timestamp comment '註冊時間'")
    private Date createDate;

    @Temporal(TemporalType.TIMESTAMP)//將時間戳，轉換成年月日時分秒的日期格式
    @Column(name = "update_time",insertable = false, updatable=true, columnDefinition = "timestamp default current_timestamp comment '修改時間'")
    private Date updateDate;*/

}
複製程式碼

5、dao 層

@Repository
public interface StudentRepository extends JpaRepository<Student, Long> {
}
複製程式碼

6、service 層

public interface StudentService {

    List<Student> findStudentList();

    Student findStudentById(Long id);

    Student saveStudent(Student student);

    Student updateStudent(Student student);

    void deleteStudentById(Long id);

}
複製程式碼

實現類：

@Service
public class StudentServiceImpl implements StudentService {

    @Autowired
    private StudentRepository studentRepository;

    /**
     * 查詢所有學生資訊列表
     * @return
     */
    @Override
    public List<Student> findStudentList() {
        Sort sort = new Sort(Direction.ASC,"id");
        return studentRepository.findAll(sort);
    }

    /**
     * 根據 id 查詢單個學生資訊
     * @param id
     * @return
     */
    @Override
    public Student findStudentById(Long id) {
        return studentRepository.findById(id).get();
    }

    /**
     * 儲存學生資訊
     * @param student
     * @return
     */
    @Override
    public Student saveStudent(Student student) {
        return studentRepository.save(student);
    }

    /**
     * 更新學生資訊
     * @param student
     * @return
     */
    @Override
    public Student updateStudent(Student student) {
        return studentRepository.save(student);
    }

    /**
     * 根據 id 刪除學生資訊
     * @param id
     * @return
     */
    @Override
    public void deleteStudentById(Long id) {
        studentRepository.deleteById(id);
    }
}
複製程式碼

7、controller 層 (Thymeleaf) 使用

controller 層將 view 指向 Thymeleaf：

@Controller
@RequestMapping("/student")
public class StudentController {

    @Autowired
    private StudentService studentService;

    /**
     * 獲取學生資訊列表
     * @param map
     * @return
     */
    @GetMapping("/list")
    public String findStudentList(ModelMap map) {
        map.addAttribute("studentList",studentService.findStudentList());
        return "studentList";
    }

    /**
     * 獲取儲存 student 表單
     */
    @GetMapping(value = "/create")
    public String createStudentForm(ModelMap map) {
        map.addAttribute("student", new Student());
        map.addAttribute("action", "create");
        return "studentForm";
    }

    /**
     * 儲存學生資訊
     * @param student
     * @return
     */
    @PostMapping(value = "/create")
    public String saveStudent(@ModelAttribute Student student) {
        studentService.saveStudent(student);
        return "redirect:/student/list";
    }

    /**
     * 根據 id 獲取 student 表單，編輯後提交更新
     * @param id
     * @param map
     * @return
     */
    @GetMapping(value = "/update/{id}")
    public String edit(@PathVariable Long id, ModelMap map) {
        map.addAttribute("student", studentService.findStudentById(id));
        map.addAttribute("action", "update");
        return "studentForm";
    }

    /**
     * 更新學生資訊
     * @param student
     * @return
     */
    @PostMapping(value = "/update")
    public String updateStudent(@ModelAttribute Student student) {
        studentService.updateStudent(student);
        return "redirect:/student/list";
    }

    /**
     * 刪除學生資訊
     * @param id
     * @return
     */
    @GetMapping(value = "/delete/{id}")
    public String deleteStudentById(@PathVariable Long id) {
        studentService.deleteStudentById(id);
        return "redirect:/student/list";
    }
}
複製程式碼

簡單說下，ModelMap 物件來進行資料繫結到檢視。return 字串，該字串對應的目錄在 resources/templates 下的模板名字。 @ModelAttribute 註解是用來獲取頁面 Form 表單提交的資料，並繫結到 Student 資料物件。

8、studentForm 表單

定義了一個 Form 表單用於註冊或修改學生資訊。

<form th:action="@{/student/{action}(action=${action})}" method="post" class="form-horizontal">

        <div class="form-group">
            <label for="student_Id" class="col-sm-2 control-label">學號:</label>
            <div class="col-xs-4">
                <input type="text" class="form-control" id="student_Id" name="name" th:value="${student.studentId}"
                       th:field="*{student.studentId}"/>
            </div>
        </div>

        <div class="form-group">
            <label for="student_name" class="col-sm-2 control-label">姓名:</label>
            <div class="col-xs-4">
                <input type="text" class="form-control" id="student_name" name="name" th:value="${student.name}"
                       th:field="*{student.name}"/>
            </div>
        </div>

        <div class="form-group">
            <label for="student_age" class="col-sm-2 control-label">年齡:</label>
            <div class="col-xs-4">
                <input type="text" class="form-control" id="student_age" name="name" th:value="${student.age}"
                       th:field="*{student.age}"/>
            </div>
        </div>

        <div class="form-group">
            <label for="student_major" class="col-sm-2 control-label">專業:</label>
            <div class="col-xs-4">
                <input type="text" class="form-control" id="student_major" name="name" th:value="${student.major}"
                       th:field="*{student.major}"/>
            </div>
        </div>

        <div class="form-group">
            <label for="student_dormitory" class="col-sm-2 control-label">宿舍:</label>
            <div class="col-xs-4">
                <input type="text" class="form-control" id="student_dormitory" name="name" th:value="${student.dormitory}"
                       th:field="*{student.dormitory}"/>
            </div>
        </div>

        <div class="form-group">
            <label for="student_city" class="col-sm-2 control-label">籍貫:</label>
            <div class="col-xs-4">
                <input type="text" class="form-control" id="student_city" name="writer" th:value="${student.city}"
                       th:field="*{student.city}"/>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-10">
                <input class="btn btn-primary" type="submit" value="提交"/>&nbsp;&nbsp;
                <input class="btn" type="button" value="返回" onclick="history.back()"/>
            </div>
        </div>
    </form>
複製程式碼

9、studentList 學生列表

用於展示學生資訊：

<table class="table table-hover table-condensed">
        <legend>
            <strong>學生資訊列表</strong>
        </legend>
        <thead>
        <tr>
            <th>學號</th>
            <th>姓名</th>
            <th>年齡</th>
            <th>專業</th>
            <th>宿舍</th>
            <th>籍貫</th>
            <th>管理</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="student : ${studentList}">
            <th scope="row" th:text="${student.studentId}"></th>
            <td><a th:href="@{/student/update/{studentId}(studentId=${student.id})}" th:text="${student.name}"></a></td>
            <td th:text="${student.age}"></td>
            <td th:text="${student.major}"></td>
            <td th:text="${student.dormitory}"></td>
            <td th:text="${student.city}"></td>
            <td><a class="btn btn-danger" th:href="@{/student/delete/{studentId}(studentId=${student.id})}">刪除</a></td>
        </tr>
        </tbody>
    </table>
複製程式碼

頁面效果

列表頁面：點選按鈕可註冊學生資訊

註冊/修改學生資訊頁面：點提交儲存學生資訊到資料庫並返回列表頁面

有資料的列表頁面：點選名字跳到註冊/修改頁面可修改學生資訊，點選刪除可刪除學生資訊

原始碼下載

github 地址 ：github.com/turoDog/Dem…

後語

如果本文對你哪怕有一丁點幫助，請幫忙點好看。你的好看是我堅持寫作的動力。

另外，關注之後在傳送 1024 可領取免費學習資料。資料內容詳情請看這篇舊文：Python、C++、Java、Linux、Go、前端、演算法資料分享