java - 如何在vaadin 10中创建表并从mysql数据库获取数据

Question

我正在使用 vaadin 做一个项目，我对它是新手。我想创建一个垂直布局的 2 或 3 列表，并通过 Myqsl 数据库获取值。任何人都可以帮忙解决这个问题吗？感谢您抽出时间。

Answer 1

以下是示例:https://vaadin.com/blog/building-a-web-ui-for-mysql-databases-in-plain-java-

值得引用 vaadin 文档:http://demo.vaadin.com/

示例:

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.data.binder.Binder;
import com.vaadin.flow.router.Route;

@Route("")
public class VaadinUI extends VerticalLayout {

    private final CustomerService service;
    private Customer customer;

    private Grid<Customer> grid = new Grid<>(Customer.class);
    private TextField firstName = new TextField("First name");
    private TextField lastName = new TextField("Last name");
    private Button save = new Button("Save", e -> saveCustomer());

    public VaadinUI(CustomerService service) {
        this.service = service;

        grid.setColumns("firstName", "lastName");
        grid.addSelectionListener(e -> updateForm());

        add(grid, firstName, lastName, save);
        setMargin(true);
        setSpacing(true);
        updateGrid();
    }

    private void updateGrid() {
        grid.setItems(service.findAll());
        setFormVisible(false);
    }

    private void updateForm() {
        if (grid.asSingleSelect().isEmpty()) {
            setFormVisible(false);
        } else {
            customer = grid.asSingleSelect().getValue();
            Binder<Customer> binder = new Binder<>(Customer.class);
            binder.bindInstanceFields(this);
            binder.setBean(customer);
            setFormVisible(true);
        }
    }

    private void setFormVisible(boolean visible) {
        firstName.setVisible(visible);
        lastName.setVisible(visible);
        save.setVisible(visible);
    }

    private void saveCustomer() {
        service.update(customer);
        updateGrid();
    }

}

使用 WebUI 和 MySQL 实现 Vaadin 10 的完整示例:

https://github.com/alejandro-du/mysql-jdbc-vaadin/tree/vaadin10