如何在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