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() 方法以垂直方式显示这些组件。请注意,taskField 和 addButton 位于一个 HorizontalLayout 中,这使它们并排显示。

运行应用程序

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

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

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

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

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

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

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈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…

木材加工(洛谷)

木材加工 题目背景 要保护环境 题目描述 木材厂有 n n n 根原木,现在想把这些木头切割成 k k k 段长度均为 l l l 的小段木头(木头有可能有剩余)。 当然,我们希望得到的小段木头越长越好,请求出 l l l 的最大…

点云从入门到精通技术详解100篇-基于点云的三维重建与 边缘检测(续)

目录 4 D图形渲染 4.1 传统方法 4.2 渲染管线 4.2.1 应用程序阶段 4.2.2 几何处理阶段

【思路合集】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 个身高大于…