ใน part นี้เราจะเริ่มเพิ่ม html template Qute เพื่อให้ render html ที่ server side
เริ่ม !quarkus dev ก่อนเลย เพราะว่ามันจะ auto reload dependency ให้ด้วย สุดยอดดดด
จากนั้นเราแก้ pom.xml โดยเพิ่ม
<dependency> <groupId>io.quarkiverse.qute.web</groupId> <artifactId>quarkus-qute-web</artifactId>
</dependency>
เมื่อเซฟมันก็จะไปโหลด deps มาให้เลย (เราไม่ต้องสนใจ dev ต่อ)
เราเริ่มสร้าง template แรกเลยโดย qute จะไปอ่าน template จาก 2 ที่ด้วยกัน
- แบบไม่มี controller มันจะไปอ่านที่
src/main/resource/templates/pub/เวลาเข้าถึงก็เข้าถึงได้ตรงๆ ที่ path /file เลย เช่นsrc/main/resource/templates/pub/foo.htmlจะเข้าถึงได้ที่/fooand/foo.htmlได้เลย - แบบอ้างอิงกับ Rest controller อันนี้เราจะวางที่
src/main/resources/templatesและเข้าถึงผ่าน rest endpoint ของเรา
เราเน้นแบบ rest นะ(ใน part1 เรามี rest ใน project แล้ว)
ให้เราเพิ่ม controller แบบนี้ (ลบ GreetingResource ออกด้วยนะครับ มันพาธเดียวกัน)
ดังนั้น เพื่อให้มันรองรับ rest endpoint แบบไม่ต้องเมนวลให้เพิ่ม
<dependency> <groupId>io.quarkus</groupId> <artifactId>quarkus-rest-qute</artifactId> </dependency>
ใน https://quarkus.io/guides/qute เขาไม่ได้ใส่ quarkus-rest-qute คิดว่าเอกสารผิดนะ ถ้าไม่ใส่ เราต้องเรียก TemplateInstance.data().render() เอง ContainerResponseFilter จะไม่ทำงาน
ที่ capture รูปมาให้ดูเพราะจะได้เห็น template path จากในโค๊ด @Inject Template hello เป็นการ inject qute template instance เข้ามา ซึ่ง template file เราอยู่ที่ src/main/resources/templates/hello.html ซึ่งจะชื่อเดียวกับ instance variable(hello) ถ้าเราอยาก custom path ให้ใช้ @Location
มาดู hello.html กัน
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Hello {name}!</h1>
</body>
</html>
จะมีการใช้ Qute expression {name} ซึ่งกันนี้เราจะส่งเป็นพรามิเตอร์มาจาก cpntroller จากตรงนี้ return hello.data("name", name);
Type-safe templates
- เราจะจัดโครงสร้าง directory ด้วย
ชื่อคลาส/template_methodเช่น คลาส HelloResource และมี template method ชื่อ hello เทมเพลทจะอยู่src/main/resources/templates/HelloResource/hello.html - ให้สร้าง static inner class Rest controller
@CheckedTemplate static class Template {}ซึ่งให้กำหนด template method ไว้ในนั้น - method กำหนด แบบนี้
public static native TemplateInstance template_method_name(String template_param)
ตัวอย่าง
อ้างอิง
https://quarkus.io/guides/qute
Discover more from Coursity
Subscribe to get the latest posts sent to your email.