DEV Community

Pramoth Suwanpech
Pramoth Suwanpech

Posted on • Updated on

เริ่มต้น Quarkus 3 part 2.1 Web

ใน 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>
Enter fullscreen mode Exit fullscreen mode

เมื่อเซฟมันก็จะไปโหลด deps มาให้เลย (เราไม่ต้องสนใจ dev ต่อ)
เราเริ่มสร้าง template แรกเลยโดย qute จะไปอ่าน template จาก 2 ที่ด้วยกัน

  1. แบบไม่มี controller มันจะไปอ่านที่ src/main/resource/templates/pub/ เวลาเข้าถึงก็เข้าถึงได้ตรงๆ ที่ path /file เลย เช่น src/main/resource/templates/pub/foo.html จะเข้าถึงได้ที่ /foo and /foo.html ได้เลย
  2. แบบอ้างอิงกับ 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>
Enter fullscreen mode Exit fullscreen mode

ใน https://quarkus.io/guides/qute เขาไม่ได้ใส่ quarkus-rest-qute คิดว่าเอกสารผิดนะ ถ้าไม่ใส่ เราต้องเรียก TemplateInstance.data().render() เอง ContainerResponseFilter จะไม่ทำงาน

Image description

ที่ 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>
Enter fullscreen mode Exit fullscreen mode

จะมีการใช้ Qute expression {name} ซึ่งกันนี้เราจะส่งเป็นพรามิเตอร์มาจาก cpntroller จากตรงนี้ return hello.data("name", name);

Type-safe templates

  1. เราจะจัดโครงสร้าง directory ด้วย ชื่อคลาส/template_method เช่น คลาส HelloResource และมี template method ชื่อ hello เทมเพลทจะอยู่ src/main/resources/templates/HelloResource/hello.html
  2. ให้สร้าง static inner class Rest controller @CheckedTemplate static class Template {} ซึ่งให้กำหนด template method ไว้ในนั้น
  3. method กำหนด แบบนี้ public static native TemplateInstance template_method_name(String template_param)

ตัวอย่าง

Image description

อ้างอิง
https://quarkus.io/guides/qute

part 1 https://dev.to/pramoth/erimtn-quarkus-3-part-1-ane

Top comments (0)