译者|陈浩校对|SunShujuanLiangCeHilla基于VaadinFusion，结合了响应式JavaScript前端和SpringJava后端，一个全栈Web开发框架。Hilla将基于Spring的Java后端与使用Lit构建的TypeScript前端相结合，Lit是此处提到的一种快速响应的JavaScript框架。Hillary基于VaadinFusion，是Java生态系统中独一无二的框架：类似于Next.jsforJavaScript，只是Hillary是基于Spring的Java后端。本文将帮助您开始使用Hilla，包括如何构建基本的Web应用程序、构建前端以及添加新组件。Hilla和Vaadin今年1月，Vaadin的开发者宣布将VaadinFusion更名为Hilla。对于已经熟悉Fusion的开发人员来说，这只是一个名称更改。对于刚接触Hilla的开发人员，您会注意到本文示例中使用的包和组件是以Vaadin命名的。但VaadinFusion包将在未来的版本中重命名为Hilla。使用反应式前端的JavaWeb开发Hilla将反应式JavaScript前端和SpringJava后端组合到一个统一的构建中。本文中的示例将说明这些组件如何协同工作以介绍Hilla全栈框架。在开始调试之前，您需要在系统上安装Node.js(npm)和最新的JDK。确保node-v和java--version都能正常工作！首先，打开命令行并通过npx构建一个新项目，如清单1所示。清单1.在Hillanpx中设置一个新项目@vaadin/cliinit--hillafoundry-hilla现在，cd进入新目录并键入./mvnw（或Windows的mvnw）。此命令启动Maven构建。您将看到正在构建的后端和前端的输出日志记录。很快，该应用程序将在开发模式下启动并运行。图1.访问localhost:8080，您应该会看到Hilla应用程序已启动并正在运行包含Maven构建文件（pom.xml），它将/src中的Java代码构建到/target中，并调用JavaScript构建工具（vite.js）构建包含在/frontend中的前端应用程序。构建前端在Hilla中，前端是从/front-end/index.html、/front-end/index.ts和routes.ts文件引导的。这些文件一起确定路由并将内容设置为给定路由的页面。这些页面中最具启发性的是routes.ts，如清单2所示。清单2.Routes.tsimport{Route}from'@vaadin/router';import'./views/helloworld/hello-world-view';import'./views/main-layout';exporttypeViewRoute=Route&{标题？：字符串；图标？：字符串；children?:ViewRoute[];};exportconstviews:ViewRoute[]=[//在下面放置路由（更多信息https://vaadin.com/docs/latest/fusion/routing/overview）{path:'',组件：'hello-world-view'，图标：''，标题：''，}，{路径：'你好'，组件：'hello-world-view'，图标：'lala-globe'，标题：'HelloWorld',},{路径：'关于'，组件：'关于视图'，图标：'lala-file'，标题：'关于'，操作：异步（_context，_command）=>{等待导入('./views/about/about-view');返回;},},];exportconstroutes:ViewRoute[]=[{path:'',component:'main-layout',children:[...views],},];清单2中的代码将路径与组件相关联。与许多JavaScript框架一样，Hilla使用组件来表示视图。在这种情况下，当用户转到空白路径时，它将为hello-world-view组件提供服务。（请注意，其他路线提供了额外的信息，例如图标、标题和操作。)主布局由/frontend/views/main-layout.ts处理，hello-world-view的内容在/frontend/views/helloworld/hello-world-view.ts，如清单3所示。清单3.hello-world-view.tsimport'@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')exportclassHelloWorldView扩展视图{名称='';connectedCallback(){super.connectedCallback();this.classList.add('flex','p-m','gap-m','items-end');}render(){returnhtml`打个招呼`;}nameChanged(e:CustomEvent){this.name=e.detail.value;}sayHello(){Notification.show(`Hello${this.name}`);}}清单3中的代码显示了Lit构建视图。如果您熟悉响应式JavaScript习语，那么来源应该很清楚。如果没有，请参阅我最近对??Lit的介绍。render()方法负责输出视图的内容。我们将在这里使用它来搜索某些东西。特别是，我们希望了解如何将此前端与我们的后端Java端点连接起来。创建Java端点Hilla构建在SpringBoot之上，因此我们可以像往常一样使用SpringWeb构建端点。Hilla提供了额外的功能来自动生成将在Lit前端中使用的TypeScript。/src/java/main/com/example/application首先在被调用文件中创建一个新文件MyEndpoint.java。将清单4的内容粘贴到该文件中。清单4.MyEndpoint.javapackagecom.example.application;importcom.vaadin.flow.server.auth.AnonymousAllowed;importdev.hilla.Endpoint;importdev.hilla.Nonnull;@Endpoint@AnonymousAllowedPublic@NonnullclassMyEndpoint{publicStringfoo(){返回“栏”；}}Hilla的@Endpoint注释告诉框架这个类是一个RESTAPI。该类还使用@AnonymousAllowed注释进行注释，因为默认情况下，Hilla使用SpringSecurity保护所有端点。@Nonnull注释为前端TypeScript生成正确的类型绑定。保存这个class文件后，可以看到Hilla在/frontend/generated/MyEndpoint.ts中生成了一个新的TypeScript文件。我们将使用此模块从视图中单击端点。注意：不要更改这些生成的文件；Hilla将用对Java文件的更改覆盖它们。现在，回到frontend/views/helloworld/hello-world-view.ts，我们将在其中使用我们的简单端点。在这种情况下，我们想要输出一些需要调用foo()端点的东西（即“bar”）。清单5显示了您应该对hello-world-view.ts文件添加的内容。（请注意，我已经删除了大部分以前的代码，只留下了这个清单。)清单5.Hello-world-view.ts//...import{customElement,property}from'lit/decorators.js';import{foo}from'Frontend/generated/MyEndpoint';@customElement('hello-世界观')exportclassHelloWorldViewextendsView{//...@property()myString:string="";构造函数（）{超级（）;这个.getString();}render(){returnhtml`//...${this.myString}
`;}asyncgetString(){this.myString=awaitfoo();}}这里的重点是从MyEndpoint模块导入foo()函数，然后用它来调用我们之前定义的远程后端Java方法。为此，我们使用LitTypeScript注释@property在类上定义一个名为string的响应式属性。我们将使用此属性来存储来自服务器的值。为了填充它，我们调用异步getString()方法，该方法只调用foo()函数，并将返回值放入myString。Hilla处理大部分工作，包括做远程抓取，所以我们不必考虑太多。在Hilla中使用Vaadin组件正如我之前提到的，Hilla是VaadinFusion，因此使用Hilla构建的应用程序可以利用您可能从框架中了解到的所有精心设计的组件。例如，让我们使用Vaadin网格组件加载一组带有标题和作者的小说。首先，我们将创建一个只包含两个字符串的模型对象，如清单6所示。这个文件是一个典型的Java数据对象。将其保存为/src/main/java/com/example/application/Novel.java。清单6.用于存储小说包的模型对象com.example.application;importjavax.validation.constraints.NotBlank;publicclassNovel{@NotBlankprivateStringtitle;@NotBlank私有字符串作者；publicNovel(Stringtitle,Stringauthor){this.title=title;this.author=作者；}publicStringgetTitle(){返回标题；}publicvoidsetTitle(Stringtitle){this.title=title;}publicStringgetAuthor(){返回作者；publicvoidsetAuthor(Stringauthor){this.author=author;在清单7中，我们提供了来自MyEndpoint的小说列表。清单7.MyEndpointpackage和我最喜欢的小说列表dev.hilla.Endpoint;importdev.hilla.Nonnull;@Endpoint@AnonymousAllowedpublicclassMyEndpoint{privatefinalListnovels=newArrayList();MyEndpoint(){NovelempireFalls=newNovel("EmpireFalls","RichardRusso");NovelreservationBlues=newNovel("ReservationBlues","ShermanAlexie");NoveltheAthenianMurders=newNovel("TheAthenianMurders","JoséCarlosSomoza");.add（帝国瀑布）；this.novels.add(reservationBlues);this.novels.add（雅典谋杀案）；}public@NonnullListgetNovels(){returnthis.novels;在清单7中，我们准备了几本带有作者的小说并将它们插入到novels属性中。然后我们在getNovels()端点公开数据。现在，让我们显示新数据，如清单8所示。（请注意，清单8仅显示代码的更改部分。)清单8.使用网格显示小说//...import{foo,getNovels}from'Frontend/generated/MyEndpoint';import'@vaadin/grid/vaadin-grid';@customElement('hello-world-view')exportclassHelloWorldViewextendsView{@property()小说：object={};constructor(){//...this.initNovels();}render(){returnhtml``;}asyncinitNovels(){this.novels=awaitgetNovels();}在此清单中，我们从Hilla为我们生成的frontend/generated/MyEndpont导入getNovels对象。然后我们使用该方法作为this.novels内容的来源。接下来，我们使用this.novels为导入的vaadin-grid组件提供.items属性。最终结果是一个结构良好的网格组件，只需很少的努力。结论本文介绍了Hilla，一个基于VaadinFusion的全栈框架。Hilla为构建具有响应式前端的JavaWeb应用程序提供了良好的集成体验。感谢Vaadin，它提供了许多有用的组件。本文中的示例应该可以让您初步了解Hilla的使用。译者介绍陈浩，社区编辑，资深系统工程师，拥有6年工作经验。擅长Linux嵌入式汇编语言、Python、C、C++、Java、Linux内核分析、智能机器人软件设计等。原标题：IntrotoHilla:Thefull-stackJavaframework，作者：MatthewTyson
