devbox
Li_阴宅
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Spring Boot集成vaadin快速入门demo

作者：Li_阴宅 | 2024-06-21 23:26:24

赞

踩

Spring Boot集成vaadin快速入门demo

1.什么是vaadin？

Vaadin 是用于构建单页 Web 应用的流行 Java 框架。 它由一家专门从事富 Internet 应用设计和开发的芬兰公司开发。 估计有 15 万开发者使用 Vaadin。 它的开发始于 2002 年。

Vaadin 框架特性

以下是 Vaadin 特性的列表：

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

2.代码工程

实验目标

用嵌入式数据库h2存储数据，用vaadin构建crud操作界面，使用jpa操作h2数据库

pom.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0"
  3.          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  5.     <parent>
  6.         <groupId>org.springframework.boot</groupId>
  7.         <artifactId>spring-boot-starter-parent</artifactId>
  8.         <version>3.3.0</version>
  9.         <relativePath/>
  10.         <!--  lookup parent from repository  -->
  11.     </parent>
  12.     <modelVersion>4.0.0</modelVersion>
  13.  
  14.     <artifactId>vaadin</artifactId>
  15.  
  16.     <properties>
  17.         <maven.compiler.source>17</maven.compiler.source>
  18.         <maven.compiler.target>17</maven.compiler.target>
  19.         <vaadin.version>24.3.13</vaadin.version>
  20.     </properties>
  21.     <dependencies>
  22.  
  23.         <dependency>
  24.             <groupId>org.springframework.boot</groupId>
  25.             <artifactId>spring-boot-starter-web</artifactId>
  26.         </dependency>
  27.  
  28.         <dependency>
  29.             <groupId>org.springframework.boot</groupId>
  30.             <artifactId>spring-boot-autoconfigure</artifactId>
  31.         </dependency>
  32.         <dependency>
  33.             <groupId>org.springframework.boot</groupId>
  34.             <artifactId>spring-boot-starter-test</artifactId>
  35.             <scope>test</scope>
  36.         </dependency>
  37.         <dependency>
  38.             <groupId>org.springframework.boot</groupId>
  39.             <artifactId>spring-boot-starter-data-jpa</artifactId>
  40.         </dependency>
  41.         <dependency>
  42.             <groupId>com.vaadin</groupId>
  43.             <artifactId>vaadin-spring-boot-starter</artifactId>
  44.         </dependency>
  45.         <dependency>
  46.             <groupId>com.h2database</groupId>
  47.             <artifactId>h2</artifactId>
  48.             <scope>runtime</scope>
  49.         </dependency>
  50.  
  51.  
  52.     </dependencies>
  53.     <dependencyManagement>
  54.         <dependencies>
  55.             <dependency>
  56.                 <groupId>com.vaadin</groupId>
  57.                 <artifactId>vaadin-bom</artifactId>
  58.                 <version>24.3.8</version> <!-- check latest version -->
  59.                 <type>pom</type>
  60.                 <scope>import</scope>
  61.             </dependency>
  62.         </dependencies>
  63.     </dependencyManagement>
  64.  
  65. </project>

view

主视图类（MainView本指南中称为）是 Vaadin 的 UI 逻辑的入口点。在 Spring Boot 应用程序中，如果您使用 对其进行注释@Route，它将自动被拾取并显示在 Web 应用程序的根目录中。您可以通过为注释提供参数来自定义显示视图的 URL @Route

  1. package com.et.vaadin.view;
  2.  
  3. import com.et.vaadin.entity.Customer;
  4. import com.et.vaadin.repository.CustomerRepository;
  5. import com.vaadin.flow.component.button.Button;
  6. import com.vaadin.flow.component.grid.Grid;
  7. import com.vaadin.flow.component.icon.VaadinIcon;
  8. import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
  9. import com.vaadin.flow.component.orderedlayout.VerticalLayout;
  10. import com.vaadin.flow.component.textfield.TextField;
  11. import com.vaadin.flow.data.value.ValueChangeMode;
  12. import com.vaadin.flow.router.Route;
  13. import org.springframework.util.StringUtils;
  14.  
  15. @Route
  16. public class MainView extends VerticalLayout {
  17.  
  18.    private final CustomerRepository repo;
  19.  
  20.    private final CustomerEditor editor;
  21.  
  22.    final Grid<Customer> grid;
  23.  
  24.    final TextField filter;
  25.  
  26.    private final Button addNewBtn;
  27.  
  28.    public MainView(CustomerRepository repo, CustomerEditor editor) {
  29.       this.repo = repo;
  30.       this.editor = editor;
  31.       this.grid = new Grid<>(Customer.class);
  32.       this.filter = new TextField();
  33.       this.addNewBtn = new Button("New customer", VaadinIcon.PLUS.create());
  34.  
  35.       // build layout
  36.       HorizontalLayout actions = new HorizontalLayout(filter, addNewBtn);
  37.       add(actions, grid, editor);
  38.  
  39.       grid.setHeight("300px");
  40.       grid.setColumns("id", "firstName", "lastName");
  41.       grid.getColumnByKey("id").setWidth("50px").setFlexGrow(0);
  42.  
  43.       filter.setPlaceholder("Filter by last name");
  44.  
  45.       // Hook logic to components
  46.  
  47.       // Replace listing with filtered content when user changes filter
  48.       filter.setValueChangeMode(ValueChangeMode.LAZY);
  49.       filter.addValueChangeListener(e -> listCustomers(e.getValue()));
  50.  
  51.       // Connect selected Customer to editor or hide if none is selected
  52.       grid.asSingleSelect().addValueChangeListener(e -> {
  53.          editor.editCustomer(e.getValue());
  54.       });
  55.  
  56.       // Instantiate and edit new Customer the new button is clicked
  57.       addNewBtn.addClickListener(e -> editor.editCustomer(new Customer("", "")));
  58.  
  59.       // Listen changes made by the editor, refresh data from backend
  60.       editor.setChangeHandler(() -> {
  61.          editor.setVisible(false);
  62.          listCustomers(filter.getValue());
  63.       });
  64.  
  65.       // Initialize listing
  66.       listCustomers(null);
  67.    }
  68.  
  69.    // tag::listCustomers[]
  70.    void listCustomers(String filterText) {
  71.       if (StringUtils.hasText(filterText)) {
  72.          grid.setItems(repo.findByLastNameStartsWithIgnoreCase(filterText));
  73.       } else {
  74.          grid.setItems(repo.findAll());
  75.       }
  76.    }
  77.    // end::listCustomers[]
  78.  
  79. }

