java web mvc-07-Vaadin 入门介绍

拓展阅读

Spring Web MVC-00-重学 mvc

mvc-01-Model-View-Controller 概览

web mvc-03-JFinal

web mvc-04-Apache Wicket

web mvc-05-JSF JavaServer Faces

web mvc-06-play framework intro

web mvc-07-Vaadin

web mvc-08-Grails

开源

The jdbc pool for java.(java 手写 jdbc 数据库连接池实现)

The simple mybatis.(手写简易版 mybatis)

Vaadin Flow 快速入门

需求

添加代码

运行应用程序

Vaadin Flow 可以帮助您快速构建纯 Java 的 Web 应用程序,无需编写任何 HTML 或 JavaScript。本指南演示了如何使用 Vaadin Flow 构建一个小型但完全功能的 ToDo 应用程序。

需求

首先,您需要 JDK 17 或更高版本(例如 Eclipse Temurin JDK)。接下来,您需要下载快速入门项目。您可以通过点击这里的按钮进行下载:

https://start.vaadin.com/dl?preset=flow-quickstart-tutorial

完成下载后,请将下载的ZIP文件解压到本地文件夹中。然后将项目导入到一个集成开发环境(IDE)中。

添加代码

接下来,您将添加代码。

打开位于 src/main/java/com/example/application/views/main/ 目录下的 MainView.java 文件。

用以下代码替换该文件中的代码:

package com.example.application.views.main;import com.vaadin.flow.component.Key;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.checkbox.Checkbox;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;@Route("") 
public class MainView extends VerticalLayout { public MainView() {VerticalLayout todosList = new VerticalLayout(); TextField taskField = new TextField(); Button addButton = new Button("Add"); addButton.addClickListener(click -> { Checkbox checkbox = new Checkbox(taskField.getValue());todosList.add(checkbox);});addButton.addClickShortcut(Key.ENTER); add( new H1("Vaadin Todo"),todosList,new HorizontalLayout(taskField,addButton));}
}

@Route 注解使得该视图对终端用户可访问,在这种情况下,使用了空的 "" 路由。

由于 MainView 类扩展了 VerticalLayout,因此添加到其中的组件按垂直顺序排列。

todosList 是一个垂直布局,显示任务列表以及复选框。

taskField 是一个文本输入字段,用于输入新任务的描述。

addButton 是一个用于添加新任务的按钮。

在按钮点击的监听器中,首先创建一个新的复选框,其标签为来自 taskField 的值。然后将复选框添加到 todosList 中。

addButton 组件添加一个快捷键,当按下 Enter 键时触发。

调用 VerticalLayout 上的 add() 方法以垂直方式显示这些组件。请注意,taskFieldaddButton 位于一个 HorizontalLayout 中,这使它们并排显示。

运行应用程序

到目前为止,您所做的可能看起来并不多,但已足以运行应用程序。

在您的 IDE 中运行它,启动位于 src/main/java/org/vaadin/example 目录下的 Application.java。

或者,您可以在命令行中运行该项目,输入以下命令:

  • 在 macOS 或 Linux 系统上输入 ./mvnw
  • 在 Windows 系统上输入 mvnw

然后,在浏览器中打开 localhost:8080。您应该会看到以下内容:

[外链图片转存中…(img-9zLTjq9x-1706024506586)]

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/643126.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL函数—数值函数,随机数验证码生成

