【Vaadin flow 实战】第3讲-快速上手构建VaadinFlow+Springboot的全栈web项目

快速构建VaadinFlow+Springboot的全栈web项目

温馨提示，本文讲解比较精炼，主要以快速上手开发为主。
官方提供了与本文类似的教程讲解，地址https://vaadin.com/docs/latest/getting-started

1访问vaadin官方提供的start网站(类似于 spring initial网站)

https://start.vaadin.com/app

2点击start 快速开始一个项目

Drawer是企业级常见的admin系统项目布局；
Tabs是适用于PC和手机/pad等设备的PWA项目布局;
None是自定义布局；
这里demo演示我选择Drawer布局。

3点击add view然后选择flow应用

4选择官方提供的helloWord视图

5点击右上角的download project下载项目工程源代码

可以自定义maven工程的artifact ID和groupID，目前项目最低需要jdk17+（电脑必须预装） ,前端构建工具选npm就行(电脑可以不预装maven运行时检测到没有npm会自动给你安装)，数据库按需自选(默认的H2就行)

6用IDEA 打开项目工程源代码

温馨提示，电脑要提前安装好jdk17+

使用idea默认的maven配置就行

项目打包需要依次执行maven clean compile package
如果maven构建失败，可以把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 运行项目工程源代码

当前视图的核心源代码

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

预告：下一章 讲vaadin flow工程的项目结构和官方组件使用案例