spring vaadin

介紹

Vaadin的工作方式依賴于服務(wù)器端渲染，因此可以自然地集成到諸如Spring之類的框架中。 Vaadin的Spring集成已經(jīng)存在了一段時(shí)間，并提供了用于在Spring容器中配置和管理Vaadin的工具，如果您希望將Vaadin與Spring Boot結(jié)合使用，那么您會(huì)很幸運(yùn)，因?yàn)閂aadin的人已經(jīng)做了創(chuàng)建可以自動(dòng)配置幾乎所有內(nèi)容的啟動(dòng)程序的工作，這樣您就可以在幾秒鐘內(nèi)啟動(dòng)并運(yùn)行一個(gè)簡(jiǎn)單的UI。 在本文中，我們將簡(jiǎn)要介紹如何在Spring boot中使用Vaadin。

建立

創(chuàng)建Spring引導(dǎo)應(yīng)用程序的最佳方法是使用Spring Initializr 。 我們將檢查Vaadin以及其他標(biāo)準(zhǔn)的Spring起動(dòng)器，例如Web和Security，然后單擊“ Generate Project”。

要在上下文路徑的根部創(chuàng)建視圖，只需創(chuàng)建一個(gè)擴(kuò)展UI的類并使用@SpringUI進(jìn)行批注就@SpringUI 。

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

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

用戶界面和視圖

Vaadin的用戶界面概念類似于SPA（單頁(yè)應(yīng)用程序）的概念。 UI類被視為多個(gè)視圖的根容器。 視圖可以看作是UI的特定狀態(tài)。 一個(gè)應(yīng)用程序可以具有多個(gè)UI類，但是建議使用一個(gè)具有多個(gè)視圖的UI ，因?yàn)樗矢摺?借助Navigator ，可以在不離開頁(yè)面或UI情況下從一個(gè)視圖配置到另一個(gè)視圖。 要?jiǎng)?chuàng)建一個(gè)View ，我們只需要實(shí)現(xiàn)視圖接口并用@SpringView對(duì)其進(jìn)行注釋，或者如果范圍（我們將在以后討論視圖范圍）不是很重要，那么任何Spring注入注釋都可以工作：

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

我們?cè)谶@里使用了帶有@PostConstruct的init()方法，以確保Spring已完成注入任何字段（如果有的話）。 如果沒有注入的字段，也可以使用構(gòu)造函數(shù)。

例

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

添加視圖：

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

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

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

擁有默認(rèn)的""空路由很重要，因?yàn)橥ǔＴ趩?dòng)時(shí)未設(shè)置該路由。 由于Vaadin使用自己的主題和樣式表，因此@StyleSheet批注會(huì)很方便地引入自定義樣式。 我們的視圖和UI已連接到Spring容器，因此可以注入任何Spring bean。 例如，我們注入了CarRepository ，它是一個(gè)JpaRepository用于對(duì)Car實(shí)體執(zhí)行數(shù)據(jù)庫(kù)操作。

安全

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

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

結(jié)語

Vaadin可以看作是使用Spring Boot后端快速創(chuàng)建UI的替代方法。 Vaadin一開始可能很容易建立，但是當(dāng)復(fù)雜度增加時(shí)，學(xué)習(xí)曲線似乎并不那么平滑。 使用Vaadin（不僅是Spring）時(shí)可能會(huì)注意到的另一個(gè)缺點(diǎn)是，每次進(jìn)行更改時(shí)都必須重新啟動(dòng)整個(gè)應(yīng)用程序（通常需要一段時(shí)間才能啟動(dòng)Spring Container），這導(dǎo)致需要設(shè)置HotSwap或類似的工具，無需重新啟動(dòng)應(yīng)用程序即可熱重載代碼。

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

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

spring vaadin

總結(jié)

以上是默认站点為你收集整理的spring vaadin_在Spring Boot中使用Vaadin的简介的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得默认站点網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將默认站点推薦給好友。