介紹

Vaadin的工作方式依賴于服務器端渲染，因此可以自然地集成到諸如Spring之類的框架中。 Vaadin的Spring集成已經存在了一段時間，并且提供了用于在Spring容器中配置和管理Vaadin的工具，如果您希望將Vaadin與Spring Boot結合使用，那么您會很幸運，因為Vaadin的人已經做了創建可以自動配置幾乎所有內容的啟動程序的工作，以便您可以在幾秒鐘內啟動并運行一個簡單的UI。 在本文中，我們將簡要介紹如何在Spring boot中使用Vaadin。

設定

創建Spring引導應用程序的最佳方法是使用Spring Initializr 。 我們將檢查Vaadin以及其他標準的Spring起動器，例如Web和Security，然后單擊“ Generate Project”。

要在上下文路徑的根部創建視圖，只需創建一個擴展UI的類并使用@SpringUI進行批注就@SpringUI 。

@SpringUI public class Main extends UI {@Overrideprotected void init(VaadinRequest vaadinRequest) {setContent(new Label("Hello"));} }

如果要使用的路徑與根目錄不同，則可以使用path屬性： @SpringUI(path="/app") 。

用戶界面和視圖

Vaadin的用戶界面概念類似于SPA（單頁應用程序）的概念。 UI類被視為多個視圖的根容器。 視圖可以看作是UI的特定狀態。 一個應用程序可以具有多個UI類，但是建議使用一個具有多個視圖的UI ，因為它效率更高。 借助Navigator ，可以在不離開頁面或UI情況下從一個視圖配置到另一個視圖。 要創建一個View ，我們只需要實現視圖接口并用@SpringView對其進行注釋，或者如果范圍（我們將在以后討論視圖范圍）不是很重要，那么任何Spring注入注釋都可以工作：

@SpringView public class Add extends Composite implements View {@PostConstructpublic void init() {setCompositionRoot(new Label("I am a view"));} }

我們在這里使用了帶有@PostConstruct的init()方法，以確保Spring已完成注入任何字段（如果有的話）。 如果沒有注入的字段，也可以使用構造函數。

例

Vaadin是一個完全成熟的框架，具有開發人員可以選擇的多種組件 （布局，圖表，網格..）。 它還提供了創建自定義組件的可能性。 例如，我們要創建一個汽車收集應用程序，以允許輸入和列出汽車模型：

添加視圖：

@SpringView public class Add extends Composite implements View {@AutowiredCarRepository repository;@AutowiredDataProvider dataProvider;@PostConstructpublic void init() {FormLayout formLayout = new FormLayout();Label title = new Label("Add new Car");TextField brandInput = new TextField("Brand: ");TextField modelInput = new TextField("Model: ");TextField pictureLinkInput = new TextField("Picture Link: ");Button button = new Button("Add", clickEvent -> {repository.save(new Car(brandInput.getValue(), modelInput.getValue(), pictureLinkInput.getValue()));Notification.show("saved");});formLayout.addComponent(title);formLayout.addComponent(brandInput);formLayout.addComponent(modelInput);formLayout.addComponent(pictureLinkInput);formLayout.addComponent(button);setCompositionRoot(formLayout);} }

列表視圖：

@SpringView public class List extends Composite implements View {@AutowiredCarRepository repository;@AutowiredDataProvider dataProvider;@PostConstructpublic void init() {Grid<Car> carGrid = new Grid<>();carGrid.setWidth("100%");carGrid.setHeight("100%");carGrid.setDataProvider(dataProvider);carGrid.addColumn(Car::getId).setCaption("Id");carGrid.addColumn(Car::getBrand).setCaption("Brand");carGrid.addColumn(Car::getModel).setCaption("Model");carGrid.addColumn((ValueProvider<Car, Object>) car -> new ExternalResource(car.getPictureLink())).setCaption("Picture").setRenderer(new ImageRenderer()).setResizable(true);setCompositionRoot(carGrid);setSizeFull();} }

主界面：

@SpringUI(path="app") @StyleSheet({"http://localhost:8080/styles.css"}) public class Main extends UI {@AutowiredAdd addView;@AutowiredList listView;@Overrideprotected void init(VaadinRequest vaadinRequest) {HorizontalLayout rootLayout = new HorizontalLayout();rootLayout.setSizeFull();HorizontalLayout mainarea = new HorizontalLayout();mainarea.setWidth("80%");Navigator navigator = new Navigator(this, mainarea);navigator.addView("", addView);navigator.addView("add", addView);navigator.addView("list", listView);CssLayout sideNav = new CssLayout();sideNav.setSizeFull();sideNav.addStyleName("sidenav");sideNav.setId("sideNav");sideNav.setWidth("20%");Button link1 = new Button("Add", e -> navigator.navigateTo("add"));link1.addStyleNames(BUTTON_LINK, MENU_ITEM);Button link2 = new Button("List", e -> navigator.navigateTo("list"));link2.addStyleNames(BUTTON_LINK, MENU_ITEM);sideNav.addComponent(link1);sideNav.addComponent(link2);rootLayout.addComponent(sideNav);rootLayout.addComponent(mainarea);setContent(rootLayout);} }

我們創建了兩個視圖：一個用于添加汽車的表單和一個用于顯示汽車的網格。 UI類使用navigator將兩個視圖連接起來。 用戶界面由兩部分組成：側面導航欄（帶有指向視圖的鏈接）和主要區域（可變部分）。 我們已經將navigator配置為僅在主區域中調度視圖，并配置了前往每個視圖的路由：

Navigator navigator = new Navigator(this, mainarea);navigator.addView("", addView);navigator.addView("add", addView);navigator.addView("list", listView);

擁有默認的""空路由很重要，因為通常在啟動時未設置該路由。 由于Vaadin使用自己的主題和樣式表，因此@StyleSheet批注會很方便地引入自定義樣式。 我們的視圖和UI已連接到Spring容器，因此可以注入任何Spring bean。 例如，我們注入了CarRepository ，它是一個JpaRepository用于對Car實體執行數據庫操作。

安全

Vaadin使用自己的CSRF令牌，因此，如果使用Spring Security，則應禁用Spring CSRF機制以使應用程序正常運行。 最低安全配置如下所示：

@Configuration public class SecurityConfig extends WebSecurityConfigurerAdapter {@Overrideprotected void configure(HttpSecurity http) throws Exception {http.authorizeRequests().antMatchers("/app**").authenticated().and().formLogin().and().csrf().disable();} }

包起來

Vaadin可以看作是使用Spring Boot后端快速創建UI的替代方法。 Vaadin一開始可能很容易建立，但是當復雜度增加時，學習曲線似乎并不那么平滑。 使用Vaadin（不僅使用Spring）時可能會注意到的另一個缺點是，每次進行更改時都必須重新啟動整個應用程序（通常需要一段時間才能啟動Spring Container），這導致需要設置HotSwap或類似的工具，無需重新啟動應用程序即可熱重載代碼。

• 源代碼： https : //github.com/zak905/vaadin-spring-boot

翻譯自: https://www.javacodegeeks.com/2018/05/introduction-to-using-vaadin-in-spring-boot.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的在Spring Boot中使用Vaadin的简介的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。