MySQL函数—日期函数 函数功能CEIL(x)向上取整FLOOR(x)向下取整MOD(x,y)返回x/y的模(取余)RAND()返回0-1的随机数ROUND(x,y)求参数x的四舍五入,保留y位小数 1、向上取整:CEIL。只要小数点后的数字大于0就取整。 select CEIL(1.2…

Qt解析含颜色的QString字符串显示到控件

1、需求 开发接收含颜色字符串显示到窗口,可解析字符串颜色配置窗口属性,且分割字符串显示。 mprintf(“xxxxxx”);打印的xxxxxx含有颜色配置。 2、实现方法 2.1、条件 选用Qt的PlainTextEdit控件显示字符串,配置为只读模式 …

pytestallure分析redis的数据并动态生成testCase报告

1.pytest.mark.parametrize pytest.mark.parametrize 是一个pytest的装饰器,它可以用于将参数传递给测试函数。使用 pytest.mark.parametrize 装饰器时,需要在装饰器中指定参数名称和参数值。对于多个参数,可以使用多个装饰器。 下面是一些…

数据链路层——笔记·续

使用集线器的星形拓扑 传统以太网传输媒体:粗同轴电缆 -> 细同轴电缆 -> 双绞线。 采用双绞线的以太网采用星形拓扑。 在星形的中心则增加了一种可靠性非常高的设备,叫做集线器 (hub)。 传统以太网使用同轴电缆,采用总线形拓扑结构&am…

嵌入式软件工程师面试题——2025校招社招通用(计算机网络篇)(二十八)

说明: 面试群,群号: 228447240面试题来源于网络书籍,公司题目以及博主原创或修改(题目大部分来源于各种公司);文中很多题目,或许大家直接编译器写完,1分钟就出结果了。但…

计算机网络 第3章(数据链路层)

系列文章目录 计算机网络 第1章(概述) 计算机网络 第2章(物理层) 计算机网络 第3章(数据链路层) 文章目录 系列文章目录1. 数据链路层概述1.1 概述1.2 三个重要问题 2. 封装成帧2.1 介绍2.2 透明传输2.3 总…

归一化是是什么意思,为什么要归一化

归一化 归一化是指将数据转换为标准尺度或相对比例的过程。在数据处理中,归一化的目标是使数据具有统一的尺度,以便更好地适应模型的训练和提高模型性能。归一化通常是通过线性变换将数据映射到一个特定的范围或分布。 为什么要进行归一化? …

RK3399平台开发系列讲解(USB篇)USB2.0 包格式分类

🚀返回专栏总目录 文章目录 一、令牌包格式二、数据包格式三、握手包格式沉淀、分享、成长,让自己和他人都能有所收获!😄 📢 USB协议定了多种类型的包,有令牌包、数据包和握手包。 根据PID可将USB2.0的包分为四种包类型。 令牌包(Token):01B数据包(Data):11B握手包…

QT下载、安装详细教程[Qt5.15及Qt6在线安装,附带下载链接]

QT5.15及QT6的下载和安装 1.下载1.1官网下载1.2国内镜像网站下载 2.安装3.软件启动及测试程序运行3.1Qt Creator(Community) 1.下载 QT自Qt5.15版本后不在支持离线安装包下载(非商业版本,开源),故Qt5.15及Qt6需要使用在线安装程序…

云原生安全:风险挑战与安全架构设计策略

概述 数字化转型已经成为当今最流行的话题之一,大部分企业已经开启自身的数字化转型之旅,在未来企业只有数字化企业和非数字化企业之分。通过数字经济的加速发展,可以有效推动企业数字化转型的步伐。云计算作为数字化转型的底座和重要的载体…

Redis 面试题 | 07.精选Redis高频面试题

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

【思路合集】talking head generation+stable diffusion

1 以DiffusionVideoEditing为baseline: 改进方向 针对于自回归训练方式可能导致的漂移问题: 训练时,在前一帧上引入小量的面部扭曲,模拟在生成过程中自然发生的扭曲。促使模型查看身份帧以进行修正。在像VoxCeleb或LRS这样的具…

webpack如何把dist.js中某个模块js打包成一个全局变量,使得在html引入dist.js后可以直接访问

webpack可以通过使用expose-loader来将模块中的一个js文件暴露为全局可以访问的变量。下面是一个示例代码: 1、安装expose-loader npm install expose-loader --save-dev 2、webpack.config.js配置文件 值得注意的是:我在本地使用16.14.2版本的node打包…

【深度学习】初识深度学习

初识深度学习 什么是深度学习 关系: #mermaid-svg-7QyNQ1BBaD6vmMVi {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-7QyNQ1BBaD6vmMVi .error-icon{fill:#552222;}#mermaid-svg-7QyNQ1BBaD6vmMVi .err…

【AI大模型】WikiChat超越GPT-4:在模拟对话中事实准确率提升55%终极秘密

WikiChat,这个名字仿佛蕴含了无尽的智慧和奥秘。它不仅是一个基于人工智能和自然语言处理技术的聊天机器人,更是一个能够与用户进行深度交流的智能伙伴。它的五个突出特点:高度准确、减少幻觉、对话性强、适应性强和高效性能,使得…

Airtest自动化测试工具

一开始知道Airtest大概是在年初的时候,当时,看了一下官方的文档,大概是类似Sikuli的一个工具,主要用来做游戏自动化的,通过截图的方式用来解决游戏自动化测试的难题。最近,移动端测试的同事尝试用它的poco库…

GPT5?OpenAI 创始人:GPT5 已在训练中,需要更多数据

OpenAI 最近发出征集大规模数据集的呼吁,特别是“今天在互联网上尚未公开轻松获取”的数据集,尤其是长篇写作或任何格式的对话。 GPT-5丨AI浪潮席卷全球,OpenAI 推出GPT-4 后,又于上月26日宣布今年9月、10月将推出GPT-4.5&#xf…

【LeetCode-406】根据身高重建队列(贪心)

LeetCode406.根据身高重建队列 题目描述 题目链接 假设有打乱顺序的一群人站成一个队列,数组 people 表示队列中一些人的属性(不一定按顺序)。每个 people[i] [hi, ki] 表示第 i 个人的身高为 hi ,前面 正好 有 ki 个身高大于…

数据仓库-相关概念

简介 数据仓库是一个用于集成、存储和管理大量数据的系统。它用于支持企业决策制定过程中的数据分析和报告需求。数据仓库从多个来源收集和整合数据,并将其组织成易于查询和分析的结构。 数据仓库的主要目标是提供高性能的数据访问和分析能力,以便…

网络协议与攻击模拟_07UDP协议

一、简单概念 1、UDP协议简介 UDP(用户数据报)协议,是传输层的协议。不需要建立连接,直接发送数据,不会重新排序,不需要确认。 2、UDP报文字段 源端口目的端口UDP长度UDP校验和 3、常见的UDP端口号 5…