वैदीन और स्प्रिंग बूट पर रैपिड वेब एप्लीकेशन डेवलपमेंट

इस आलेख का उद्देश्य स्प्रिंग बूट का उपयोग करके वाडिन 14 पर एक वेब एप्लिकेशन को विकसित करने की प्रक्रिया को व्यवस्थित करना है।

इस लेख को पढ़ने से पहले, मैं निम्नलिखित सामग्री को पढ़ने की सलाह देता हूं:

• स्प्रिंग बूट का परिचय
• स्प्रिंग डेटा जपा
• लोम्बोक जावा की महानता लौटाता है
• वाडिन प्रवाह - एक अजीब हिरण

छापों

वेब एप्लिकेशन डिजाइन करने के लिए वाडिन 14 एक अधिक सुविधाजनक उपकरण है, इसे पूरा करने से पहले, इसने केवल JavaFX, Android, और यहां तक ​​कि J2ME पर ग्राफिकल इंटरफेस विकसित किया, और साथ ही फ्रंटएंड डेवलपमेंट (HTML, CSS, JS का मूल ज्ञान उपलब्ध है) से परहेज किया क्योंकि यह नहीं सोचा था मेरी।

त्याग

जिन लोगों ने अभी तक स्प्रिंग बूट के साथ काम नहीं किया है, वे स्प्रिंग प्रीलिंजर का उपयोग करते हुए एक त्वरित शुरुआत को छोड़ने की सलाह देते हैं, अनुशंसित सामग्री पर लौटते हैं, और खुद को सब कुछ कॉन्फ़िगर करने की कोशिश करते हैं, कई अलग-अलग समस्याओं के साथ आते हैं, अन्यथा भविष्य में विभिन्न चीजों को समझने में अंतराल होगा।

जल्दी शुरू करो

स्प्रिंग वेबिलिजर का उपयोग करके हमारे वेब एप्लिकेशन के लिए एक प्रोजेक्ट बनाएं, हमारे छोटे वेब एप्लिकेशन के लिए आवश्यक निर्भरताएं:

• स्प्रिंग डेटा JPA (डेटाबेस के साथ काम करने के लिए)
• वाडिन (वेब ​​अनुप्रयोग विकास के लिए)
• लोम्बोक (बॉयलर-प्लेट कोड को कम करने के लिए)
• MySQL ड्राइवर (मैं वसंत आरंभ में mariadb का उपयोग करता हूं, यह नहीं है)

Application.properties और डेटाबेस सेट करना

स्प्रिंग इनिरिज़्र पर बनाई गई परियोजना लगभग चलाने के लिए तैयार है, हम केवल डेटाबेस पथ, उपयोगकर्ता नाम और पासवर्ड निर्दिष्ट करके एप्लिकेशन को कॉन्फ़िगर कर सकते हैं।

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 

Ddl-auto: अद्यतन मूल्य सेट के साथ, हाइबरनेट स्वचालित रूप से हमारे सार के आधार पर डेटाबेस में एक तालिका बनाता है, क्योंकि हम एक सरल पता पुस्तिका बनाते हैं, फिर एक संपर्क वर्ग बनाते हैं।

 @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; } 

चलो डेटाबेस के साथ काम करने के लिए एक इंटरफ़ेस बनाते हैं, और एक विधि जोड़ते हैं जो सूची को वापस करता है स्प्रिंग डेटा JPA डिफ़ॉल्ट रूप से सूची के बजाय Iterable देता है।

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

वाडिन पर इंटरफ़ेस विकास में तत्वों की आवश्यक स्थिति के लिए लेआउट ऑब्जेक्ट्स में इनपुट, विज़ुअलाइज़ेशन और इंटरैक्शन फॉर्म के घटकों को जोड़ना शामिल है। सभी घटकों की एक सूची ढांचे की आधिकारिक वेबसाइट पर देखी जा सकती है ।

हमारे आवेदन का मुख्य पृष्ठ ContactList होगा। हम AppLayout से बनाए गए पृष्ठों की सभी वस्तुओं को इनहेरिट करेंगे - यह एक वेब एप्लिकेशन का एक विशिष्ट लेआउट है जिसमें शामिल हैं:

• नवबार (हेडर)
• दराज (साइडबार)
• सामग्री (सामग्री)
  उसी समय, घटकों को नवबार और दराज में जोड़ा जाता है, और एक घटक को सामग्री के रूप में सेट किया जाता है, उदाहरण के लिए, वर्टिकल लयआउट जिसमें उपयोगकर्ता तत्वों को एक ऊर्ध्वाधर व्यवस्था में रखा जाएगा।

संपर्कों को संपादित करने और बनाने के लिए पृष्ठ ManageContact होगा, और हम संपर्क आईडी को स्थानांतरित करने के लिए इसमें HasUrlParameter इंटरफ़ेस लागू करेंगे, जब यह इंटरफ़ेस चालू होता है, तो पैरामीटर को पृष्ठ पर पारित किया जाना चाहिए।
किसी पृष्ठ को किसी विशिष्ट URL पर बाँधने के लिए, रूट एनोटेशन का उपयोग किया जाता है:

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

