Свързан проект: интерфейс

Задача: Трябва да направите потребителски интерфейс за CRUD бекенд, като използвате HTML, CSS, JS, jQuery. Ще направим админ панел за управление на акаунти за онлайн игри.

1. Форк от хранorщето: https://github.com/CodeGymCC/project-frontend.git
2. Изтеглете вашата version на проекта на вашия компютър.
3. Изтеглете Tomcat за себе си: https://tomcat.apache.org/download-90.cgi .важно: Tomcat се нуждае от version 9 , а не от 10.
4. Конфигурирайте стартирането на приложение чрез Idea: Alt + Shift + F9 -> Редактиране на конфигурации… -> Alt + вмъкване -> tom (в лентата за търсене) -> Local.
• След това трябва да щракнете CONFIGUREи да посочите къде е изтеглен и разопакован архивът с Tomcat.
• В раздела Deployment: Alt + вмъкване -> Артефакт… -> rpg:war exploded -> OK.
• В полето Application context: оставете само / (наклонена черта).
• Натиснете APPLY.
• Затворете прозореца с настройки.
5. Стартирайте приложението. За да направите това: Alt + Shift + F9 -> (име на конфигурацията, нарекох го „Приложение“) -> Изпълнение.
6. След внедряване на приложението ще се отвори нов раздел в браузъра, избран по време на конфигурацията. Страхотно, сървърът е конфигуриран, тогава трябва да работите с два file:
• <project_dir>/src/main/webapp/html/my.html- ще има маркиране и скриптове.
• <project_dir>/src/main/webapp/css/my.css– тук ще има стилове. Всичко за стиловете зависи от вас, няма изисквания за тях.
7. В маркирането ( my.html ) добавете table (не забравяйте да й дадете id), в която да посочите имената на колоните:
• #
• Име
• Заглавие
• състезание
• професия
• Ниво
• рожден ден
• Забранен
8. Добавете таг за двойка <script>- тук ще пишем функции.
9. Първата функция трябва да изпрати GET заявка към URL "/rest/players"- вземете списъка. Резултатът трябва да се добави към tableта от параграф 7 (тук е полезен идентификаторът на tableта). Ако сте направor всичко правилно, след рестартиране на сървъра на вашата page ще се покаже table с 4 реда. В първия ред - имената на колоните, в останалите - данните, дошли от сървъра.
10. Сега е желателно да добавите граници на клетки към tableта, в противен случай информацията обикновено е нечетлива.
11. Сега да преминем към страниране. За целта са ви необходими:
• Под tableта добавете секция, например, <div>в която ще има бутони за страниране.
• Добавете функция, която ще изпрати GET заявка до сървъра, която връща общия брой акаунти на сървъра. URL: "/rest/players/count".
• Добавете падащ списък за 3-4 числови стойности, колко акаунта да се показват наведнъж. Числата трябва да са между 3 и 20 включително.
• В метода за показване на списъка с акаунти (стр. 9) ще добавим изчисляването на броя страници, които са необходими за даден брой акаунти на page, така че да можете да видите всички акаунти.
12. Във функцията за показване на списъка с акаунти добавете параметър, който ще отговаря за номера на pageта, която ще се показва. Коригирайте URL address, така че да предава „pageNumber“ и „pageSize“ като параметри на заявката . Сега, когато променяте броя на page в падащия списък, трябва да се покаже заявеният брой акаунти:
13. Сега нека оцветим номера на текущата page, в противен случай е неудобно ...
14. Нека добавим още 2 колони към tableта: Редактиране и Изтриване. За всеки ред нека добавим икони, които ще отговарят за редактирането и изтриването на всеки запис. Можете да използвате or снимките, които са в <project_dir>/src/main/webapp/img/, or да използвате ваши собствени.
15. Напишете функция, която ще отговаря за изтриването на акаунт. За да направите това, изпратете заявка за ИЗТРИВАНЕ до сървъра на URL address "/rest/players/{id}". Когато щракнете върху изображението на количката, извикайте тази функция. След обаждането - не забравяйте да актуализирате списъка с акаунти на текущата page.
• Преди да изтриете акаунт с id=23
• След изтриване на акаунт с id=23 . Обърнете внимание, не са натиснати бутони, освен кошницата.
16. Сега напишете функция, която отговаря за редактирането на акаунт. Когато щракнете върху него, нека скрием бутона „Изтриване“ и сменим изображението на бутона „Редактиране“ на „Запазване“.
17. Сега нека добавим функционалност за редактиране на акаунт. Като щракнете върху бутона „Редактиране“, освен да промените картината, трябва да направите полетата редактируеми:
• Име
• Заглавие
• състезание
• професия
• Забранен

Моля, имайте предвид, че стойността в полетата за редактиране трябва да бъде тази, която е в акаунта.

18. Сега ще изпратим промените, като щракнете върху бутона „Запазване“. За да направите това, трябва да изпратите POST заявка до URL address “/rest/players/{id}”и да предадете стойностите на всичките пет полета като тяло на заявката, което може да бъде променено под формата на JSON. Използвайте JSON.stringify({...}); След промяната не забравяйте да презаредите данните на текущата page.
19. Така че всичко трябва да се направи от CRUD в момента, с изключение на „C“ (Създаване). След бутоните за пейджинг добавете хоризонтална линия и текст, че можете да създадете нов акаунт тук. Освен това добавете блокове от текст и полета за въвеждане на параметри на акаунта:
• Име - текст, от 1 до 12 знака.
• Заглавие - текст, от 1 до 30 знака.
• Състезание - падащ списък, вижте API за валидни стойности.
• Професия - падащ списък, вижте API за валидни стойности.
• Нивото е число от 0 до 100.
• Рожден ден - дата (<input type="date" ...).
• Banned е булева стойност.
20. Сега добавете бутон, при натискане на който всички въведени данни ще бъдат изпратени на сървъра. Използвайте POST заявка към URL address /rest/players. След отговора на сървъра не забравяйте да изчистите полетата за въвеждане на данни и да поискате повторно списъка с акаунти на текущата page.
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]
 },

Анализ на проекта . Гледайте след завършване!