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)]