当前位置： 首页 > news >正文

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

news 2025/7/7 11:26:50

快速构建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工程的项目结构和官方组件使用案例

http://www.lryc.cn/news/516175.html

相关文章：

  • HBase Cassandra的部署和操作
  • 用户界面软件01
  • 【云原生】Docker Compose 从入门到实战使用详解
  • 【ShuQiHere】使用 SCP 进行安全文件传输
  • 海康威视H5player问题汇总大全
  • 力扣23.合并K个升序链表
  • 【C 语言指针篇】指针的灵动舞步与内存的神秘疆域：于 C 编程世界中领略指针艺术的奇幻华章
  • 游戏关卡设计的常用模式
  • 在一台服务器上使用docker运行kafka集群
  • Apache Celeborn 在B站的生产实践
  • JOIN 和 OUTER JOIN,SQL中常见的连接方式
  • Vue2: table加载树形数据的踩坑记录
  • 电子信息硕士面试经验
  • dns网址和ip是一一对应的吗？
  • springboot3 redis 常用操作工具类
  • Java工程师实现视频文件上传minio文件系统存储及网页实现分批加载视频播放
  • Redis（二）value 的五种常见数据类型简述
  • Docker 环境中搭建 Redis 哨兵模式集群的步骤与问题解决
  • 【网页自动化】篡改猴入门教程
  • 【顶刊TPAMI 2025】多头编码（MHE）之极限分类 Part 4：MHE表示能力
  • Github - unexpected disconnect while reading sideband packet
  • Ubuntu 环境安装 之 RabbitMQ 快速入手
  • UE5中实现右键开镜效果
  • Apache HTTPD 换行解析漏洞（CVE-2017-15715）
  • Excel重新踩坑5：二级下拉列表制作；★数据透视表；
  • 力扣--35.搜索插入位置
  • C# 设计模式（行为型模式）：模板方法模式
  • Leetcode打卡：设计一个ATM机器
  • 【TCP】SYN、ACK、FIN、RST、PSH、URG的全称
  • 【OceanBase】使用 Superset 连接 OceanBase 数据库并进行数据可视化分析