संपर्क सूची बनाएं

कॉन्टैक्टलिस्ट ऑब्जेक्ट के कंस्ट्रक्टर में, पहले उन ऑब्जेक्ट्स का उपयोग करें, जो उन्हें ऑब्जेक्ट के क्षेत्र बनाते हैं। चूंकि डेटा डेटाबेस से लिया जाएगा, इसलिए रिपॉजिटरी को ऑब्जेक्ट फ़ील्ड से कनेक्ट करना आवश्यक है।

 @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; 

कंटेंट में तत्वों की ऊर्ध्वाधर व्यवस्था के लिए वर्टिकल लाइऑट घटक को कॉन्टेक्टलिस्ट क्लास में जोड़ा गया है, हम टेबल को प्रदर्शित करने के लिए इसमें राउटरलिंक (संपर्क निर्माण पृष्ठ पर जाने के लिए) और ग्रिड को जोड़ देंगे । ग्रिड को संपर्क ऑब्जेक्ट द्वारा टाइप किया जाता है ताकि हम सूची से डेटा लोड कर सकें और वे स्वचालित रूप से ऊपर खींचते हैं जब setItems () विधि कहा जाता है;

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

स्वचालित स्तंभ निर्माण का व्यवहार हमारे लिए दिलचस्प नहीं है, क्योंकि लेख के ढांचे के भीतर, यह कॉलम को जोड़ने और संपर्कों को हटाने या संपादित करने के लिए बटन के प्रदर्शन के लायक है।

तालिका को भरने के लिए, हमें contactRepository से डेटा मिलेगा, इसके लिए हम 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 का उपयोग एडिट और डिलीट बटन के साथ कॉलम जोड़ने के लिए किया जाता है, हम बटन का नाम कंस्ट्रक्टर के तर्कों के पास देते हैं और एक बटन क्लिक हैंडलर का।

 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 }})); 

संपर्क संपादन पृष्ठ बनाना

संपर्क संपादित पृष्ठ पैरामीटर को संपर्क आईडी के रूप में स्वीकार करता है, इसलिए हमें सेटपैरमीटर () विधि को लागू करने की आवश्यकता है:

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

घटक जोड़ना कॉन्टैक्टलिस्ट के समान है, केवल इस मामले में हम वर्टिकल लयआउट का उपयोग नहीं करते हैं, लेकिन ऐसे रूपों को प्रदर्शित करने के लिए फॉर्मलायट विशेष मार्कअप का उपयोग करें। हम पोस्टकॉस्ट्रक्चर एनोटेशन के साथ विधि का उपयोग करके डेटा के साथ फ़ॉर्म भरते हैं, लेकिन URL से संपर्क नंबर प्राप्त करने के बाद, क्योंकि श्रृंखला: ऑब्जेक्ट कंस्ट्रक्टर -> @PostConstruct -> ओवरराइड

 @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(); }); } } 

परिणाम: वाडिन 14 सरल वेब अनुप्रयोगों को बनाने के लिए एक सुविधाजनक ढांचा है, इसका उपयोग करके आप सामान में केवल जावा ज्ञान के साथ एक आवेदन कर सकते हैं, और यह काम करेगा। लेकिन दुर्भाग्य से, संपूर्ण इंटरफ़ेस सर्वर साइड पर बनाया गया है और एचटीएमएल 5 + जेएस का उपयोग करने की तुलना में संसाधन बहुत अधिक आवश्यक हैं। यह ढांचा उन छोटी परियोजनाओं के लिए अधिक उपयुक्त है जिन्हें फ्रंट-एंड प्रौद्योगिकियों का अध्ययन किए बिना जल्दी से करने की आवश्यकता है।

इस लेख में दिखाया गया है कि आप पहले से ही डेटाबेस को डिजाइन किए बिना कैसे जल्दी और आसानी से वेब एप्लिकेशन बना सकते हैं, लंबे xml कॉन्फ़िगरेशन से बचें, और कितनी जल्दी आप वेब इंटरफ़ेस विकसित कर सकते हैं। अधिकांश भाग के लिए, स्प्रिंग बूट और स्प्रिंग डेटा जेपीए डेवलपर्स के लिए जीवन को आसान बनाता है और विकास को सरल बनाता है। लेख पहले से ही स्थापित डेवलपर्स के लिए कुछ नया प्रकट नहीं करेगा, लेकिन शुरुआती को वसंत ढांचे में महारत हासिल करने में मदद करेगा।

परियोजना के साथ भंडार

लेख में व्याकरण और विराम चिह्न त्रुटियाँ संभव हैं, पता लगाने पर, कृपया एक व्यक्तिगत में भेजें