Pengembangan Aplikasi Web yang Cepat pada Vaadin dan Spring Boot

Tujuan artikel ini adalah untuk mensistematisasikan proses pengembangan aplikasi web pada Vaadin 14 menggunakan Spring Boot.

Sebelum membaca artikel ini, saya sarankan membaca materi berikut:

• Pengantar Boot Musim Semi
• Data pegas jpa
• Lombok mengembalikan kehebatan Jawa
• Vaadin Flow - rusa yang aneh

Tayangan

Vaadin 14 adalah alat yang agak nyaman untuk merancang aplikasi web, sebelum bertemu, itu mengembangkan antarmuka grafis hanya di JavaFX, Android, dan bahkan J2ME, dan pada saat yang sama menghindari pengembangan frontend (pengetahuan dasar tentang HTML, CSS, JS tersedia) karena tidak berpikir milikku

Penafian

Mereka yang belum bekerja dengan Spring Boot merekomendasikan untuk melewatkan awal yang cepat menggunakan Spring Initializr, kembali ke materi yang direkomendasikan, dan mencoba mengkonfigurasi semuanya sendiri, setelah menemukan banyak masalah yang berbeda, jika tidak di masa depan akan ada kesenjangan dalam memahami berbagai hal.

Mulai cepat

Buat proyek untuk aplikasi web kami menggunakan Spring Initializr , dependensi yang diperlukan untuk aplikasi web kecil kami:

