连接到 MySQL 数据库的 Vaadin Web 应用程序无法正常工作

Question

我遇到了一个关于我在 Vaadin 上制作的网络应用程序的问题。我下载了一个连接到 MySQL 数据库的现成 Vaadin Web 应用程序，以检查它是如何工作的。一切似乎都运行良好。 有一个基本选项卡，其中包含一个包含数据库数据的网格和一个用于在数据库中添加或删除更多项目的表单。

我进行了一些更改，例如在网络应用中添加更多选项卡或更改主题和外观，但没有遇到任何问题。

然后，我尝试通过 Workbench 在我的数据库中添加一些新列，这就是问题开始的时候。每次我尝试在数据库中添加新列时，网络应用程序中的网格都会消失，但我没有收到任何错误....

更具体地说：

-我，首先通过工作台添加新列来更改表，命名为“examination_type”

ALTER TABLE dummydata.employees ADD COLUMN examination_type VARCHAR(1000);

-其次，我在我的 Java 类中添加了考试类型字段（它现在出现在构造函数、getter 和 setter 中）

   private String firstname;
   private String lastname;
   private String examination_type;
   private String email;
   private String notes;
   

   public Employee(String firstname, String lastname, String examination_type, String email, String notes) {
       super();
       this.firstname = firstname;
       this.lastname = lastname;
       this.examination_type = examination_type;
       this.email = email;
       this.notes = notes;
   }
//Getters and Setters

-然后我在需要的地方添加了后端服务文件中的字段：

@Component
public class EmployeeService {
    
    @Autowired
    private JdbcTemplate jdbcTemplate;

    public List<Employee> findAll() {       
        try {
            return jdbcTemplate.query("SELECT firstname, lastname, email, examination_type FROM employees",
                    (rs, rowNum) -> new Employee(rs.getString("firstname"), rs.getString("lastname"), rs.getString("examination_type"), rs.getString("email"), rs.getString("notes")));
        } catch (Exception e) {
            return new ArrayList<Employee>();   
        }       
    }
    
    public List<Employee> findByEmail(String email) {       
        try {
            return jdbcTemplate.query("SELECT firstname, lastname, email, examination_type FROM employees WHERE email = ?",
                    new Object[]{email},
                    (rs, rowNum) -> new Employee(rs.getString("firstname"), rs.getString("lastname"), rs.getString("examination_type"), rs.getString("email"), rs.getString("notes")));
        } catch (Exception e) {
            return new ArrayList<Employee>();   
        }       
    }
    
    public int saveEmployee(Employee employee) {
        List<Employee> employees = this.findByEmail(employee.getEmail());
        if ( employees.size() > 0 ) {
            return updateEmployee(employee);
        } else {
            return insertEmployee(employee);
        }
        
    }
    
    private int updateEmployee(Employee employee) {     
        try {
            return jdbcTemplate.update("UPDATE employees SET lastname = ?, firstname = ?, examination_type = ? WHERE email = ?",
                    employee.getLastname(), employee.getFirstname(), employee.getExaminationType(), employee.getEmail());
        } catch (Exception e) {
            return 0;
        }
    }
    
    private int insertEmployee(Employee employee) {
        try {
            return jdbcTemplate.update("INSERT INTO employees VALUES (?, ?, ?, ?, ?)",
                    employee.getFirstname(), employee.getLastname(), employee.getExaminationType(), employee.getEmail(),  "" /*employee.getBirthDate()*/);
        } catch (Exception e) {
            return 0;
        }       
    }
    
    public int deleteEmployee(Employee employee) {
        try {
            return jdbcTemplate.update("DELETE FROM employees WHERE email = ?",
                    employee.getEmail());
        } catch (Exception e) {
            return 0;
        }
    }
}

-最后但同样重要的是，我在表单中添加了考试类型 Textfield

编译程序时没有错误，我什至收到“前端编译成功”消息。然后我访问 localhost 网站和网格，我应该看到我的数据库内容的地方没有出现。不过，表单工作正常，我可以在数据库中添加新项目。

有什么想法吗？

抱歉，帖子太长了！

这是视图的代码：

