拓展阅读
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)]