簡介Java全棧Web開發(fā)框架Hilla _生活知道

譯者：陳豪
Hilla是基于 Vaadin Fusion，結(jié)合了響應(yīng)式 JavaScript 前端和 Spring Java 后端，用于全棧 Web 開發(fā)的框架。

文章插圖
Hilla將基于 Spring 的 Java 后端與使用 Lit 構(gòu)建的 TypeScript 前端相結(jié)合，此處提到的Lit是一種快速、響應(yīng)式的 JavaScript 框架。基于 Vaadin Fusion 的 Hilla 是 Java 生態(tài)系統(tǒng)中的一種獨(dú)特框架：類似于 JavaScript 的 Next.js，不同點(diǎn)是Hillary是基于 Spring 的 Java 后端。本文將幫助你開始使用 Hilla，包括如何構(gòu)建基本的Web 應(yīng)用程序、構(gòu)建前端和添加新組件。
Hilla and Vaadin
在今年1 月，Vaadin 的開發(fā)人員宣布將 Vaadin Fusion 重命名為 Hilla 。對于已經(jīng)熟悉 Fusion 的開發(fā)人員來說，只是名稱發(fā)生了變化。對于剛剛學(xué)習(xí) Hilla 的開發(fā)人員，會(huì)注意到本文中的示例中使用的包和組件都是以 Vaadin 命名的。但是在以后的版本中Vaadin Fusion 軟件包都將會(huì)以 Hilla 重命名。
具有響應(yīng)式前端的 Java Web 開發(fā)
Hilla 將響應(yīng)式 JavaScript 前端和 Spring Java 后端整合到一個(gè)統(tǒng)一的構(gòu)建中。本文中的示例將會(huì)說明這些組件是如何協(xié)同工作的，以此來介紹Hilla全棧框架。在開始調(diào)試前，你需要在系統(tǒng)上安裝 Node.js (npm)和最新的 JDK 。確保 node -v 和 java version 都可以工作!
【簡介Java全棧Web開發(fā)框架Hilla】首先，打開命令行并通過 npx 搭建一個(gè)新項(xiàng)目，如清單1 所示。
清單1.在 Hilla 中搭建一個(gè)新項(xiàng)目
復(fù)制
npx @vaadin/cli init –hilla foundry-hilla1.
現(xiàn)在，cd進(jìn)入新目錄，然后鍵入./mvnw(或mvnw 對于 Windows) 。此命令啟動(dòng) Maven 的構(gòu)建。你將看到正在構(gòu)建的后端和前端的輸出日志記錄。很快，該應(yīng)用程序?qū)?dòng)并在開發(fā)模式下運(yùn)行。

文章插圖
圖1.訪問 localhost:8080，你應(yīng)該會(huì)看到你的 Hilla 應(yīng)用程序啟動(dòng)并運(yùn)行
如果你看一下你剛剛構(gòu)建的文件系統(tǒng)，你會(huì)看到結(jié)構(gòu)分為標(biāo)準(zhǔn)的 Maven 結(jié)構(gòu)和前端目錄：

