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

Question

我正在使用 vaadin 做一个项目，我是新手。我想在垂直布局中创建一个包含 2 或 3 列的表，并通过我的 Myqsl 数据库获取值。谁能帮忙解决这个问题。谢谢你的时间。

Answer 1

示例示例：

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