@Route(value = "examinations", layout = MainView.class)
@PageTitle("Examinations")
@CssImport("styles/views/examinations/examinations-view.css")
public class ExaminationsView extends Div implements AfterNavigationObserver {

    @Autowired
    private EmployeeService employeeService;
    private Grid<Employee> employees;

    private TextField firstname = new TextField();
    private TextField lastname = new TextField();
    private TextField email = new TextField();
    private TextField examination_type = new TextField();

    private Button cancel = new Button("Cancel");
    private Button save = new Button("Save");
    private Button delete = new Button("Delete");
   
    private Binder<Employee> binder;

    public ExaminationsView() {
        setId("examinations-view");
        // Configure Grid
        employees = new Grid<>();
        employees.addThemeVariants(GridVariant.LUMO_NO_BORDER);
        employees.setHeightFull();
        employees.addColumn(Employee::getFirstname).setHeader("First name");
        employees.addColumn(Employee::getLastname).setHeader("Last name");
        employees.addColumn(Employee::getEmail).setHeader("Email");
        employees.addColumn(Employee::getExaminationType).setHeader("Examination Type");
        //when a row is selected or deselected, populate form
        employees.asSingleSelect().addValueChangeListener(event -> populateForm(event.getValue()));
        // Configure Form
        binder = new Binder<>(Employee.class);

        binder.bindInstanceFields(this);

        binder.setBean(new Employee());
        
        cancel.addClickListener(e -> employees.asSingleSelect().clear());

        save.addClickListener(e -> {
            Employee employee = binder.getBean();
            if ( employeeService.saveEmployee(employee) > 0) {
                employees.setItems(employeeService.findAll());
            } else {
                Notification.show("Save error");
            }               
        });
        
        delete.addClickListener(e -> {
            Employee employee = binder.getBean();
            if ( employeeService.deleteEmployee(employee) > 0) {
                employees.setItems(employeeService.findAll());
            } else {
                Notification.show("Delete error");
            }               
        });
        SplitLayout splitLayout = new SplitLayout();
        splitLayout.setSizeFull();

        createGridLayout(splitLayout);
        createEditorLayout(splitLayout);

        add(splitLayout);
    }
    

    private void createEditorLayout(SplitLayout splitLayout) {
        Div editorDiv = new Div();
        editorDiv.setId("editor-layout");
        FormLayout formLayout = new FormLayout();
        addFormItem(editorDiv, formLayout, firstname, "First name");
        addFormItem(editorDiv, formLayout, lastname, "Last name");
        addFormItem(editorDiv, formLayout, email, "Email");
        addFormItem(editorDiv, formLayout, examination_type, "Examination Type");
        createButtonLayout(editorDiv);
        splitLayout.addToSecondary(editorDiv);
    }

    private void createButtonLayout(Div editorDiv) {
        HorizontalLayout buttonLayout = new HorizontalLayout();
        buttonLayout.setId("button-layout");
        buttonLayout.setWidthFull();
        buttonLayout.setSpacing(true);
        cancel.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
        save.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        delete.addThemeVariants(ButtonVariant.LUMO_ERROR);
        buttonLayout.add(delete, cancel, save);
        editorDiv.add(buttonLayout);
    }

    private void createGridLayout(SplitLayout splitLayout) {
        Div wrapper = new Div();
        wrapper.setId("wrapper");
        wrapper.setWidthFull();
        splitLayout.addToPrimary(wrapper);
        wrapper.add(employees);
    }

    private void addFormItem(Div wrapper, FormLayout formLayout, AbstractField field, String fieldName) {       
        formLayout.addFormItem(field, fieldName);
        wrapper.add(formLayout);
        field.getElement().getClassList().add("full-width");
    }
    
    @Override
    public void afterNavigation(AfterNavigationEvent event) {
        employees.setItems(employeeService.findAll());
    }

    private void populateForm(Employee value) {
        if ( value == null ) {
            value = new Employee();
        }
        binder.setBean(value);
        
    }
}

Answer 1

自从我发布此问题以来已经有几个小时了，距离问题第一次出现也有好几天了。最后，似乎我以与数据库内部不同的顺序传递 MySQL 参数？将它们设置正确似乎可以解决问题。感谢人们，永远记住并始终检查论点....