Permohonan Contoh dengan Spring Boot dan Vaadin

1. Gambaran keseluruhan

Vaadin adalah kerangka Java sisi pelayan untuk membuat antara muka pengguna web .

Dalam tutorial ini, kita akan meneroka cara menggunakan UI berasaskan Vaadin pada backend berasaskan Spring Boot . Untuk pengenalan kepada Vaadin, rujuk tutorial ini.

2. Persediaan

Mari mulakan dengan menambahkan kebergantungan Maven ke aplikasi Spring Boot standard:

 com.vaadin vaadin-spring-boot-starter 

Vaadin juga merupakan ketergantungan yang diakui oleh Spring Initializer.

Tutorial ini menggunakan versi Vaadin yang lebih baru daripada versi lalai yang dibawa oleh modul pemula. Untuk menggunakan versi yang lebih baru, cukup tentukan Vaadin Bill of Materials (BOM) seperti ini:

   com.vaadin vaadin-bom 10.0.11 pom import   

3. Perkhidmatan Backend

Kami akan menggunakan pekerja entiti dengan firstName dan LASTNAME hartanah untuk melaksanakan operasi CRUD di atasnya:

@Entity public class Employee { @Id @GeneratedValue private Long id; private String firstName; private String lastName; }

Inilah repositori Spring Data yang mudah dan sesuai - untuk menguruskan operasi CRUD:

public interface EmployeeRepository extends JpaRepository { List findByLastNameStartsWithIgnoreCase(String lastName); }

Kami menyatakan kaedah pertanyaan findByLastNameStartsWithIgnoreCase pada antara muka EmployeeRepository . Ia akan mengembalikan senarai Kakitangan yang sepadan dengan nama belakang .

Mari kita isi terlebih dahulu DB dengan beberapa contoh Pekerja :

@Bean public CommandLineRunner loadData(EmployeeRepository repository) { return (args) -> { repository.save(new Employee("Bill", "Gates")); repository.save(new Employee("Mark", "Zuckerberg")); repository.save(new Employee("Sundar", "Pichai")); repository.save(new Employee("Jeff", "Bezos")); }; }

4. UI Vaadin

4.1. Kelas MainView

The MainView kelas adalah pintu masuk untuk logik UI Vaadin ini. Anotasi @Route memberitahu Spring Boot untuk mengambilnya secara automatik dan ditunjukkan di akar aplikasi web:

@Route public class MainView extends VerticalLayout { private EmployeeRepository employeeRepository; private EmployeeEditor editor; Grid grid; TextField filter; private Button addNewBtn; }

Kita dapat menyesuaikan URL tempat paparan ditunjukkan dengan memberikan parameter pada anotasi @Route :

@Route(value="myhome")

Kelas menggunakan komponen UI berikut untuk dipaparkan di halaman:

Editor EmployeeEditor - menunjukkan borang Pekerja yang digunakan untuk memberikan maklumat pekerja untuk membuat dan menyunting.

Grid grid - gird untuk memaparkan senarai Pekerja

Penapis TextField - medan teks untuk memasukkan nama belakang berdasarkan yang mana gird akan ditapis

Butang addNewBtn - Butang untuk menambah Pekerja baru . Memaparkan editor EmployeeEditor .

Secara dalaman menggunakan employeeRepository melaksanakan pengendalian Makanan Tak.

4.2. Pendawaian Komponen Bersama

MainView meluaskan VerticalLayout . VerticalLayout adalah bekas komponen, yang menunjukkan subkomponen mengikut urutan penambahannya (secara menegak).

Seterusnya, kami memulakan dan menambah komponen.

Kami memberikan label pada butang dengan ikon +.

this.grid = new Grid(Employee.class); this.filter = new TextField(); this.addNewBtn = new Button("New employee", VaadinIcon.PLUS.create());

Kami menggunakan HorizontalLayout untuk mengatur medan teks penapis dan butang secara mendatar. Kemudian tambahkan susun atur ini, gird dan editor ke dalam susun atur menegak induk:

HorizontalLayout actions = new HorizontalLayout(filter, addNewBtn); add(actions, grid, editor);

Berikan nama lajur dan lajur. Kami juga menambah teks bantuan di medan teks:

grid.setHeight("200px"); grid.setColumns("id", "firstName", "lastName"); grid.getColumnByKey("id").setWidth("50px").setFlexGrow(0); filter.setPlaceholder("Filter by last name");

Pada permulaan aplikasi, UI akan melihat ini:

4.3. Menambah Logik pada Komponen

Kami akan menetapkan ValueChangeMode.EAGER ke medan teks penapis . Ini menyegerakkan nilai ke pelayan setiap kali ia berubah pada klien.

Kami juga menetapkan pendengar untuk peristiwa perubahan nilai, yang mengembalikan senarai pekerja yang disaring berdasarkan teks yang disediakan dalam saringan:

filter.setValueChangeMode(ValueChangeMode.EAGER); filter.addValueChangeListener(e -> listEmployees(e.getValue()));

Apabila memilih baris dalam gird, kami akan menunjukkan borang Kakitangan , yang membolehkan pengguna mengedit nama depan dan nama belakang:

grid.asSingleSelect().addValueChangeListener(e -> { editor.editEmployee(e.getValue()); });

Apabila mengklik butang tambah pekerja baru, kami akan menunjukkan borang Pekerja kosong :

addNewBtn.addClickListener(e -> editor.editEmployee(new Employee("", "")));

Akhirnya, kami mendengar perubahan yang dibuat oleh editor dan menyegarkan grid dengan data dari backend:

editor.setChangeHandler(() -> { editor.setVisible(false); listEmployees(filter.getValue()); });

The listEmployees fungsi mendapat senarai ditapis pekerja s dan mengemas kini grid:

void listEmployees(String filterText) { if (StringUtils.isEmpty(filterText)) { grid.setItems(employeeRepository.findAll()); } else { grid.setItems(employeeRepository.findByLastNameStartsWithIgnoreCase(filterText)); } }

4.4. Membina Borang

Kami akan menggunakan borang ringkas untuk pengguna menambah / menyunting pekerja:

@SpringComponent @UIScope public class EmployeeEditor extends VerticalLayout implements KeyNotifier { private EmployeeRepository repository; private Employee employee; TextField firstName = new TextField("First name"); TextField lastName = new TextField("Last name"); Button save = new Button("Save", VaadinIcon.CHECK.create()); Button cancel = new Button("Cancel"); Button delete = new Button("Delete", VaadinIcon.TRASH.create()); HorizontalLayout actions = new HorizontalLayout(save, cancel, delete); Binder binder = new Binder(Employee.class); private ChangeHandler changeHandler; }

The @SpringComponent hanya alias untuk Springs @Component anotasi untuk mengelakkan konflik dengan Vaadins Komponen kelas.

The @UIScope mengikat kacang di sebelah Vaadin UI semasa.

Pada masa ini, Pekerja yang diedit disimpan dalam pemboleh ubah anggota pekerja . Kami menangkap pekerja hartanah melalui firstName dan LASTNAME medan teks.

Borang mempunyai tiga butang - simpan , batalkan dan hapus .

Setelah semua komponen disatukan, borang akan kelihatan seperti di bawah untuk pemilihan baris:

Kami menggunakan Pengikat yang mengikat medan borang dengan sifat Karyawan menggunakan konvensyen penamaan :

binder.bindInstanceFields(this);

Kami memanggil kaedah EmployeeRepositor yang sesuai berdasarkan operasi pengguna:

void delete() { repository.delete(employee); changeHandler.onChange(); } void save() { repository.save(employee); changeHandler.onChange(); }

5. Kesimpulan

Dalam artikel ini, kami menulis aplikasi CRUD UI dengan ciri penuh menggunakan Spring Boot dan Spring Data JPA untuk kegigihan.

Seperti biasa, kodnya tersedia di GitHub.