संबंधित परियोजना: दृश्यपटल

कार्य: आपको HTML, CSS, JS, jQuery का उपयोग करके CRUD बैकएंड के लिए UI बनाने की आवश्यकता है। हम ऑनलाइन गेम खातों के प्रबंधन के लिए एक एडमिन पैनल बनाएंगे।

1. भंडार से कांटा: https://github.com/CodeGymCC/project-frontend.git
2. प्रोजेक्ट के अपने संस्करण को अपने कंप्यूटर पर डाउनलोड करें।
3. अपने लिए टॉमकैट डाउनलोड करें: https://tomcat.apache.org/download-90.cgi ।महत्वपूर्ण: टॉमकैट को संस्करण 9 की आवश्यकता है , 10 की नहीं।
4. आइडिया के माध्यम से एप्लिकेशन लॉन्च को कॉन्फ़िगर करें: Alt + Shift + F9 -> कॉन्फ़िगरेशन संपादित करें... -> Alt + डालें -> टॉम (खोज बार में) -> स्थानीय।
• उसके बाद, आपको क्लिक करने CONFIGUREऔर इंगित करने की आवश्यकता है कि टॉमकैट के साथ संग्रह को डाउनलोड और अनपैक किया गया था।
• टैब में Deployment: ऑल्ट + इन्सर्ट -> आर्टिफैक्ट… -> आरपीजी: वॉर एक्सप्लोड -> ओके।
• क्षेत्र में Application context: केवल छोड़ो / (फॉरवर्ड स्लैश)।
• प्रेस APPLY।
• सेटिंग्स विंडो बंद करें।
5. एप्लिकेशन लॉन्च करें। ऐसा करने के लिए: Alt + Shift + F9 -> (कॉन्फ़िगरेशन नाम, मैंने इसे 'ऐप' नाम दिया है) -> रन करें।
6. एप्लिकेशन को तैनात करने के बाद, कॉन्फ़िगरेशन के दौरान चयनित ब्राउज़र में एक नया टैब खुलेगा। महान, सर्वर कॉन्फ़िगर किया गया है, फिर आपको दो फाइलों के साथ काम करने की आवश्यकता है:
• <project_dir>/src/main/webapp/html/my.html- मार्कअप और स्क्रिप्ट होगी।
• <project_dir>/src/main/webapp/css/my.css- यहां स्टाइल होंगे। शैलियों के बारे में सब कुछ आप पर निर्भर है, उनके लिए कोई आवश्यकता नहीं है।
7. मार्कअप ( my.html ) में एक टेबल जोड़ें (इसे एक आईडी देना न भूलें) जिसमें कॉलम के नाम निर्दिष्ट करने हैं:
• #
• नाम
• शीर्षक
• जाति
• पेशा
• स्तर
• जन्मदिन
• प्रतिबंधित
8. एक जोड़ी टैग जोड़ें <script>- हम यहां फ़ंक्शन लिखेंगे।
9. पहले फ़ंक्शन को URL पर GET अनुरोध भेजना चाहिए "/rest/players"- सूची प्राप्त करें। परिणाम को पैराग्राफ 7 से तालिका में जोड़ा जाना चाहिए (यह वह जगह है जहाँ तालिका आईडी काम आती है)। यदि आपने सब कुछ सही ढंग से किया है, तो सर्वर को पुनरारंभ करने के बाद आपके पृष्ठ पर 4 पंक्तियों वाली एक तालिका प्रदर्शित की जाएगी। पहली पंक्ति में - स्तंभों के नाम, बाकी में - सर्वर से आए डेटा।
10. अब, तालिका में सेल बॉर्डर जोड़ना वांछनीय है, अन्यथा जानकारी आम तौर पर अपठनीय होती है।
11. अब चलिए पेजिंग पर चलते हैं। इसके लिए आपको चाहिए:
• टेबल के नीचे, एक सेक्शन जोड़ें, उदाहरण के लिए, <div>जिसमें पेजिंग बटन होंगे।
• एक फ़ंक्शन जोड़ें जो सर्वर पर एक GET अनुरोध भेजेगा जो सर्वर पर खातों की कुल संख्या लौटाता है। यूआरएल "/rest/players/count":।
• 3-4 संख्यात्मक मानों के लिए ड्रॉप-डाउन सूची जोड़ें, एक समय में कितने खाते दिखाना है। संख्याएँ 3 और 20 सहित के बीच होनी चाहिए।
• खातों की सूची प्रदर्शित करने की विधि (पृष्ठ 9) में, हम उन पृष्ठों की संख्या की गणना जोड़ेंगे जो प्रति पृष्ठ खातों की संख्या के लिए आवश्यक हैं, ताकि आप सभी खातों को देख सकें।
12. खातों की सूची दिखाने के कार्य में, एक पैरामीटर जोड़ें जो दिखाए जाने वाले पृष्ठ की संख्या के लिए ज़िम्मेदार होगा। URL को सही करें ताकि वह "pageNumber" और "pageSize" को क्वेरी पैरामीटर के रूप में पास कर सके । अब, ड्रॉप-डाउन सूची में प्रति पृष्ठ संख्या बदलते समय, खातों की अनुरोधित संख्या प्रदर्शित की जानी चाहिए:
13. अब वर्तमान पृष्ठ संख्या को टिंट करते हैं, अन्यथा यह असुविधाजनक है ...
14. तालिका में 2 और कॉलम जोड़ते हैं: संपादित करें और हटाएं। प्रत्येक पंक्ति के लिए, आइकॉन जोड़ते हैं जो प्रत्येक प्रविष्टि को संपादित करने और हटाने के लिए जिम्मेदार होंगे। आप या तो उन चित्रों का उपयोग कर सकते हैं जो में हैं <project_dir>/src/main/webapp/img/, या अपने स्वयं के उपयोग करें।
15. एक ऐसा फंक्शन लिखिए जो अकाउंट डिलीट करने के लिए जिम्मेदार होगा। ऐसा करने के लिए, URL पर सर्वर को DELETE अनुरोध भेजें "/rest/players/{id}"। कार्ट इमेज पर क्लिक करते समय, इस फ़ंक्शन को कॉल करें। कॉल के बाद - वर्तमान पृष्ठ पर खातों की सूची को अपडेट करना न भूलें।
• आईडी = 23 के साथ खाता हटाने से पहले
• आईडी = 23 के साथ खाता हटाने के बाद । ध्यान दें, टोकरी को छोड़कर कोई भी बटन नहीं दबाया गया।
16. अब एक फ़ंक्शन लिखें जो किसी खाते को संपादित करने के लिए ज़िम्मेदार हो। जब आप उस पर क्लिक करते हैं, तो "डिलीट" बटन को छिपा दें, और "एडिट" बटन की तस्वीर को "सेव" में बदल दें।
17. आइए अब खाते के संपादन के लिए कार्यात्मकता जोड़ते हैं। "संपादित करें" बटन पर क्लिक करके, चित्र बदलने के अलावा, आपको फ़ील्ड को संपादन योग्य बनाने की आवश्यकता है:
• नाम
• शीर्षक
• जाति
• पेशा
• प्रतिबंधित

