建站
咨詢
售后
建站咨詢
新聞中心
審校 | 孫淑娟 梁策
創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站制作、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的湛河網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
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)中的一種獨特框架：類似于 JavaScript 的 Next.js，不同點是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ā)人員，會注意到本文中的示例中使用的包和組件都是以 Vaadin 命名的。但是在以后的版本中Vaadin Fusion 軟件包都將會以 Hilla 重命名。
具有響應(yīng)式前端的 Java Web 開發(fā)
Hilla 將響應(yīng)式 JavaScript 前端和 Spring Java 后端整合到一個統(tǒng)一的構(gòu)建中。本文中的示例將會說明這些組件是如何協(xié)同工作的，以此來介紹Hilla全?？蚣堋Ｔ陂_始調(diào)試前，你需要在系統(tǒng)上安裝 Node.js (npm) 和最新的 JDK。確保 node -v 和 java –version 都可以工作!
首先，打開命令行并通過 npx 搭建一個新項目，如清單 1 所示。
清單 1. 在 Hilla 中搭建一個新項目
npx @vaadin/cli init --hilla foundry-hilla
現(xiàn)在， cd進入新目錄，然后鍵入./mvnw(或mvnw 對于 Windows)。此命令啟動 Maven 的構(gòu)建。你將看到正在構(gòu)建的后端和前端的輸出日志記錄。很快，該應(yīng)用程序?qū)硬⒃陂_發(fā)模式下運行。
圖 1. 訪問 localhost:8080，你應(yīng)該會看到你的 Hilla 應(yīng)用程序啟動并運行
如果你看一下你剛剛構(gòu)建的文件系統(tǒng)，你會看到結(jié)構(gòu)分為標(biāo)準(zhǔn)的 Maven 結(jié)構(gòu)和前端目錄：
項目根目錄包含 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
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],
},
];清單 2 中的代碼將路徑與組件相關(guān)聯(lián)。與許多 JavaScript 框架一樣，Hilla 使用組件來表示視圖。在這種情況下，當(dāng)用戶轉(zhuǎn)到空白路線時，它將提供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
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}`);
}
}
清單 3 中的代碼顯示了 Lit 構(gòu)建視圖。如果你熟悉響應(yīng)式 JavaScript 習(xí)慣用法，那么來源應(yīng)該很清楚。如果沒有，請參閱我最近對 Lit 的介紹。該render()方法負責(zé)輸出視圖的內(nèi)容。我們將在這里用它搜索某個事物。特別是，我們想看看如何將這個前端與我們的后端 Java 端點連接起來。
創(chuàng)建 Java 端點
Hilla 構(gòu)建在 Spring Boot 之上，因此我們可以像往常一樣使用 Spring Web構(gòu)建端點。Hilla 提供了額外的功能來自動生成將在 Lit 前端使用的 TypeScript。
/src/java/main/com/example/application首先在被調(diào)用的文件中創(chuàng)建一個新文件MyEndpoint.java。將清單 4 的內(nèi)容粘貼到該文件中。
清單 4. MyEndpoint.java
package com.example.application;
import com.vaadin.flow.server.auth.AnonymousAllowed;
import dev.hilla.Endpoint;
import dev.hilla.Nonnull;
@Endpoint
@AnonymousAllowed
Public @Nonnull class MyEndpoint {
public String foo() {
return "bar";
}
}
Hilla 的 @Endpoint注釋告訴框架這個類是一個 REST API。該類也使用注解進行@AnonymousAllowed注解，因為默認情況下，Hilla 通過 Spring 安全性保護所有端點。@Nonnull注釋為前端 TypeScript 生成正確的類型綁定。
保存這個類文件后，你可以觀察到 Hilla 已經(jīng)在 /frontend/generated/MyEndpoint.ts 中生成了一個新的 TypeScript 文件。我們將使用這個模塊從視圖中點擊端點。
注意：不要對這些生成的文件進行更改;Hilla 將根據(jù)對 Java 文件的更改覆蓋它們。
現(xiàn)在，返回到 frontend/views/helloworld/hello-world-view.ts，我們將在這里使用我們的簡單端點。在這種情況下，我們想要輸出需要調(diào)用 foo() 端點(即“bar”)的內(nèi)容。清單 5 顯示了你應(yīng)該對 hello-world-view.ts 文件進行的添加。 (請注意，我已經(jīng)刪除了大部分以前的代碼，只留下了這個清單的附加內(nèi)容。)
清單 5. Hello-world-view.ts
//...
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();
}
}
這里的要點是從 MyEndpoint 模塊中導(dǎo)入 foo() 函數(shù)，然后使用它來調(diào)用我們之前定義的遠程后端 Java 方法。
為此，我們使用 Lit TypeScript 注釋 @property 在類上定義了一個反應(yīng)屬性，名稱為string。我們將使用此屬性來存儲來自服務(wù)器的值。為了填充它，我們調(diào)用 async getString() 方法，該方法簡單地調(diào)用 foo() 函數(shù)，并將返回值放入 myString。
Hilla 處理了大部分工作，包括進行遠程獲取，因此我們不必考慮太多。
在 Hilla 中使用 Vaadin 組件
正如我之前提到的，Hilla 是 Vaadin Fusion，因此使用 Hilla 構(gòu)建的應(yīng)用程序可以利用你可能從該框架中了解的所有精心設(shè)計的組件。例如，讓我們使用 Vaadin 網(wǎng)格組件來加載帶有標(biāo)題和作者的小說集。
首先，我們將創(chuàng)建一個模型對象，它只包含兩個字符串，如清單 6 所示。這個文件是一個典型的 Java 數(shù)據(jù)對象。將其保存為 /src/main/java/com/example/application/Novel.java。
清單 6. 用于存儲小說的模型對象
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;
}
}
在清單 7 中，我們提供來自 MyEndpoint 的小說列表。
清單 7. 帶有我最喜歡的小說列表的 MyEndpoint
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
@AnonymousAllowed
public class MyEndpoint {
private final Listnovels = 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 ListgetNovels() {
return this.novels;
}
}
在清單 7 中，我們準(zhǔn)備了幾本帶有作者的小說，并將它們插入到 novels 屬性中。然后我們在 getNovels() 端點中公開數(shù)據(jù)。
現(xiàn)在，讓我們顯示新數(shù)據(jù)，如清單 8 所示。(請注意，清單 8 只顯示了代碼的更改部分。)
清單 8. 使用網(wǎng)格顯示小說
//...
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();
}
在此清單中，我們從 Hilla 為我們生成的 frontend/generated/MyEndpont 導(dǎo)入 getNovels 對象。然后，我們使用該方法作為 this.novels 內(nèi)容的來源。
接下來，我們使用 this.novels 為導(dǎo)入的 vaadin-grid 組件提供 .items 屬性。最終結(jié)果是一個格式良好的網(wǎng)格組件，而且工作量很小。
結(jié)語
本文介紹了基于 Vaadin Fusion 的全?？蚣?Hilla。Hilla 為使用響應(yīng)式前端構(gòu)建 Java Web 應(yīng)用程序提供了良好的集成體驗。多虧了Vaadin，它有許多有用的組件可供使用。本文示例應(yīng)該會讓你對Hilla的使用有一個初步的了解。
譯者介紹
陳豪，社區(qū)編輯，具有6年工作經(jīng)驗的高級系統(tǒng)工程師。擅長技能有Linux內(nèi)嵌匯編語言，Python，C，C++，Java，Linux內(nèi)核分析，智能機器人軟件設(shè)計等。
原文標(biāo)題：??Intro to Hilla: The full-stack Java framework??，作者：Matthew Tyson
名稱欄目：簡介Java全棧Web開發(fā)框架Hilla
分享路徑：http://www.dlmjj.cn/article/djihogc.html