由于 Vaadin UI 是纯 Java 代码，因此您可以从头开始编写可重复使用的代码。为此，请为您的Customer实体定义一个编辑器组件。您可以将其设为 Spring 管理的 bean，以便您可以直接将其注入CustomerRepository编辑器并处理创建、更新和删除部分或您的 CRUD 功能

  1. package com.et.vaadin.view;
  2.  
  3. import com.et.vaadin.entity.Customer;
  4. import com.et.vaadin.repository.CustomerRepository;
  5. import com.vaadin.flow.component.button.Button;
  6. import com.vaadin.flow.component.grid.Grid;
  7. import com.vaadin.flow.component.icon.VaadinIcon;
  8. import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
  9. import com.vaadin.flow.component.orderedlayout.VerticalLayout;
  10. import com.vaadin.flow.component.textfield.TextField;
  11. import com.vaadin.flow.data.value.ValueChangeMode;
  12. import com.vaadin.flow.router.Route;
  13. import org.springframework.util.StringUtils;
  14.  
  15. @Route
  16. public class MainView extends VerticalLayout {
  17.  
  18.    private final CustomerRepository repo;
  19.  
  20.    private final CustomerEditor editor;
  21.  
  22.    final Grid<Customer> grid;
  23.  
  24.    final TextField filter;
  25.  
  26.    private final Button addNewBtn;
  27.  
  28.    public MainView(CustomerRepository repo, CustomerEditor editor) {
  29.       this.repo = repo;
  30.       this.editor = editor;
  31.       this.grid = new Grid<>(Customer.class);
  32.       this.filter = new TextField();
  33.       this.addNewBtn = new Button("New customer", VaadinIcon.PLUS.create());
  34.  
  35.       // build layout
  36.       HorizontalLayout actions = new HorizontalLayout(filter, addNewBtn);
  37.       add(actions, grid, editor);
  38.  
  39.       grid.setHeight("300px");
  40.       grid.setColumns("id", "firstName", "lastName");
  41.       grid.getColumnByKey("id").setWidth("50px").setFlexGrow(0);
  42.  
  43.       filter.setPlaceholder("Filter by last name");
  44.  
  45.       // Hook logic to components
  46.  
  47.       // Replace listing with filtered content when user changes filter
  48.       filter.setValueChangeMode(ValueChangeMode.LAZY);
  49.       filter.addValueChangeListener(e -> listCustomers(e.getValue()));
  50.  
  51.       // Connect selected Customer to editor or hide if none is selected
  52.       grid.asSingleSelect().addValueChangeListener(e -> {
  53.          editor.editCustomer(e.getValue());
  54.       });
  55.  
  56.       // Instantiate and edit new Customer the new button is clicked
  57.       addNewBtn.addClickListener(e -> editor.editCustomer(new Customer("", "")));
  58.  
  59.       // Listen changes made by the editor, refresh data from backend
  60.       editor.setChangeHandler(() -> {
  61.          editor.setVisible(false);
  62.          listCustomers(filter.getValue());
  63.       });
  64.  
  65.       // Initialize listing
  66.       listCustomers(null);
  67.    }
  68.  
  69.    // tag::listCustomers[]
  70.    void listCustomers(String filterText) {
  71.       if (StringUtils.hasText(filterText)) {
  72.          grid.setItems(repo.findByLastNameStartsWithIgnoreCase(filterText));
  73.       } else {
  74.          grid.setItems(repo.findAll());
  75.       }
  76.    }
  77.    // end::listCustomers[]
  78.  
  79. }