कृपया ध्यान दें कि संपादन फ़ील्ड में मान वही होना चाहिए जो खाते में है।

18. अब हम “सहेजें” बटन पर क्लिक करके परिवर्तन भेजेंगे। ऐसा करने के लिए, आपको URL पर एक POST अनुरोध भेजना होगा “/rest/players/{id}”और अनुरोध निकाय के रूप में सभी पाँच फ़ील्ड के मान पास करने होंगे, जिसे JSON के रूप में बदला जा सकता है। JSON.stringify ({...}); परिवर्तन के बाद, वर्तमान पृष्ठ पर डेटा को पुनः लोड करना न भूलें।
19. इसलिए, "सी" (क्रिएट) को छोड़कर, इस समय सब कुछ सीआरयूडी से किया जाना चाहिए। पेजिंग बटन के बाद, एक क्षैतिज रेखा और टेक्स्ट जोड़ें जो बताता है कि आप यहां एक नया खाता बना सकते हैं। इसके अलावा, खाता मापदंडों के लिए टेक्स्ट और इनपुट फ़ील्ड के ब्लॉक जोड़ें:
• नाम - पाठ, 1 से 12 वर्णों तक।
• शीर्षक - टेक्स्ट, 1 से 30 वर्णों तक।
• रेस - ड्रॉप-डाउन सूची, मान्य मानों के लिए एपीआई देखें।
• पेशा - ड्रॉप-डाउन सूची, मान्य मानों के लिए API देखें।
• स्तर 0 से 100 तक की संख्या है।
• जन्मदिन - तारीख (<इनपुट प्रकार = "तारीख" ...)
• प्रतिबंधित एक बूलियन मान है।
20. अब एक बटन जोड़ें, जिस पर क्लिक करने पर सभी दर्ज किए गए डेटा सर्वर पर भेजे जाएंगे। URL के लिए POST अनुरोध का उपयोग करें /rest/players। सर्वर प्रतिक्रिया के बाद, डेटा प्रविष्टि फ़ील्ड साफ़ करना न भूलें और वर्तमान पृष्ठ पर खातों की सूची का पुनः अनुरोध करें।
21. अब आप शैलियों के माध्यम से "सौंदर्य" जोड़ सकते हैं - यहां सब कुछ आपके ऊपर है। मुझे यह इस तरह मिला:

उपयोगी: सर्वर एपीआई:

खिलाड़ियों की सूची प्राप्त करें

Code: 200 OK
Code: 200 OK
Content: [
 {
  “id”:[Long],
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean],
  “level”:[Integer]
 },
 …
]

public enum Race {
    HUMAN,
    DWARF,
    ELF,
    GIANT,
    ORC,
    TROLL,
    HOBBIT
}

public enum Profession {
    WARRIOR,
    ROGUE,
    SORCERER,
    CLERIC,
    PALADIN,
    NAZGUL,
    WARLOCK,
    DRUID
}

{
  “name”:[String],       --optional
  “title”:[String],     --optional
  “race”:[Race], --optional
  “profession”:[Profession], --optional
  “banned”:[Boolean]    --optional
}

Code: 200 OK
Content: {
  “id”:[Long],
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean],
  “level”:[Integer]
 }

{
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean], --optional, default=false
  “level”:[Integer]
}

Code: 200 OK
Content: {
  “id”:[Long],
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean],
  “level”:[Integer]
 },

परियोजना विश्लेषण । पूरा होने के बाद देखें!