• Spring Data JPA (untuk bekerja dengan database)
• Vaadin (untuk pengembangan aplikasi web)
• Lombok (untuk mengurangi kode pelat-ketel)
• Driver MySQL (saya menggunakan mariadb, pada musim semi initializr'e bukan)

Pengaturan application.properties dan database

Proyek yang dibuat pada Spring Initializr hampir siap dijalankan, kita hanya perlu mengkonfigurasi application.properties dengan menentukan jalur basis data, nama pengguna dan kata sandi

spring.datasource.url = jdbc:mariadb://127.0.0.1:3306/test spring.datasource.username=user spring.datasource.password=password spring.jpa.hibernate.ddl-auto=update 

Dengan set nilai ddl-auto: update, hibernate secara otomatis membuat tabel dalam database berdasarkan esensi kami, karena kami membuat buku alamat sederhana kemudian membuat kelas kontak.

 @Entity(name = "Contacts") @Getter @Setter @EqualsAndHashCode public class Contact { @Id @GeneratedValue(strategy = GenerationType.AUTO) private int id; private String firstName; private String secondName; private String fatherName; private String numberPhone; private String email; } 

Mari kita buat antarmuka untuk bekerja dengan database, dan menambahkan metode yang mengembalikan daftar sejak itu Spring Data JPA secara default mengembalikan Iterable, bukan List.

 public interface ContactRepository extends CrudRepository<Contact, Integer> { List<Contact> findAll(); } 

Pengembangan antarmuka pada Vaadin mencakup penambahan komponen input, visualisasi, dan formulir interaksi ke objek tata letak untuk penentuan posisi elemen yang diperlukan. Daftar semua komponen dapat ditemukan di situs web resmi kerangka kerja.

Halaman utama aplikasi kita adalah ContactList. Kami akan mewarisi semua objek halaman yang dibuat dari AppLayout - ini adalah tata letak khas aplikasi web yang terdiri dari:

• Navbar (header)
• Laci (bilah sisi)
• Konten
  Pada saat yang sama, komponen ditambahkan ke Navbar dan Drawer, dan komponen diatur ke Konten sebagai Konten, misalnya, VerticalLayout di mana elemen pengguna akan ditempatkan dalam pengaturan vertikal.

Halaman untuk mengedit dan membuat kontak akan menjadi ManageContact, dan kami akan mengimplementasikan antarmuka HasUrlParameter di dalamnya untuk mentransfer id kontak, ketika antarmuka ini dihidupkan, parameter harus diteruskan ke halaman.
Untuk mengikat halaman ke URL tertentu, anotasi Rute digunakan:

 @Route("contacts") public class ContactList extends AppLayout {} @Route("manageContact") public class ManageContact extends AppLayout implements HasUrlParameter<Integer> {} 

Buat daftar kontak

Di konstruktor objek ContactList, tentukan komponen yang digunakan dengan terlebih dahulu menjadikannya bidang objek. Karena data akan diambil dari database, perlu untuk menghubungkan repositori ke bidang objek.

 @Route("contacts") public class ContactList extends AppLayout { VerticalLayout layout; Grid<Contact> grid; RouterLink linkCreate; @Autowired ContactRepository contactRepository; public ContactList(){ layout = new VerticalLayout(); grid = new Grid<>(); linkCreate = new RouterLink(" ",ManageContact.class,0); layout.add(linkCreate); layout.add(grid); addToNavbar(new H3(" ")); setContent(layout); } } 

 ContactRepository contactRepository; @Autowired public ContactList(ContactRepository contactRepository){ this.contactRepository = contactRepository; 

Komponen VerticalLayout telah ditambahkan ke kelas ContactList untuk pengaturan vertikal elemen dalam konten, kami akan menambahkan RouterLink ke dalamnya (untuk pergi ke halaman pembuatan kontak) dan Grid untuk menampilkan tabel. Kotak diketik oleh objek Kontak sehingga kita dapat memuat data dari daftar dan mereka secara otomatis menarik ketika metode setItems () dipanggil;

 Grid<Contact> grid; public ContactList(){ grid = new Grid<>(); //      grid = new Grid<>(Contact.class); //      ,       } 

Perilaku pembuatan kolom otomatis tidak menarik bagi kami, karena dalam kerangka artikel ini, ada baiknya menampilkan penambahan kolom, dan tampilan tombol untuk menghapus atau mengedit kontak.

Untuk mengisi tabel, kita akan mendapatkan data dari contactRepository, untuk ini kita akan membuat metode dengan anotasi PostConstruct

  @PostConstruct public void fillGrid(){ List<Contact> contacts = contactRepository.findAll(); if (!contacts.isEmpty()){ //     grid.addColumn(Contact::getFirstName).setHeader(""); grid.addColumn(Contact::getSecondName).setHeader(""); grid.addColumn(Contact::getFatherName).setHeader(""); grid.addColumn(Contact::getNumberPhone).setHeader(""); grid.addColumn(Contact::getEmail).setHeader("E-mail"); //     grid.addColumn(new NativeButtonRenderer<Contact>("", contact -> { UI.getCurrent().navigate(ManageContact.class,contact.getId()); })); grid.addColumn(new NativeButtonRenderer<Contact>("", contact -> { Dialog dialog = new Dialog(); Button confirm = new Button(""); Button cancel = new Button(""); dialog.add("     ?"); dialog.add(confirm); dialog.add(cancel); confirm.addClickListener(clickEvent -> { contactRepository.delete(contact); dialog.close(); Notification notification = new Notification(" ",1000); notification.setPosition(Notification.Position.MIDDLE); notification.open(); grid.setItems(contactRepository.findAll()); }); cancel.addClickListener(clickEvent -> { dialog.close(); }); dialog.open(); })); grid.setItems(contacts); } } 

NativeButtonRenderer digunakan untuk menambahkan kolom dengan tombol edit dan hapus, kami meneruskan nama tombol ke argumen konstruktor, dan penangan klik tombol.

 grid.addColumn(new NativeButtonRenderer<Contact>("", contact -> { //DO SOMETHING })); grid.addColumn(new NativeButtonRenderer<Contact>("", new ClickableRenderer.ItemClickListener<Contact>() { @Override public void onItemClicked(Contact contact) { //DO SOMETHING }})); 

Membuat halaman edit kontak

Halaman edit kontak menerima parameter sebagai id kontak, jadi kita perlu mengimplementasikan metode setParameter ():

  @Override public void setParameter(BeforeEvent beforeEvent, Integer contactId) { id = contactId; if (!id.equals(0)){ addToNavbar(new H3(" ")); } else { addToNavbar(new H3(" ")); } fillForm(); //  } 

Menambahkan komponen mirip dengan ContactList, hanya dalam hal ini kami tidak menggunakan VerticalLayout, tetapi menggunakan markup khusus FormLayout untuk menampilkan formulir tersebut. Kami mengisi formulir dengan data tidak lagi menggunakan metode dengan anotasi PostConstruct, tetapi setelah mendapatkan nomor kontak dari URL, karena rantai: konstruktor objek -> @PostConstruct -> Override

 @Route("manageContact") public class ManageContact extends AppLayout implements HasUrlParameter<Integer> { Integer id; FormLayout contactForm; TextField firstName; TextField secondName; TextField fatherName; TextField numberPhone; TextField email; Button saveContact; @Autowired ContactRepository contactRepository; public ManageContact(){ //    contactForm = new FormLayout(); firstName = new TextField(""); secondName = new TextField(""); fatherName = new TextField(""); numberPhone = new TextField(" "); email = new TextField(" "); saveContact = new Button(""); //     contactForm.add(firstName, secondName,fatherName,numberPhone,email,saveContact); setContent(contactForm); } @Override public void setParameter(BeforeEvent beforeEvent, Integer contactId) { id = contactId; if (!id.equals(0)){ addToNavbar(new H3(" ")); } else { addToNavbar(new H3(" ")); } fillForm(); } public void fillForm(){ if (!id.equals(0)){ Optional<Contact> contact = contactRepository.findById(id); contact.ifPresent(x -> { firstName.setValue(x.getFirstName()); secondName.setValue(x.getSecondName()); fatherName.setValue(x.getFatherName()); numberPhone.setValue(x.getNumberPhone()); email.setValue(x.getEmail()); }); } saveContact.addClickListener(clickEvent->{ //       Contact contact = new Contact(); if (!id.equals(0)){ contact.setId(id); } contact.setFirstName(firstName.getValue()); contact.setSecondName(secondName.getValue()); contact.setFatherName(fatherName.getValue()); contact.setEmail(email.getValue()); contact.setNumberPhone(numberPhone.getValue()); contactRepository.save(contact); Notification notification = new Notification(id.equals(0)? "  ":"  ",1000); notification.setPosition(Notification.Position.MIDDLE); notification.addDetachListener(detachEvent -> { UI.getCurrent().navigate(ContactList.class); }); contactForm.setEnabled(false); notification.open(); }); } } 

Hasil: Vaadin 14 adalah kerangka kerja yang agak nyaman untuk membuat aplikasi web sederhana, dengan menggunakannya Anda dapat dengan cepat membuat aplikasi dengan hanya pengetahuan Java di bagasi, dan itu akan berfungsi. Namun sayangnya, seluruh antarmuka dibuat di sisi server dan sumber daya jauh lebih diperlukan daripada menggunakan HTML5 + JS. Kerangka kerja ini lebih cocok untuk proyek-proyek kecil yang perlu dilakukan dengan cepat tanpa mempelajari teknologi front-end.

Artikel ini menunjukkan bagaimana Anda dapat dengan cepat dan mudah membuat aplikasi web tanpa mendesain database sebelumnya, menghindari konfigurasi xml yang panjang, dan seberapa cepat Anda dapat mengembangkan antarmuka web. Untuk sebagian besar, Spring Boot dan Spring Data JPA membuat hidup lebih mudah bagi pengembang dan menyederhanakan pengembangan. Artikel ini tidak akan mengungkapkan hal baru kepada pengembang yang sudah mapan, tetapi akan membantu pemula untuk mulai menguasai kerangka Spring.

Repositori dengan proyek

Kesalahan tata bahasa dan tanda baca dimungkinkan dalam artikel, setelah terdeteksi, silakan kirim secara pribadi