संबंधित प्रकल्प: फ्रंटएंड

कार्य: तुम्हाला 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. Idea द्वारे ऍप्लिकेशन लॉन्च कॉन्फिगर करा: Alt + Shift + F9 -> कॉन्फिगरेशन संपादित करा… -> Alt + insert -> tom (शोध बारमध्ये) -> Local.
• त्यानंतर, आपल्याला क्लिक करणे CONFIGUREआणि टॉमकॅटसह संग्रहण कोठे डाउनलोड केले आणि अनपॅक केले ते सूचित करणे आवश्यक आहे.
• टॅबमध्ये Deployment: Alt + insert -> Artifact… -> rpg:war exploded -> OK.
• फील्डमध्ये Application context: फक्त सोडा / (फॉरवर्ड स्लॅश).
• दाबा APPLY.
• सेटिंग्ज विंडो बंद करा.
5. अनुप्रयोग लाँच करा. हे करण्यासाठी: Alt + Shift + F9 -> (कॉन्फिग नाव, मी त्याला 'App' असे नाव दिले आहे) -> चालवा.
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 विनंती पाठवेल जे सर्व्हरवरील एकूण खात्यांची संख्या परत करेल. URL: "/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}". कार्ट इमेजवर क्लिक करताना, या फंक्शनला कॉल करा. कॉल केल्यानंतर - वर्तमान पृष्ठावरील खात्यांची सूची अद्यतनित करण्यास विसरू नका.
• id=23 असलेले खाते हटवण्यापूर्वी
• id=23 सह खाते हटविल्यानंतर . लक्ष द्या, टोपलीशिवाय कोणतीही बटणे दाबली गेली नाहीत.
16. आता एक फंक्शन लिहा जे खाते संपादित करण्यासाठी जबाबदार आहे. तुम्ही त्यावर क्लिक केल्यावर, "हटवा" बटण लपवूया, आणि "संपादित करा" बटणाचे चित्र "सेव्ह" वर बदलू.
17. आता खाते संपादित करण्यासाठी कार्यक्षमता जोडूया. "संपादित करा" बटणावर क्लिक करून, चित्र बदलण्याव्यतिरिक्त, तुम्हाला फील्ड संपादन करण्यायोग्य करणे आवश्यक आहे:
• नाव
• शीर्षक
• शर्यत
• व्यवसाय
• बंदी घातली

कृपया लक्षात घ्या की संपादन फील्डमधील मूल्य ते खात्यात असले पाहिजे.

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

उपयुक्त: सर्व्हर API:

खेळाडूंची यादी मिळवा

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]
 },

प्रकल्प विश्लेषण . पूर्ण झाल्यानंतर पहा!