跳到主要内容

Hilla

信息

Hilla 是一个用于 Java 的全栈 Web 框架。 它可以通过将 Spring Boot 后端与 React 前端相结合来帮助您更快地构建更好的业务应用程序。 此外，它还具有 40 多个 UI 组件，你可以将其用于更专业的应用程序。

官方网站

快速上手​

系统环境​

除了常用的设备和工具外，只需要两件基本的东西：

  • Node.js 18.0 或更高版本。
  • JDK 17 或更高版本。

创建项目​

使用官方项目生成器​

前往 https://start.vaadin.com/ 创建项目。

使用 Spring initializr​

前往 https://start.spring.io/ 或使用 IDEA 创建 Spring 项目。 创建项目时注意：

  • Project（项目类型）：Gradle - Kotlin
  • Language（项目语言）：Kotlin
  • Project Metadata：按需自定。
  • Dependencies（项目依赖）：

选用 Hilla 时通常无需依赖 Spring Web； 也无需依赖 Spring Reactive Web（Vaadin Flow 了解一下？

使用 Hilla CLI​

使用 Hilla CLI 创建的项目默认使用 Maven 构建，如果想使用 Gradle 构建，请直接使用 Spring initializr 创建项目

在终端执行以下命令，使用 Hilla CLI 创建新项目：

npx @hilla/cli init my-hilla-app

默认会创建 React 应用，如果想使用 Lit 的话，需要加上 --lit 选项：

npx @hilla/cli init --lit my-hilla-app

也可以加上 --auth 选项来创建具有基本 安全配置 的项目：

npx @hilla/cli init --lit --auth hilla-with-auth
Hilla CLI 帮助​
$ npx @hilla/cli init -h
用法: hilla-init [options] <projectName>

选项：
  --empty            创建一个没有菜单和一个空视图的项目
  --react            UI 使用 React（默认）
  --lit              UI 使用 Lit
  --latest           使用最新的主要版本（默认）
  --pre              使用最新的预发布版本（如果可用）
  --next             使用下一个主要版本的预发布版本（如果可用）
  --auth             向应用程序添加身份验证支持
  --push             向应用程序添加推送支持/响应端点
  --git              初始化项目的 Git 仓库并提交初始文件
  --preset <preset>  使用碰巧知道存在的给定预设
  --server <server>  仅用于内部测试
  -h, --help         显示命令帮助

项目结构​

目录说明
frontend/客户端源代码目录
    index.html HTML 模板
    index.ts前端入口点，包含使用 Hilla Router 的客户端路由设置
    main-layout.ts主布局 Web 组件，包含导航菜单，使用 应用布局
    views/UI 视图和 Web 组件（TypeScript）
    themes/自定义 CSS 样式
src/main/java/<groupId>/服务器端源代码目录，包含服务端 Java 视图
    Application.java服务端入口

端点​

参考：Endpoints | Guides | React | Hilla Docs

package zone.yue.demo

import com.vaadin.flow.server.auth.AnonymousAllowed
import dev.hilla.Endpoint

@Endpoint
@AnonymousAllowed
class HelloEndpoint {
    fun sayHello(name: String) = if (name !== "") "Hello $name" else ""
}

注解​

@Nonnull​

用于将字段、方法、参数或类型参数标记为不可为 null 的注解。 它被 Typescript 生成器用作类型可空性信息的来源。 此注解的存在只是为了方便起见，因为传统的 jakarta.annotation.Nonnull 注解不适用于类型参数。

安全​

使用 Spring Security 进行身份验证​

参考：Authentication with Spring Security | Security | Guides | React | Hilla Docs

SecurityConfig.kt
import com.vaadin.flow.spring.security.VaadinWebSecurity
import org.springframework.context.annotation.Bean
import org.springframework.context.annotation.Configuration
import org.springframework.security.config.annotation.web.invoke
import org.springframework.security.config.annotation.web.builders.HttpSecurity
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity
import org.springframework.security.core.userdetails.User
import org.springframework.security.provisioning.InMemoryUserDetailsManager
import org.springframework.security.provisioning.UserDetailsManager

@EnableWebSecurity
@Configuration
class SecurityConfig : VaadinWebSecurity() {
    override fun configure(http: HttpSecurity) {
        // 必须先写自己的配置再调用父类的配置
        http {
            authorizeHttpRequests {
                // 不需要写这个，父类配置里有，写了将导致父类配置全部失效
                // authorize(anyRequest, denyAll)
            }
            formLogin { }
        }

        // 允许 Hilla 内部请求的默认安全策略
        super.configure(http)
    }

    override fun configure(web: WebSecurity) {
        // 让 Spring Security 直接无视该路径，H2 console 自带认证。
        web.ignoring().requestMatchers(AntPathRequestMatcher("\h2-console\**"))
        super.configure(web)
    }

    @Bean
    fun userDetailsManager(): UserDetailsManager {
        // 基于内存的身份校验；请勿在生产环境使用
        return InMemoryUserDetailsManager(
            User.withUsername("user").password("{noop}user").roles("USER").build(),
            User.withUsername("admin").password("{noop}admin").roles("ADMIN", "USER").build(),
        )
    }
}