土特产网站建设事业计划书,网站自助授权系统,嘉兴优化网站公司哪家好,WordPress.AMP快速构建VaadinFlowSpringboot的全栈web项目
温馨提示#xff0c;本文讲解比较精炼#xff0c;主要以快速上手开发为主。 官方提供了与本文类似的教程讲解#xff0c;地址https://vaadin.com/docs/latest/getting-started
1访问vaadin官方提供的start网站(类似于 spring i…快速构建VaadinFlowSpringboot的全栈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 version1.0 encodingUTF-8?
project xmlnshttp://maven.apache.org/POM/4.0.0xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersion!-- Project from https://start.vaadin.com/project/3ad2a749-d1fb-423b-8c8b-e684877f64b8 --groupIdcom.example.application/groupIdartifactIdmy-app2025/artifactIdnamemy-app2025/nameversion1.0-SNAPSHOT/versionpackagingjar/packagingpropertiesjava.version17/java.versionvaadin.version24.6.0/vaadin.version/propertiesparentgroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-parent/artifactIdversion3.4.1/version/parentrepositories
!-- repository--
!-- idVaadin Directory/id--
!-- urlhttps://maven.vaadin.com/vaadin-addons/url--
!-- snapshots--
!-- enabledfalse/enabled--
!-- /snapshots--
!-- /repository--repositoryidcentral/idurlhttps://maven.aliyun.com/repository/central/urlreleasesenabledtrue/enabled/releasessnapshotsenabledtrue/enabled/snapshots/repository/repositoriesdependencyManagementdependenciesdependencygroupIdcom.vaadin/groupIdartifactIdvaadin-bom/artifactIdversion${vaadin.version}/versiontypepom/typescopeimport/scope/dependency/dependencies/dependencyManagementdependenciesdependencygroupIdcom.vaadin/groupId!-- Replace artifactId with vaadin-core to use only free components --artifactIdvaadin/artifactId/dependencydependencygroupIdcom.vaadin/groupIdartifactIdvaadin-spring-boot-starter/artifactId/dependencydependencygroupIdorg.parttio/groupIdartifactIdline-awesome/artifactIdversion2.1.0/version/dependencydependencygroupIdcom.h2database/groupIdartifactIdh2/artifactIdscoperuntime/scope/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-data-jpa/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-validation/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-devtools/artifactIdoptionaltrue/optional/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-test/artifactIdscopetest/scope/dependencydependencygroupIdcom.vaadin/groupIdartifactIdvaadin-testbench-junit5/artifactIdscopetest/scope/dependency/dependenciesbuilddefaultGoalspring-boot:run/defaultGoalpluginsplugingroupIdorg.springframework.boot/groupIdartifactIdspring-boot-maven-plugin/artifactId/pluginplugingroupIdcom.diffplug.spotless/groupIdartifactIdspotless-maven-plugin/artifactIdversion2.43.0/versionconfigurationjavaeclipseversion4.33/versionfile${project.basedir}/eclipse-formatter.xml/file/eclipse/java!-- Uncomment to format TypeScript files typescriptincludesincludesrc/main/frontend/**/*.ts/includeincludesrc/main/frontend/**/*.tsx/include/includesexcludesexcludesrc/main/frontend/generated/**/exclude/excludesprettierprettierVersion3.3.3/prettierVersionconfigFile.prettierrc.json/configFile/prettier/typescript--/configuration/pluginplugingroupIdcom.vaadin/groupIdartifactIdvaadin-maven-plugin/artifactIdversion${vaadin.version}/versionexecutionsexecutiongoalsgoalprepare-frontend/goal/goals/execution/executions/plugin/plugins/buildprofilesprofile!-- Production mode is activated using -Pproduction --idproduction/iddependencies!-- Exclude development dependencies from production --dependencygroupIdcom.vaadin/groupIdartifactIdvaadin-core/artifactIdexclusionsexclusiongroupIdcom.vaadin/groupIdartifactIdvaadin-dev/artifactId/exclusion/exclusions/dependency/dependenciesbuildpluginsplugingroupIdcom.vaadin/groupIdartifactIdvaadin-maven-plugin/artifactIdversion${vaadin.version}/versionexecutionsexecutiongoalsgoalbuild-frontend/goal/goalsphasecompile/phase/execution/executions/plugin/plugins/build/profileprofileidit/idbuildpluginsplugingroupIdorg.springframework.boot/groupIdartifactIdspring-boot-maven-plugin/artifactIdexecutionsexecutionidstart-spring-boot/idphasepre-integration-test/phasegoalsgoalstart/goal/goals/executionexecutionidstop-spring-boot/idphasepost-integration-test/phasegoalsgoalstop/goal/goals/execution/executions/plugin!-- Runs the integration tests (*IT) after the server is started --plugingroupIdorg.apache.maven.plugins/groupIdartifactIdmaven-failsafe-plugin/artifactIdexecutionsexecutiongoalsgoalintegration-test/goalgoalverify/goal/goals/execution/executionsconfigurationtrimStackTracefalse/trimStackTraceenableAssertionstrue/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工程的项目结构和官方组件使用案例
