Improve efficiency by Vaadin

Posted on Tue 04 March 2025 in Journal

Abstract	Improve efficiency by Vaadin
Authors	Walter Fan
Category	learning note
Status	v1.0
Updated	2025-03-04
License	CC-BY-NC-ND 4.0

Vaadin

Vaadin 是一个面向 Java 开发者的开源 Web 应用程序开发平台，旨在简化 Web 界面的构建过程。它提供了一个丰富的 UI 组件库、无缝的后端集成，以及对现代 Web 标准的支持，使开发者无需编写 JavaScript 或 HTML，即可使用纯 Java 创建现代化的全栈 Web 应用程序。 citeturn0search0

Vaadin 的主要特点包括：

服务器端架构：大部分 UI 逻辑在服务器上运行，确保了安全性，并减少了客户端的复杂性。
丰富的组件库：提供了如 TextField、Button、ComboBox、Grid 等多种可配置、可样式化的 UI 组件，开发者可以通过 Java 代码直接使用这些组件构建用户界面。
无缝的后端集成：与 Spring Boot 等流行的 Java 后端框架集成，简化了开发流程。

通过这些特性，Vaadin 帮助 Java 开发者提高生产力，快速构建 Web GUI。开发者可以专注于业务逻辑，而无需处理前端技术细节，从而加速开发过程。 citeturn0search0

tips

使用 Vaadin，Java 开发者可以轻松构建具有创建、读取、更新和删除（CRUD）功能的 Web 应用程序。以下是一个以“书籍”（Book）为例的 CRUD 应用程序的简要步骤：

创建 Book 实体类：定义一个包含书籍属性（如标题、作者、ISBN 等）的 Java 类。
设置数据存储库：使用 Spring Data JPA 创建一个接口，用于管理 Book 实体的持久化操作。
设计 Vaadin UI：利用 Vaadin 提供的组件，如 Grid、FormLayout、TextField、Button 等，构建用户界面，以展示和编辑书籍信息。
实现业务逻辑：将 UI 组件与数据存储库连接，处理用户操作（如添加、编辑、删除书籍）并更新界面。

通过以上步骤，开发者可以快速创建一个功能齐全的书籍管理应用程序。Vaadin 的组件和与后端的无缝集成，使得这一过程更加高效。

example

当然，下面是一个完整的 Book CRUD 示例，使用 Vaadin + Spring Boot + JPA 来构建一个简单的 Web 应用程序。

1. 添加依赖

在 pom.xml 中添加必要的 Vaadin 和 Spring Boot 依赖：

<dependencies>
    <!-- Vaadin Starter -->
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-spring-boot-starter</artifactId>
        <version>24.0.0</version>
    </dependency>

    <!-- Spring Boot Data JPA -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>

    <!-- H2 Database -->
    <dependency>
        <groupId>com.h2database</groupId>
        <artifactId>h2</artifactId>
        <scope>runtime</scope>
    </dependency>
</dependencies>

2. 定义 Book 实体

package com.example.bookcrud.model;

import jakarta.persistence.*;

@Entity
public class Book {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String title;
    private String author;
    private String isbn;

    public Book() {}

    public Book(String title, String author, String isbn) {
        this.title = title;
        this.author = author;
        this.isbn = isbn;
    }

    // Getters and Setters
    public Long getId() { return id; }
    public void setId(Long id) { this.id = id; }

    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; }

    public String getIsbn() { return isbn; }
    public void setIsbn(String isbn) { this.isbn = isbn; }
}

3. 创建 BookRepository

package com.example.bookcrud.repository;

import com.example.bookcrud.model.Book;
import org.springframework.data.jpa.repository.JpaRepository;

public interface BookRepository extends JpaRepository<Book, Long> {
}

4. 创建 Vaadin UI

package com.example.bookcrud.ui;

import com.example.bookcrud.model.Book;
import com.example.bookcrud.repository.BookRepository;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;
import org.springframework.beans.factory.annotation.Autowired;

@Route("")
public class BookView extends VerticalLayout {
    private final BookRepository bookRepository;
    private final Grid<Book> bookGrid = new Grid<>(Book.class);

    private final TextField titleField = new TextField("Title");
    private final TextField authorField = new TextField("Author");
    private final TextField isbnField = new TextField("ISBN");

    private final Button saveButton = new Button("Add Book", event -> saveBook());
    private final Button deleteButton = new Button("Delete Selected", event -> deleteSelected());

    @Autowired
    public BookView(BookRepository bookRepository) {
        this.bookRepository = bookRepository;

        bookGrid.setColumns("id", "title", "author", "isbn");
        bookGrid.setItems(bookRepository.findAll());
        bookGrid.asSingleSelect().addValueChangeListener(event -> selectBook(event.getValue()));

        add(titleField, authorField, isbnField, saveButton, deleteButton, bookGrid);
    }

    private void saveBook() {
        Book book = new Book(titleField.getValue(), authorField.getValue(), isbnField.getValue());
        bookRepository.save(book);
        bookGrid.setItems(bookRepository.findAll());
        Notification.show("Book saved");
    }

    private void deleteSelected() {
        Book selected = bookGrid.asSingleSelect().getValue();
        if (selected != null) {
            bookRepository.delete(selected);
            bookGrid.setItems(bookRepository.findAll());
            Notification.show("Book deleted");
        }
    }

    private void selectBook(Book book) {
        if (book != null) {
            titleField.setValue(book.getTitle());
            authorField.setValue(book.getAuthor());
            isbnField.setValue(book.getIsbn());
        }
    }
}

5. 配置 H2 数据库

在 application.properties 中：

spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect

6. 运行应用

启动 Spring Boot 应用后，在浏览器访问 http://localhost:8080，即可看到书籍管理界面，支持 增删改查。

总结

这个示例展示了如何使用 Vaadin 快速创建 Book CRUD 应用： - 后端使用 Spring Boot + JPA 来管理数据 - 前端使用 Vaadin 组件（Grid、TextField、Button）构建交互式 UI - 数据存储 使用 H2 内存数据库（可以切换到 MySQL 等）

Vaadin 的好处是 Java 全栈开发，无须编写前端代码，即可快速构建 Web GUI，提高 Java 开发者的生产力。

本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

Previous Post Next Post