தொடர்புடைய திட்டம்: முன்பக்கம்

பணி: HTML, CSS, JS, jQuery ஐப் பயன்படுத்தி CRUD பின்தளத்திற்கான UI ஐ உருவாக்க வேண்டும். ஆன்லைன் கேம் கணக்குகளை நிர்வகிப்பதற்கான நிர்வாக குழுவை உருவாக்குவோம்.

1. களஞ்சியத்திலிருந்து போர்க்: https://github.com/CodeGymCC/project-frontend.git
2. திட்டத்தின் உங்கள் பதிப்பை உங்கள் கணினியில் பதிவிறக்கவும்.
3. உங்களுக்காக டாம்கேட்டைப் பதிவிறக்கவும்: https://tomcat.apache.org/download-90.cgi .முக்கியமான: Tomcat க்கு பதிப்பு 9 தேவை , 10 அல்ல.
4. ஐடியா மூலம் பயன்பாட்டு துவக்கத்தை உள்ளமைக்கவும்: Alt + Shift + F9 -> உள்ளமைவுகளைத் திருத்து... -> Alt + செருகு -> tom (தேடல் பட்டியில்) -> உள்ளூர்.
• CONFIGUREஅதன் பிறகு, டாம்கேட்டுடனான காப்பகம் எங்கு பதிவிறக்கம் செய்யப்பட்டு திறக்கப்பட்டது என்பதைக் கிளிக் செய்து குறிப்பிட வேண்டும் .
• தாவலில் Deployment: Alt + insert -> Artifact... -> rpg: war exploded -> OK.
• புலத்தில் 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 கோரிக்கையை அனுப்பும் செயல்பாட்டைச் சேர்க்கவும். URL: "/rest/players/count".
• 3-4 எண் மதிப்புகளுக்கான கீழ்தோன்றும் பட்டியலைச் சேர்க்கவும், ஒரே நேரத்தில் எத்தனை கணக்குகளைக் காட்ட வேண்டும். எண்கள் 3 முதல் 20 வரை இருக்க வேண்டும்.
• கணக்குகளின் பட்டியலைக் காண்பிக்கும் முறையில் (ப. 9), ஒரு பக்கத்திற்குக் கொடுக்கப்பட்ட கணக்குகளின் எண்ணிக்கைக்குத் தேவையான பக்கங்களின் எண்ணிக்கையைக் கணக்கிடுவோம், இதன் மூலம் நீங்கள் எல்லா கணக்குகளையும் பார்க்கலாம்.
12. கணக்குகளின் பட்டியலைக் காண்பிக்கும் செயல்பாட்டில், காட்டப்படும் பக்கத்தின் எண்ணிக்கைக்கு பொறுப்பான அளவுருவைச் சேர்க்கவும். வினவல் அளவுருக்களாக "pageNumber" மற்றும் "pageSize" ஐ கடந்து செல்லும் வகையில் URL ஐ சரிசெய்யவும் . இப்போது, ​​கீழ்தோன்றும் பட்டியலில் ஒரு பக்கத்திற்கு எண்ணை மாற்றும்போது, ​​கோரப்பட்ட கணக்குகளின் எண்ணிக்கை காட்டப்பட வேண்டும்:
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. எனவே, "C" (உருவாக்கு) தவிர, எல்லாவற்றையும் CRUD இலிருந்து செய்ய வேண்டும். பேஜிங் பொத்தான்களுக்குப் பிறகு, நீங்கள் ஒரு புதிய கணக்கை இங்கே உருவாக்கலாம் என்று ஒரு கிடைமட்ட கோடு மற்றும் உரையைச் சேர்க்கவும். கூடுதலாக, கணக்கு அளவுருக்களுக்கான உரை மற்றும் உள்ளீட்டு புலங்களின் தொகுதிகளைச் சேர்க்கவும்:
• பெயர் - உரை, 1 முதல் 12 எழுத்துகள் வரை.
• தலைப்பு - உரை, 1 முதல் 30 எழுத்துகள் வரை.
• இனம் - கீழ்தோன்றும் பட்டியல், சரியான மதிப்புகளுக்கு API ஐப் பார்க்கவும்.
• தொழில் - கீழ்தோன்றும் பட்டியல், சரியான மதிப்புகளுக்கு API ஐப் பார்க்கவும்.
• நிலை என்பது 0 முதல் 100 வரையிலான எண்.
• பிறந்த நாள் - தேதி (<input type="date" ...).
• தடை செய்யப்பட்ட ஒரு பூலியன் மதிப்பு.
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]
 },

திட்ட பகுப்பாய்வு . முடிந்த பிறகு பார்க்கவும்!