快速構(gòu)建VaadinFlow+Springboot的全棧web項(xiàng)目

溫馨提示，本文講解比較精煉，主要以快速上手開發(fā)為主。
官方提供了與本文類似的教程講解，地址https://vaadin.com/docs/latest/getting-started

1訪問vaadin官方提供的start網(wǎng)站(類似于 spring initial網(wǎng)站)

https://start.vaadin.com/app

2點(diǎn)擊start 快速開始一個項(xiàng)目

Drawer是企業(yè)級常見的admin系統(tǒng)項(xiàng)目布局；
Tabs是適用于PC和手機(jī)/pad等設(shè)備的PWA項(xiàng)目布局;
None是自定義布局；
這里demo演示我選擇Drawer布局。

3點(diǎn)擊add view然后選擇flow應(yīng)用

4選擇官方提供的helloWord視圖

5點(diǎn)擊右上角的download project下載項(xiàng)目工程源代碼

可以自定義maven工程的artifact ID和groupID，目前項(xiàng)目最低需要jdk17+（電腦必須預(yù)裝） ,前端構(gòu)建工具選npm就行(電腦可以不預(yù)裝maven運(yùn)行時檢測到?jīng)]有npm會自動給你安裝)，數(shù)據(jù)庫按需自選(默認(rèn)的H2就行)

6用IDEA 打開項(xiàng)目工程源代碼

溫馨提示，電腦要提前安裝好jdk17+

使用idea默認(rèn)的maven配置就行

項(xiàng)目打包需要依次執(zhí)行maven clean compile package
如果maven構(gòu)建失敗，可以把pom中的repositories-url地址改成阿里云的，如下

<?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"><modelVersion>4.0.0</modelVersion><!-- Project from https://start.vaadin.com/project/3ad2a749-d1fb-423b-8c8b-e684877f64b8 --><groupId>com.example.application</groupId><artifactId>my-app2025</artifactId><name>my-app2025</name><version>1.0-SNAPSHOT</version><packaging>jar</packaging><properties><java.version>17</java.version><vaadin.version>24.6.0</vaadin.version></properties><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>3.4.1</version></parent><repositories>
<!--        <repository>-->
<!--            <id>Vaadin Directory</id>-->
<!--            <url>https://maven.vaadin.com/vaadin-addons</url>-->
<!--            <snapshots>-->
<!--                <enabled>false</enabled>-->
<!--            </snapshots>-->
<!--        </repository>--><repository><id>central</id><url>https://maven.aliyun.com/repository/central</url><releases><enabled>true</enabled></releases><snapshots><enabled>true</enabled></snapshots></repository></repositories><dependencyManagement><dependencies><dependency><groupId>com.vaadin</groupId><artifactId>vaadin-bom</artifactId><version>${vaadin.version}</version><type>pom</type><scope>import</scope></dependency></dependencies></dependencyManagement><dependencies><dependency><groupId>com.vaadin</groupId><!-- Replace artifactId with vaadin-core to use only free components --><artifactId>vaadin</artifactId></dependency><dependency><groupId>com.vaadin</groupId><artifactId>vaadin-spring-boot-starter</artifactId></dependency><dependency><groupId>org.parttio</groupId><artifactId>line-awesome</artifactId><version>2.1.0</version></dependency><dependency><groupId>com.h2database</groupId><artifactId>h2</artifactId><scope>runtime</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><optional>true</optional></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>com.vaadin</groupId><artifactId>vaadin-testbench-junit5</artifactId><scope>test</scope></dependency></dependencies><build><defaultGoal>spring-boot:run</defaultGoal><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin><plugin><groupId>com.diffplug.spotless</groupId><artifactId>spotless-maven-plugin</artifactId><version>2.43.0</version><configuration><java><eclipse><version>4.33</version><file>${project.basedir}/eclipse-formatter.xml</file></eclipse></java><!-- Uncomment to format TypeScript files <typescript><includes><include>src/main/frontend/**/*.ts</include><include>src/main/frontend/**/*.tsx</include></includes><excludes><exclude>src/main/frontend/generated/**</exclude></excludes><prettier><prettierVersion>3.3.3</prettierVersion><configFile>.prettierrc.json</configFile></prettier></typescript>--></configuration></plugin><plugin><groupId>com.vaadin</groupId><artifactId>vaadin-maven-plugin</artifactId><version>${vaadin.version}</version><executions><execution><goals><goal>prepare-frontend</goal></goals></execution></executions></plugin></plugins></build><profiles><profile><!-- Production mode is activated using -Pproduction --><id>production</id><dependencies><!-- Exclude development dependencies from production --><dependency><groupId>com.vaadin</groupId><artifactId>vaadin-core</artifactId><exclusions><exclusion><groupId>com.vaadin</groupId><artifactId>vaadin-dev</artifactId></exclusion></exclusions></dependency></dependencies><build><plugins><plugin><groupId>com.vaadin</groupId><artifactId>vaadin-maven-plugin</artifactId><version>${vaadin.version}</version><executions><execution><goals><goal>build-frontend</goal></goals><phase>compile</phase></execution></executions></plugin></plugins></build></profile><profile><id>it</id><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><executions><execution><id>start-spring-boot</id><phase>pre-integration-test</phase><goals><goal>start</goal></goals></execution><execution><id>stop-spring-boot</id><phase>post-integration-test</phase><goals><goal>stop</goal></goals></execution></executions></plugin><!-- Runs the integration tests (*IT) after the server is started --><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-failsafe-plugin</artifactId><executions><execution><goals><goal>integration-test</goal><goal>verify</goal></goals></execution></executions><configuration><trimStackTrace>false</trimStackTrace><enableAssertions>true</enableAssertions></configuration></plugin></plugins></build></profile></profiles>
</project>

7用IDEA 運(yùn)行項(xiàng)目工程源代碼

當(dāng)前視圖的核心源代碼

package com.example.application.views.helloworld;import com.vaadin.flow.component.Key;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Menu;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;
import org.vaadin.lineawesome.LineAwesomeIconUrl;@PageTitle("Hello World")
@Route("")
@Menu(order = 0, icon = LineAwesomeIconUrl.GLOBE_SOLID)
public class HelloWorldView extends HorizontalLayout {private TextField name;private Button sayHello;public HelloWorldView() {name = new TextField("Your name");sayHello = new Button("Say hello");sayHello.addClickListener(e -> {Notification.show("Hello " + name.getValue());});sayHello.addClickShortcut(Key.ENTER);setMargin(true);setVerticalComponentAlignment(Alignment.END, name, sayHello);add(name, sayHello);}}

預(yù)告：下一章 講vaadin flow工程的項(xiàng)目結(jié)構(gòu)和官方組件使用案例