Thymeleaf คืออะไรและคุณสามารถใช้มันในแอพพลิเคชั่น Spring Boot ของคุณได้อย่างไร?
Thymeleaf เป็นเอ็นจิ้นเทมเพลต Java พัฒนาเทมเพลตสำหรับทั้งแอปพลิเคชันบนเว็บและแอปพลิเคชันสแตนด์อโลน กลไกเทมเพลตนี้ใช้แนวคิดเทมเพลตแบบธรรมชาติเพื่อแทรกตรรกะลงในเลย์เอาต์ของคุณ โดยไม่กระทบต่อการออกแบบของคุณ ด้วย Thymeleaf คุณจะสามารถควบคุมวิธีที่แอปพลิเคชันจะประมวลผลเทมเพลตที่คุณสร้างขึ้น
Thymeleaf รองรับการประมวลผลเทมเพลตหลายรูปแบบ รวมถึง HTML, XML, ข้อความ, JavaScript, CSS และ RAW ในบรรดาสิ่งเหล่านี้ HTML เป็นรูปแบบเทมเพลตที่ใช้กันมากที่สุดภายในกรอบงาน Thymeleaf
กำลังเริ่มต้น Thymeleaf ในแอปพลิเคชันของคุณ
อีกทางหนึ่ง อาจรวม Thymeleaf เข้ากับโปรเจ็กต์ Spring Boot ของตนโดยเลือกให้รวมไว้ระหว่างการสร้างโค้ดสำเร็จรูปผ่านเครื่องมือ Initializr ของ Spring หรือรวมไว้ในไฟล์ข้อกำหนดเฉพาะของบิลด์ภายใต้หัวข้อการขึ้นต่อกันในภายหลัง
ในกรณีที่คุณเลือกตัวเลือกโปรเจ็กต์ Gradle ไฟล์การกำหนดค่าที่ระบุการขึ้นต่อกันของโปรเจ็กต์จะเรียกว่าไฟล์ “build.gradle” ในทางกลับกัน หากคุณเลือก Maven เป็นโซลูชันการจัดการการขึ้นต่อกัน ไฟล์การกำหนดค่าที่เกี่ยวข้องจะมีชื่อว่า"pom.xml"
ไฟล์ XML ที่ระบุการขึ้นต่อกันสำหรับโปรเจ็กต์ของคุณ ซึ่งเรียกว่า “pom.xml” ควรรวมส่วนเฉพาะที่สรุปการขึ้นต่อกันเหล่านั้น
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
อันที่จริง มีความจำเป็นที่ไฟล์ build.gradle ของคุณจะต้องรวมส่วนการขึ้นต่อกันเฉพาะดังต่อไปนี้:
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}
บทความข้างต้นมีแอปพลิเคชันภาพประกอบที่สามารถเข้าถึงได้ผ่านพื้นที่เก็บข้อมูล GitHub เฉพาะ ซึ่งให้สิทธิ์ผู้ใช้ในการใช้งานโดยไม่เสียค่าใช้จ่ายภายใต้เงื่อนไขของใบอนุญาต MIT ที่อนุญาต
การรวม Thymeleaf เข้ากับแอปพลิเคชัน Spring ทำให้ได้เปรียบในการใช้ไลบรารีพื้นฐาน ทำให้สามารถใช้งาน Spring Standard Dialect สำหรับ Thymeleaf ได้ ภาษาถิ่นนี้นำเสนอคุณลักษณะที่โดดเด่นและสไตล์การแสดงออก ซึ่งอำนวยความสะดวกในการรวมความสามารถต่างๆ ภายในโครงสร้างการออกแบบ
การใช้ Thymeleaf ใน Spring Boot
ในการใช้ Thymeleaf ภายในแอปพลิเคชัน Spring จำเป็นต้องเริ่มต้นด้วยการสร้างเอกสารเทมเพลต ในตัวอย่างนี้ รูปแบบที่เลือกสำหรับเทมเพลตคือไฟล์ HTML ขอแนะนำให้สร้างเทมเพลต Thymeleaf ทั้งหมดภายในไดเร็กทอรี"เทมเพลต"ที่อยู่ในไฟล์ทรัพยากรของ Spring Boot
ไฟล์ home.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Generic Website</title>
</head>
<body></body>
</html>
เทมเพลต Thymeleaf ที่ให้มาจะแสดงมาร์กอัป HTML ทั่วไป รวมถึงคำนำหน้าเนมสเปซที่ไม่เกี่ยวข้อง xmlns:th ซึ่งทำหน้าที่เป็นพื้นฐานสำหรับการใช้แอตทริบิวต์ใดๆ ที่ทำหมายเหตุประกอบด้วย th: ภายในเอกสาร HTML ปัจจุบัน คุณลักษณะและองค์ประกอบอื่นๆ ทั้งหมดในเทมเพลต Thymeleaf เป็นไปตามไวยากรณ์และแบบแผน HTML มาตรฐาน
การสร้างส่วนหัว
ส่วนหัวมีบทบาทสำคัญในการถ่ายทอดวัตถุประสงค์ของเว็บไซต์หรือแอปพลิเคชันผ่านโลโก้ ขณะเดียวกันก็อำนวยความสะดวกในการนำทางที่ราบรื่นสำหรับผู้ใช้ ส่วนประกอบที่สำคัญของส่วนหัวพื้นฐานประกอบด้วยโลโก้และลิงก์การนำทางหลายลิงก์ที่ช่วยให้เข้าถึงส่วนต่างๆ ของเว็บไซต์หรือแอปได้อย่างง่ายดาย
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div id="nav">
<h1>LOGO</h1>
<ul>
<li> <a id="current">Home </a> </li>
<li> <a>About</a> </li>
<li> <a>Services</a> </li>
</ul>
</div>
</body>
</html>
Thymeleaf เสนอวิธีที่สะดวกในการรวมส่วนหัวที่ระบุไว้บนหน้าเว็บใดๆ ภายในเว็บแอปพลิเคชันของคุณ โดยใช้แอตทริบิวต์ th:insert คุณลักษณะนี้เข้ากันได้กับทั้ง th:insert และ th:replace ซึ่ง Thymeleaf ยอมรับเป็น"ค่านิพจน์แฟรกเมนต์"นิพจน์ส่วนย่อยเหล่านี้ให้ความสามารถในการแทรกส่วนของเนื้อหาที่มีโครงสร้างที่จุดต่างๆ ทั่วทั้งองค์ประกอบของเค้าโครงของคุณ
<div th:insert="~{header :: #nav}"></div>
การรวมมาร์กอัปดังกล่าวไว้ในแท็กเปิด ในไฟล์ home.html จะทำให้ส่วนหัวปรากฏบนหน้าแรก นิพจน์ส่วนย่อยประกอบด้วยองค์ประกอบหลายรายการ โดยสองรายการเป็นวิชาเลือก ในขณะที่อีกสองรายการที่เหลือเป็นภาคบังคับ
⭐ เครื่องหมายตัวหนอน (~) ซึ่งเป็นทางเลือก
ชุดวงเล็บปีกกาที่เป็นทางเลือก ซึ่งแสดงด้วย {}
เทมเพลต HTML ที่กล่าวมาข้างต้นซึ่งรวมมาร์กอัปที่ต้องการไว้นั้น ถูกกำหนดโดยป้ายกำกับ “header.html”
เพื่อให้สามารถรันโค้ด JavaScript ที่ให้มาได้สำเร็จ จำเป็นต้องตรวจสอบให้แน่ใจว่าไฟล์ HTML มีองค์ประกอบ ที่มีแอตทริบิวต์ ID ตั้งค่าเป็น"nav"ซึ่งสามารถทำได้โดยการเพิ่มมาร์กอัปที่เหมาะสมภายในแท็ก ของเอกสาร HTML และกำหนดค่า ID ที่ต้องการตามนั้น
แท้จริงแล้ว การใช้มาร์กอัปดังกล่าวจะให้ผลลัพธ์ที่เหมือนกันกับผลลัพธ์ที่ทำได้ผ่านแนวทางทางเลือกที่มีรายละเอียดก่อนหน้านี้
<div th:insert="header :: #nav"></div>
การเติมเนื้อหาเทมเพลตของคุณ
Thymeleaf รองรับรูปแบบการแสดงออกที่หลากหลายภายในโครงสร้างเทมเพลต ครอบคลุมห้าหมวดหมู่ที่แตกต่างกันดังนี้:
⭐ นิพจน์แฟรกเมนต์ (~{€¦})
⭐การแสดงออกของข้อความ (#{€¦})
⭐ลิงก์นิพจน์ URL (@{€¦})
⭐ นิพจน์ตัวแปร (${€¦})
⭐การเลือกนิพจน์ตัวแปร (*{€¦})
การใช้นิพจน์ข้อความช่วยให้สามารถรวมองค์ประกอบข้อความที่ไม่เกี่ยวข้องภายในเค้าโครงได้อย่างง่ายดาย ด้วยการใช้วิธีการนี้ เราสามารถทดแทนหรือนำเนื้อหาที่มีอยู่ในการออกแบบกลับมาใช้ใหม่ได้อย่างราบรื่น มีความจำเป็นเมื่อใช้นิพจน์ข้อความที่ส่วนประกอบข้อความที่เกี่ยวข้องจะถูกจัดเก็บไว้ในไฟล์ที่อยู่ใต้ไดเร็กทอรี resourcesfolder
ตัวอย่างที่ให้มาใช้ไฟล์ทรัพยากรเฉพาะชื่อ"messages.properties"ซึ่งรวมถึงข้อความที่ตัดตอนมาที่กำหนด:
placeholder.text=Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae obcaecati illo laboriosam.
โปรดพิจารณาว่าข้อความที่ตัดตอนมามีตัวระบุที่เรียกว่า"placeholder.text"การกำหนดนี้ถูกกำหนดเนื่องจากองค์ประกอบการส่งข้อความแต่ละรายการอาจประกอบด้วยการสื่อสารต่างๆ ดังนั้นจึงจำเป็นต้องรวมจุดอ้างอิงเพื่อรวมข้อความเฉพาะภายในการกำหนดค่า
<p th:text="#{placeholder.text}"></p>
การรวมข้อมูลโค้ดที่ให้ไว้ในเนื้อหาของเอกสาร HTML ช่วยให้มั่นใจได้ว่าเนื้อหาตัวยึดตำแหน่งจะปรากฏเป็นย่อหน้าที่สอดคล้องกันภายในอินเทอร์เฟซผู้ใช้ ตรงกันข้ามกับนิพจน์ส่วนย่อย ส่วนประกอบทั้งหมดของนิพจน์ข้อความถือเป็นข้อบังคับและขาดไม่ได้ การแสดงออกของข้อความจำเป็นต้องรวมแต่ละองค์ประกอบที่ระบุโดยไม่มีการละเว้นหรือการทดแทนใดๆ
⭐เครื่องหมายตัวเลข (#)
⭐เหล็กปีกกาคู่หนึ่ง ({})
เนื้อหาข้อความที่อยู่ในองค์ประกอบที่กำหนดว่าเป็น"placeholder"คือข้อความที่เราต้องการสื่อ ซึ่งสามารถเข้าถึงได้ผ่านคุณลักษณะหรือคุณสมบัติที่เกี่ยวข้อง เช่น"placeholder.text"
จัดแต่งทรงผมเทมเพลตของคุณ
องค์ประกอบที่สำคัญอื่นๆ ภายในไดเร็กทอรี “ทรัพยากร” เกี่ยวข้องกับไฟล์คงที่ ซึ่งทำหน้าที่เป็นพื้นที่เก็บข้อมูลสำหรับสไตล์ชีต CSS และองค์ประกอบภาพที่สำคัญต่อการทำงานของเว็บแอปพลิเคชันของคุณ ในการสร้างการเชื่อมต่อระหว่างไฟล์ CSS ที่โฮสต์ภายนอกและเทมเพลต Thymeleaf HTML ต้องใช้นิพจน์ URL ของลิงก์ นิพจน์อเนกประสงค์นี้มีความสามารถในการจัดการทั้ง URL เชิงสัมพันธ์และ URL ที่สมบูรณ์ ให้ความยืดหยุ่นและความสะดวกเมื่อรวมส่วนประกอบการออกแบบที่จำเป็นเข้ากับรากฐานของโครงการของคุณ
<link rel="stylesheet" th:href="@{/css/style.css}" />
การรวมโค้ดที่ให้ไว้ภายในองค์ประกอบ ของเอกสาร HTML ของคุณทำให้สามารถจัดรูปแบบโดยใช้ไฟล์ style.css แยกต่างหาก ซึ่งสามารถพบได้ภายในไดเร็กทอรี static/css ของไฟล์ทรัพยากรของแอปพลิเคชันตัวอย่าง จำเป็นอย่างยิ่งที่จะต้องแน่ใจว่าแอตทริบิวต์ th:href ได้รับการกำหนดด้วยนิพจน์ URL ที่เหมาะสมเมื่อลิงก์ไปยังไฟล์ CSS นี้
Thymeleaf นำเสนอคุณสมบัติที่หลากหลายที่ช่วยให้นักพัฒนาสามารถปรับแต่งการออกแบบเพจของตนได้ หนึ่งในคุณลักษณะเหล่านี้คือแอตทริบิวต์ th:style ซึ่งช่วยให้สามารถรวมองค์ประกอบภาพภายในเค้าโครงได้
<div id="showcase" th:style="'background: url(/images/background.jpg) no-repeat center center fixed;'">
มาร์กอัปใช้การระบุแหล่งที่มา th:style เพื่อตกแต่งภาพพื้นหลังให้กับส่วนใดส่วนหนึ่งของเค้าโครง Thymeleaf มีคุณสมบัติมากกว่าหนึ่งร้อยรายการ ซึ่งสามารถนำไปใช้เพื่อมอบคุณลักษณะด้านโวหารและการใช้งานภายในเค้าโครง
นิพจน์ตัวแปร
นิพจน์ตัวแปรเป็นส่วนที่แพร่หลายและซับซ้อนของไวยากรณ์ของ Thymeleaf ทำให้สามารถดึงข้อมูลจากบริบทของแอปพลิเคชันหรือวัตถุภายในเพื่อรวมเข้ากับเทมเพลตได้ มีนิพจน์ตัวแปรสองแบบให้เลือกตามลักษณะของข้อมูลที่มีไว้สำหรับแสดงในมุมมอง
การใช้เครื่องหมายดอลลาร์เป็นส่วนหนึ่งของนิพจน์ตัวแปรทำให้สามารถดึงข้อมูลที่เกี่ยวข้องกับงานเฉพาะที่เกิดขึ้นภายในบริบทของแอปพลิเคชันได้ ภาพประกอบที่เกี่ยวข้องเกี่ยวข้องกับการรับรายละเอียดเกี่ยวกับผู้ใช้จากโมดอลเฉพาะ เมื่อดำเนินการโครงการตัวอย่างที่ให้มาและนำทางไปยัง http://localhost:8080/ ในเว็บเบราว์เซอร์ บุคคลจะพบอินเทอร์เฟซแบบโมดอล
เมื่อปิดหน้าต่างโมดอลหรือส่งชื่อผ่านหน้าต่างนั้น แอปพลิเคชันจะเปลี่ยนเส้นทางไปยังหน้าแรก เมื่อมาถึงหน้าแรกดังกล่าว ผู้ใช้จะพบเว็บไซต์มาตรฐานที่มีคำทักทาย"ยินดีต้อนรับ"และต่อมาจะแสดงข้อความที่ป้อนจากโมดอลภายในสตริง
แอปพลิเคชันดังกล่าวใช้การใช้นิพจน์ตัวแปรเพื่อให้บรรลุวัตถุประสงค์ ในเอกสาร modal.html โครงสร้างพื้นฐานจะถูกนำเสนอผ่านการรวมมาร์กอัปที่ตามมา:
<form id="form" th:action="@{/home}" method="post">
<input type="text" name="userName"class="form-control" placeholder="Your Name" />
<button type="submit" class="btn">Submit</button>
</form>
เมื่อผู้ใช้ส่งแบบฟอร์ม แอ็ตทริบิวต์ th:action จะถูกทริกเกอร์ ซึ่งค่าจะสอดคล้องกับ POST URL ที่พบในคลาส WebController
@PostMapping("/home")
public String processName(String userName, Model model) {
model.addAttribute("userName", userName);
return "home";
}
เมธอด processName() ใช้เป็นอินพุตสตริงที่ผู้ใช้ให้มาผ่านทางโมดอล และจัดเก็บไว้ในตัวแปรชื่อ ชื่อผู้ใช้ ต่อจากนั้น เมื่อใช้นิพจน์ตัวแปร คอนโทรลเลอร์จะใส่ตัวแปร ชื่อผู้ใช้ ลงในโครงร่าง
<h1>Welcome <span th:text="${userName}"></span>!</h1>
การใช้นิพจน์ตัวแปรการเลือกที่ปรับปรุงด้วยเครื่องหมายดอกจันจะมีคุณค่ามากขึ้นเรื่อยๆ เมื่อความซับซ้อนภายในระบบซอฟต์แวร์เพิ่มมากขึ้น ภาพประกอบที่ใช้งานได้จริงเกี่ยวข้องกับกลไกการรับรองความถูกต้องซึ่งการรวบรวมชื่อผู้ใช้จากอ็อบเจ็กต์ผู้ใช้และการรวมเข้ากับการออกแบบอินเทอร์เฟซเป็นตัวอย่างการทำงานนี้อย่างมีประสิทธิภาพ
เทมเพลตสำรองและตัวเลือกสไตล์
แม้ว่า Thymeleaf จะมีชื่อเสียงในฐานะโซลูชันการสร้างเทมเพลตที่ต้องการสำหรับโปรเจ็กต์ Spring Boot แต่การพิจารณาตัวเลือกอื่นที่มีฟังก์ชันการทำงานที่เทียบเคียงได้ก็เป็นสิ่งสำคัญ หนึ่งในทางเลือกเหล่านี้คือ JavaServer Pages (JSP) ซึ่งจัดเตรียมการสร้างโค้ด Java ฝั่งเซิร์ฟเวอร์ เทมเพลต Groovy ซึ่งอนุญาตให้สร้างเนื้อหาแบบไดนามิกโดยใช้ภาษาสคริปต์ Groovy เทมเพลต FreeMarker ซึ่งเป็นเอ็นจิ้นเทมเพลตโอเพ่นซอร์สที่รองรับภาษาการเขียนโปรแกรมหลายภาษา และเทมเพลต Mustache ซึ่งขึ้นชื่อเรื่องความเรียบง่ายและง่ายต่อการบูรณาการ นอกจากนี้ นักพัฒนายังมีความยืดหยุ่นในการใช้สไตล์ CSS ที่กำหนดเอง หรือใช้เฟรมเวิร์ก CSS ที่มีอยู่แล้วเพื่อออกแบบเค้าโครงหน้า