Spring Boot集成vaadin快速入门demo

1.什么是vaadin？

以下是 Vaadin 特性的列表：

• 这是一个 Java Web 框架
• 概念上类似于 Java Swing
• 允许构建不带 HTML 和 JavaScript 的 Web 应用
• 基于 Java Servlet 构建
• 包含大量组件和窗口
• 提供可定制的外观
• 在客户端和服务器之间使用异步消息
• 使用服务器端编程模型
• 具有 Eclipse，NetBeans 和 IntelliJ 的插件
• 使用 Google Web Toolkit 呈现结果网页
• 提升代码质量和安全性

2.代码工程

实验目标

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.3.0</version>
        <relativePath/>
        <!--  lookup parent from repository  -->
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>vaadin</artifactId>

    <properties>
        <maven.compiler.source>17</maven.compiler.source>
        <maven.compiler.target>17</maven.compiler.target>
        <vaadin.version>24.3.13</vaadin.version>
    </properties>
    <dependencies>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-autoconfigure</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>com.h2database</groupId>
            <artifactId>h2</artifactId>
            <scope>runtime</scope>
        </dependency>


    </dependencies>
    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-bom</artifactId>
                <version>24.3.8</version> <!-- check latest version -->
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

</project>

view

package com.et.vaadin.view;

import com.et.vaadin.entity.Customer;
import com.et.vaadin.repository.CustomerRepository;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.data.value.ValueChangeMode;
import com.vaadin.flow.router.Route;
import org.springframework.util.StringUtils;

@Route
public class MainView extends VerticalLayout {

   private final CustomerRepository repo;

   private final CustomerEditor editor;

   final Grid<Customer> grid;

   final TextField filter;

   private final Button addNewBtn;

   public MainView(CustomerRepository repo, CustomerEditor editor) {
      this.repo = repo;
      this.editor = editor;
      this.grid = new Grid<>(Customer.class);
      this.filter = new TextField();
      this.addNewBtn = new Button("New customer", VaadinIcon.PLUS.create());

      // build layout
      HorizontalLayout actions = new HorizontalLayout(filter, addNewBtn);
      add(actions, grid, editor);

      grid.setHeight("300px");
      grid.setColumns("id", "firstName", "lastName");
      grid.getColumnByKey("id").setWidth("50px").setFlexGrow(0);

      filter.setPlaceholder("Filter by last name");

      // Hook logic to components

      // Replace listing with filtered content when user changes filter
      filter.setValueChangeMode(ValueChangeMode.LAZY);
      filter.addValueChangeListener(e -> listCustomers(e.getValue()));

      // Connect selected Customer to editor or hide if none is selected
      grid.asSingleSelect().addValueChangeListener(e -> {
         editor.editCustomer(e.getValue());
      });

      // Instantiate and edit new Customer the new button is clicked
      addNewBtn.addClickListener(e -> editor.editCustomer(new Customer("", "")));

      // Listen changes made by the editor, refresh data from backend
      editor.setChangeHandler(() -> {
         editor.setVisible(false);
         listCustomers(filter.getValue());
      });

      // Initialize listing
      listCustomers(null);
   }

   // tag::listCustomers[]
   void listCustomers(String filterText) {
      if (StringUtils.hasText(filterText)) {
         grid.setItems(repo.findByLastNameStartsWithIgnoreCase(filterText));
      } else {
         grid.setItems(repo.findAll());
      }
   }
   // end::listCustomers[]

}

package com.et.vaadin.view;

import com.et.vaadin.entity.Customer;
import com.et.vaadin.repository.CustomerRepository;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.data.value.ValueChangeMode;
import com.vaadin.flow.router.Route;
import org.springframework.util.StringUtils;

@Route
public class MainView extends VerticalLayout {

   private final CustomerRepository repo;

   private final CustomerEditor editor;

   final Grid<Customer> grid;

   final TextField filter;

   private final Button addNewBtn;