文章插圖
項(xiàng)目根目錄包含 Maven 構(gòu)建文件(pom.xml) ，它將 Java 代碼從/src 構(gòu)建到/target，并調(diào)用 JavaScript 構(gòu)建工具(vite.js)來構(gòu)建包含在/frontend 中的前端應(yīng)用程序。
構(gòu)建前端
在 Hilla 中，前端是從/front-end/index.html、/front-end/index.ts和routes.ts文件中引導(dǎo)的。這些文件一起確定路由并將內(nèi)容設(shè)置到給定路由的頁面。這些頁面中最具啟發(fā)性的是routes.ts，如清單2 所示。
清單2.Routes.ts
復(fù)制
import { Route } from @vaadin/router;import ./views/helloworld/hello-world-view;import ./views/main-layout;export type ViewRoute = Route &{ title?: string; icon?: string; children?: ViewRoute[];};export const views: ViewRoute[]= [// place routes below (more info https://vaadin.com/docs/latest/fusion/routing/overview){ path:, component:hello-world-view, icon:, title:,},{ path:hello, component:hello-world-view, icon:la la-globe, title:Hello World,},{ path:about, component:about-view, icon:la la-file, title:About, action: async (context, command)=>{ await import(./views/about/about-view); return;},},];export const routes: ViewRoute[]= [{ path:, component:main-layout, children:[…views],},];1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34.35.36.37.38.39.40.
清單2 中的代碼將路徑與組件相關(guān)聯(lián) 。與許多 JavaScript 框架一樣， Hilla 使用組件來表示視圖。在這種情況下，當(dāng)用戶轉(zhuǎn)到空白路線時(shí)，它將提供hello-world-view組件。(請注意，其他路線提供額外的信息，如圖標(biāo)、標(biāo)題和操作。)
主布局由/frontend/views/main-layout.ts 處理，而 hello-world-view 的內(nèi)容在/frontend/views/helloworld/hello-world-view.ts 中，如清單3 所示。
清單3. hello-world-view.ts
復(fù)制
import @vaadin/button;import @vaadin/notification;import { Notification } from @vaadin/notification;import @vaadin/text-field;import { html } from lit;import { customElement } from lit/decorators.js;import { View } from ../../views/view;@customElement(hello-world-view)export class HelloWorldView extends View { name =; connectedCallback(){ super.connectedCallback(); this.classList.add(flex,p-m,gap-m,items-end);} render(){ return html Say hello; } nameChanged(e: CustomEvent){ this.name = e.detail.value;} sayHello(){ Notification.show(Hello ${this.name});}}1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.
清單3 中的代碼顯示了 Lit 構(gòu)建視圖。如果你熟悉響應(yīng)式 JavaScript 習(xí)慣用法，那么來源應(yīng)該很清楚。如果沒有，請參閱我最近對 Lit 的介紹。該render()方法負(fù)責(zé)輸出視圖的內(nèi)容。我們將在這里用它搜索某個(gè)事物。特別是，我們想看看如何將這個(gè)前端與我們的后端 Java 端點(diǎn)連接起來。
創(chuàng)建 Java 端點(diǎn)
Hilla 構(gòu)建在 Spring Boot 之上，因此我們可以像往常一樣使用 Spring Web構(gòu)建端點(diǎn) 。Hilla 提供了額外的功能來自動(dòng)生成將在 Lit 前端使用的 TypeScript 。
/src/java/main/com/example/application首先在被調(diào)用的文件中創(chuàng)建一個(gè)新文件MyEndpoint.java 。將清單4 的內(nèi)容粘貼到該文件中。
清單4. MyEndpoint.java
復(fù)制
package com.example.application;import com.vaadin.flow.server.auth.AnonymousAllowed;import dev.hilla.Endpoint;import dev.hilla.Nonnull;@Endpoint@AnonymousAllowedPublic @Nonnull class MyEndpoint { public String foo(){ return “bar”;}}1.2.3.4.5.6.7.8.9.10.11.12.13.
Hilla 的@Endpoint注釋告訴框架這個(gè)類是一個(gè) REST API 。該類也使用注解進(jìn)行@AnonymousAllowed注解，因?yàn)槟J(rèn)情況下，Hilla 通過 Spring 安全性保護(hù)所有端點(diǎn) 。@Nonnull注釋為前端 TypeScript 生成正確的類型綁定。
保存這個(gè)類文件后，你可以觀察到 Hilla 已經(jīng)在/frontend/generated/MyEndpoint.ts 中生成了一個(gè)新的 TypeScript 文件。我們將使用這個(gè)模塊從視圖中點(diǎn)擊端點(diǎn) 。
注意：不要對這些生成的文件進(jìn)行更改;Hilla 將根據(jù)對 Java 文件的更改覆蓋它們。
現(xiàn)在，返回到 frontend/views/helloworld/hello-world-view.ts，我們將在這里使用我們的簡單端點(diǎn) 。在這種情況下，我們想要輸出需要調(diào)用 foo()端點(diǎn)(即“bar”)的內(nèi)容。清單5 顯示了你應(yīng)該對 hello-world-view.ts 文件進(jìn)行的添加。(請注意，我已經(jīng)刪除了大部分以前的代碼，只留下了這個(gè)清單的附加內(nèi)容。)
清單5. Hello-world-view.ts
復(fù)制
//…import { customElement,property } from lit/decorators.js;import { foo } from Frontend/generated/MyEndpoint;@customElement(hello-world-view)export class HelloWorldView extends View {//…@property() myString: string =””; constructor(){ super(); this.getString();} render(){ return html //…
${this.myString}; } async getString(){ this.myString = await foo();}}1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.這里的要點(diǎn)是從 MyEndpoint 模塊中導(dǎo)入 foo()函數(shù) ，然后使用它來調(diào)用我們之前定義的遠(yuǎn)程后端 Java 方法。
為此，我們使用 Lit TypeScript 注釋@property 在類上定義了一個(gè)反應(yīng)屬性，名稱為string 。我們將使用此屬性來存儲來自服務(wù)器的值。為了填充它，我們調(diào)用 async getString()方法，該方法簡單地調(diào)用 foo()函數(shù) ，并將返回值放入 myString 。
Hilla 處理了大部分工作，包括進(jìn)行遠(yuǎn)程獲取，因此我們不必考慮太多。
在 Hilla 中使用 Vaadin 組件
正如我之前提到的，Hilla 是 Vaadin Fusion ，因此使用 Hilla 構(gòu)建的應(yīng)用程序可以利用你可能從該框架中了解的所有精心設(shè)計(jì)的組件。例如，讓我們使用 Vaadin 網(wǎng)格組件來加載帶有標(biāo)題和作者的小說集。
首先，我們將創(chuàng)建一個(gè)模型對象，它只包含兩個(gè)字符串，如清單6 所示。這個(gè)文件是一個(gè)典型的 Java 數(shù)據(jù)對象。將其保存為/src/main/java/com/example/application/Novel.java 。
清單6.用于存儲小說的模型對象
復(fù)制
package com.example.application;import javax.validation.constraints.NotBlank;public class Novel {@NotBlank private String title;@NotBlank private String author; public Novel(String title, String author){ this.title = title; this.author = author;} public String getTitle(){ return title;} public void setTitle(String title){ this.title = title;} public String getAuthor(){ return author;} public void setAuthor(String author){ this.author = author;}}1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.
在清單7 中，我們提供來自 MyEndpoint 的小說列表。
清單7.帶有我最喜歡的小說列表的 MyEndpoint
復(fù)制
package com.example.application;import java.util.*;import java.util.ArrayList;import java.util.List;import com.vaadin.flow.server.auth.AnonymousAllowed;import dev.hilla.Endpoint;import dev.hilla.Nonnull;@Endpoint@AnonymousAllowedpublic class MyEndpoint { private final List novels = new ArrayList(); MyEndpoint(){ Novel empireFalls = new Novel(“Empire Falls”,”Richard Russo”); Novel reservationBlues = new Novel(“Reservation Blues”,”Sherman Alexie”); Novel theAthenianMurders = new Novel(“The Athenian Murders”,”Jos Carlos Somoza”); this.novels.add(empireFalls); this.novels.add(reservationBlues); this.novels.add(theAthenianMurders);} public @Nonnull List getNovels(){ return this.novels;}}1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.
在清單7 中，我們準(zhǔn)備了幾本帶有作者的小說，并將它們插入到 novels 屬性中。然后我們在 getNovels()端點(diǎn)中公開數(shù)據(jù) 。
現(xiàn)在，讓我們顯示新數(shù)據(jù)，如清單8 所示。(請注意，清單8 只顯示了代碼的更改部分。)
清單8.使用網(wǎng)格顯示小說
復(fù)制
//…import { foo, getNovels } from Frontend/generated/MyEndpoint;import @vaadin/grid/vaadin-grid;@customElement(hello-world-view)export class HelloWorldView extends View {@property() novels: object ={}; constructor(){ //… this.initNovels();} render(){ return html ; } async initNovels(){ this.novels = await getNovels();}1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.
在此清單中，我們從 Hilla 為我們生成的 frontend/generated/MyEndpont 導(dǎo)入 getNovels 對象。然后，我們使用該方法作為 this.novels 內(nèi)容的來源。
接下來，我們使用 this.novels 為導(dǎo)入的 vaadin-grid 組件提供.items 屬性。最終結(jié)果是一個(gè)格式良好的網(wǎng)格組件，而且工作量很小。
結(jié)語
本文介紹了基于 Vaadin Fusion 的全棧框架 Hilla 。Hilla 為使用響應(yīng)式前端構(gòu)建 Java Web 應(yīng)用程序提供了良好的集成體驗(yàn) 。多虧了Vaadin ，它有許多有用的組件可供使用。本文示例應(yīng)該會(huì)讓你對Hilla的使用有一個(gè)初步的了解。