entity

  1. package com.et.vaadin.entity;
  2.  
  3. import jakarta.persistence.Entity;
  4. import jakarta.persistence.GeneratedValue;
  5. import jakarta.persistence.Id;
  6.  
  7. @Entity
  8. public class Customer {
  9.  
  10.    @Id
  11.    @GeneratedValue
  12.    private Long id;
  13.  
  14.    private String firstName;
  15.  
  16.    private String lastName;
  17.  
  18.    protected Customer() {
  19.    }
  20.  
  21.    public Customer(String firstName, String lastName) {
  22.       this.firstName = firstName;
  23.       this.lastName = lastName;
  24.    }
  25.  
  26.    public Long getId() {
  27.       return id;
  28.    }
  29.  
  30.    public String getFirstName() {
  31.       return firstName;
  32.    }
  33.  
  34.    public void setFirstName(String firstName) {
  35.       this.firstName = firstName;
  36.    }
  37.  
  38.    public String getLastName() {
  39.       return lastName;
  40.    }
  41.  
  42.    public void setLastName(String lastName) {
  43.       this.lastName = lastName;
  44.    }
  45.  
  46.    @Override
  47.    public String toString() {
  48.       return String.format("Customer[id=%d, firstName='%s', lastName='%s']", id,
  49.             firstName, lastName);
  50.    }
  51.  
  52. }

repository

  1. package com.et.vaadin.repository;
  2.  
  3. import com.et.vaadin.entity.Customer;
  4. import org.springframework.data.jpa.repository.JpaRepository;
  5.  
  6. import java.util.List;
  7.  
  8. /**
  9.  * @author liuhaihua
  10.  * @version 1.0
  11.  * @ClassName CustomerRepository
  12.  * @Description todo
  13.  */
  14. public interface CustomerRepository extends JpaRepository<Customer, Long> {
  15.  
  16.     List<Customer> findByLastNameStartsWithIgnoreCase(String lastName);
  17. }

application.yaml

  1. server:
  2.   port: 8088

DemoApplication.java

  1. package com.et.vaadin;
  2.  
  3. import com.et.vaadin.entity.Customer;
  4. import com.et.vaadin.repository.CustomerRepository;
  5. import org.slf4j.Logger;
  6. import org.slf4j.LoggerFactory;
  7. import org.springframework.boot.CommandLineRunner;
  8. import org.springframework.boot.SpringApplication;
  9. import org.springframework.boot.autoconfigure.SpringBootApplication;
  10. import org.springframework.context.annotation.Bean;
  11.  
  12. @SpringBootApplication
  13.  
  14. public class DemoApplication {
  15.    private static final Logger log = LoggerFactory.getLogger(DemoApplication.class);
  16.  
  17.    public static void main(String[] args) {
  18.       SpringApplication.run(DemoApplication.class, args);
  19.    }
  20.    @Bean
  21.    public CommandLineRunner loadData(CustomerRepository repository) {
  22.       return (args) -> {
  23.          // save a couple of customers
  24.          repository.save(new Customer("Jack", "Bauer"));
  25.          repository.save(new Customer("Chloe", "O'Brian"));
  26.          repository.save(new Customer("Kim", "Bauer"));
  27.          repository.save(new Customer("David", "Palmer"));
  28.          repository.save(new Customer("Michelle", "Dessler"));
  29.  
  30.          // fetch all customers
  31.          log.info("Customers found with findAll():");
  32.          log.info("-------------------------------");
  33.          for (Customer customer : repository.findAll()) {
  34.             log.info(customer.toString());
  35.          }
  36.          log.info("");
  37.  
  38.          // fetch an individual customer by ID
  39.          Customer customer = repository.findById(1L).get();
  40.          log.info("Customer found with findOne(1L):");
  41.          log.info("--------------------------------");
  42.          log.info(customer.toString());
  43.          log.info("");
  44.  
  45.          // fetch customers by last name
  46.          log.info("Customer found with findByLastNameStartsWithIgnoreCase('Bauer'):");
  47.          log.info("--------------------------------------------");
  48.          for (Customer bauer : repository
  49.                .findByLastNameStartsWithIgnoreCase("Bauer")) {
  50.             log.info(bauer.toString());
  51.          }
  52.          log.info("");
  53.       };
  54.    }
  55. }

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

代码仓库

3.测试

启动Spring Boot应用，

测试crud操作

访问地址http://127.0.0.1:8088/

vaadin-list

 

4.引用

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号