   public MainView(CustomerRepository repo, CustomerEditor editor) {
      this.repo = repo;
      this.editor = editor;
      this.grid = new Grid<>(Customer.class);
      this.filter = new TextField();
      this.addNewBtn = new Button("New customer", VaadinIcon.PLUS.create());

      // build layout
      HorizontalLayout actions = new HorizontalLayout(filter, addNewBtn);
      add(actions, grid, editor);

      grid.setHeight("300px");
      grid.setColumns("id", "firstName", "lastName");
      grid.getColumnByKey("id").setWidth("50px").setFlexGrow(0);

      filter.setPlaceholder("Filter by last name");

      // Hook logic to components

      // Replace listing with filtered content when user changes filter
      filter.setValueChangeMode(ValueChangeMode.LAZY);
      filter.addValueChangeListener(e -> listCustomers(e.getValue()));

      // Connect selected Customer to editor or hide if none is selected
      grid.asSingleSelect().addValueChangeListener(e -> {
         editor.editCustomer(e.getValue());
      });

      // Instantiate and edit new Customer the new button is clicked
      addNewBtn.addClickListener(e -> editor.editCustomer(new Customer("", "")));

      // Listen changes made by the editor, refresh data from backend
      editor.setChangeHandler(() -> {
         editor.setVisible(false);
         listCustomers(filter.getValue());
      });

      // Initialize listing
      listCustomers(null);
   }

   // tag::listCustomers[]
   void listCustomers(String filterText) {
      if (StringUtils.hasText(filterText)) {
         grid.setItems(repo.findByLastNameStartsWithIgnoreCase(filterText));
      } else {
         grid.setItems(repo.findAll());
      }
   }
   // end::listCustomers[]

}

entity

package com.et.vaadin.entity;

import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.Id;

@Entity
public class Customer {

   @Id
   @GeneratedValue
   private Long id;

   private String firstName;

   private String lastName;

   protected Customer() {
   }

   public Customer(String firstName, String lastName) {
      this.firstName = firstName;
      this.lastName = lastName;
   }

   public Long getId() {
      return id;
   }

   public String getFirstName() {
      return firstName;
   }

   public void setFirstName(String firstName) {
      this.firstName = firstName;
   }

   public String getLastName() {
      return lastName;
   }

   public void setLastName(String lastName) {
      this.lastName = lastName;
   }

   @Override
   public String toString() {
      return String.format("Customer[id=%d, firstName='%s', lastName='%s']", id,
            firstName, lastName);
   }

}

repository

package com.et.vaadin.repository;

import com.et.vaadin.entity.Customer;
import org.springframework.data.jpa.repository.JpaRepository;

import java.util.List;

/**
 * @author liuhaihua
 * @version 1.0
 * @ClassName CustomerRepository
 * @Description todo
 */
public interface CustomerRepository extends JpaRepository<Customer, Long> {

    List<Customer> findByLastNameStartsWithIgnoreCase(String lastName);
}

application.yaml

server:
  port: 8088

DemoApplication.java

package com.et.vaadin;

import com.et.vaadin.entity.Customer;
import com.et.vaadin.repository.CustomerRepository;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.boot.CommandLineRunner;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;

@SpringBootApplication

public class DemoApplication {
   private static final Logger log = LoggerFactory.getLogger(DemoApplication.class);

   public static void main(String[] args) {
      SpringApplication.run(DemoApplication.class, args);
   }
   @Bean
   public CommandLineRunner loadData(CustomerRepository repository) {
      return (args) -> {
         // save a couple of customers
         repository.save(new Customer("Jack", "Bauer"));
         repository.save(new Customer("Chloe", "O'Brian"));
         repository.save(new Customer("Kim", "Bauer"));
         repository.save(new Customer("David", "Palmer"));
         repository.save(new Customer("Michelle", "Dessler"));

         // fetch all customers
         log.info("Customers found with findAll():");
         log.info("-------------------------------");
         for (Customer customer : repository.findAll()) {
            log.info(customer.toString());
         }
         log.info("");

         // fetch an individual customer by ID
         Customer customer = repository.findById(1L).get();
         log.info("Customer found with findOne(1L):");
         log.info("--------------------------------");
         log.info(customer.toString());
         log.info("");

         // fetch customers by last name
         log.info("Customer found with findByLastNameStartsWithIgnoreCase('Bauer'):");
         log.info("--------------------------------------------");
         for (Customer bauer : repository
               .findByLastNameStartsWithIgnoreCase("Bauer")) {
            log.info(bauer.toString());
         }
         log.info("");
      };
   }
}

以上只是一些关键代码，所有代码请参见下面代码仓库

代码仓库

• https://github.com/Harries/springboot-demo

3.测试

测试crud操作

4.引用

• https://vaadin.com/docs/v14/flow/tutorial/overview
• http://www.liuhaihua.cn/archives/710719.html