关的Java全栈Web开发框架Hilla

ld-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 当中的编码将路径与元件举例来说。与许多 JavaScript 元件一样，Hilla 可用元件来表示配置PDF。在这种情况下，当应用程序转到空白两条路线时，它将共享hello-world-view元件。(举例来说，其他两条路线共享额外的个人信息，如图标、副标题和操控。)

配形态设计由 /frontend/views/main-layout.ts 执行，而 hello-world-view 的概要在 /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(便是便是Hel

此表 3 当中的编码结果显示了 Lit 紧密结合配置PDF。如果你与众不同拥护的单 JavaScript 习惯用法，那么举例来说无论如何很可信。如果没有，请注意我近期对 Lit 的参考。该render()方法有交由转换成配置PDF的概要。我们将在这里用它查看某个本质。特别是，我们只想忘了如何将这个前尾端与我们的后尾端 Java 东北侧连接起来。

创设 Java 东北侧

Hilla 紧密结合在 Spring Boot 之下，因此我们可以像本来一样可用 Spring Web紧密结合东北侧。Hilla 共享了额外的功能来自动转化成将在 Lit 前尾端可用的 TypeScript。

/src/java/main/com/example/application首先在被codice_的PDF当中创设一个新PDFMyEndpoint.java。将此表 4 的概要粘贴到该PDF当中。

此表 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 转化成正确的类型适配。

保存这个类PDF后，你可以检视到 Hilla 现在在 /frontend/generated/MyEndpoint.ts 当中转化成了一个新的 TypeScript PDF。我们将可用这个模块化从配置PDF当中浏览东北侧。

注意：免得对这些转化成的PDF进行改回;Hilla 将根据对 Java PDF的改回布满它们。

过去，前往到 frontend/views/helloworld/hello-world-view.ts，我们将在这里可用我们的有趣东北侧。在这种情况下，我们只想要转换成无需codice_ foo() 东北侧(即“bar”)的概要。此表 5 结果显示了你无论如何对 hello-world-view.ts PDF进行的添加。 (举例来说，我现在删除了仅有那时候的编码，只留下了这个此表的预设概要。)

此表 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 模块化当中新增 foo() 函数，然后可用它来codice_我们之后定义的远程后尾端 Java 方法有。

为此，我们可用 Lit TypeScript 原文 @property 在类上定义了一个反应特性，名称为string。我们将可用此特性来磁盘来自应用程序的值。为了填入它，我们codice_ async getString() 方法有，该方法有有趣地codice_ foo() 函数，并将前往值加到 myString。

Hilla 执行了仅有管理工作，之外进行远程借助，因此我们不必慎重考虑不算多。

在 Hilla 当中可用 Vaadin 元件

正如我之后提到的，Hilla 是 Vaadin Fusion，因此可用 Hilla 紧密结合的应用程序界面可以利用你可能从该元件当中了解到的所有精心设计的元件。例如，让我们可用 Vaadin 网格元件来调用区别于副标题和编者的畅销小说集。

首先，我们将创设一个仿真具体来说，它只还包括两个表达的单，如此表 6 下图。这个PDF是一个近似于的 Java 数据库具体来说。将其保存为 /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 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;

}

}

在此表 7 当中，我们准备了几本区别于编者的畅销小说，并将它们加到到 novels 特性当中。然后我们在 getNovels() 东北侧当中官方数据库。

过去，让我们结果显示新数据库，如此表 8 下图。(举例来说，此表 8 只结果显示了编码的改回外。)

此表 8. 可用网格结果显示畅销小说

克隆

//...

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 新增 getNovels 具体来说。然后，我们可用该方法有作为 this.novels 概要的举例来说。

接下来，我们可用 this.novels 为新增的 vaadin-grid 元件共享 .items 特性。最后结果是一个格的单良好的网格元件，而且管理花销很小。

结语

本文参考了基于 Vaadin Fusion 的全栈元件 Hilla。Hilla 为可用拥护的单前尾端紧密结合 Java Web 应用程序界面共享了良好的集成感受。多亏了Vaadin，它有许多有用的元件可供可用。本文下面无论如何亦会让你对Hilla的可用有一个全面性的了解到。

日文版参考

陈豪，51CTO新社区校对，具有6年管理工作知识的高级系统设计工程师。擅长技能有Linux内嵌汇编语言，Python，C，C++，Java，Linux内核设计分析，智能机器人程式设计等。

译文副标题：Intro to Hilla: The full-stack Java framework，编者：Matthew Tyson

。

天津白癜风治疗费用
乐珠滴眼液对复视有效吗
北京看妇科哪个专科医院好
广州看精神病到哪家医院
英太青胶囊和扶他林的区别是什么