Проект по теме: фронтенд

Проект опциональный и делать его не обязательно.

Задание: Нужно сделать UI для CRUD бэкенда, используя HTML, CSS, JS, jQuery. Делать будем админ-панель для управления аккаунтами онлайн-игры.

1. Сделать fork из репозитория: https://github.com/vasylmalik/project-front.git
2. Скачать свою версию проекта к себе на компьютер.
3. Скачать себе Tomcat: https://tomcat.apache.org/download-90.cgi. Важно: Tomcat нужен именно версии 9, а не 10.
4. Настроить запуск приложения через Идею: Alt + Shift + F9 -> Edit Configurations… -> Alt + insert -> tom (в строку поиска) -> Local.
• После этого нужно нажать CONFIGURE и указать, куда скачан и распакован архив с Tomcat.
• Во вкладке Deployment: Alt + insert -> Artifact… -> rpg:war exploded -> OK.
• В поле Application context: оставить только / (слеш).
• Нажать APPLY.
• Закрыть окно настройки.
5. Запустить приложение. Для этого: Alt + Shift + F9 -> (имя конфигурации, я назвал 'App" у себя) -> Run.
6. После деплоя приложения откроется новая вкладка в выбранном при конфигурации браузере. Отлично, сервер настроен, дальше нужно работать с двумя файлами:
• <project_dir>/src/main/webapp/html/my.html – здесь будет разметка и скрипты.
• <project_dir>/src/main/webapp/css/my.css – здесь будет стили. Все что касается стилей – на твое усмотрение, никаких требований к ним нет.
7. В разметку (my.html) добавить таблицу (не забудь ей указать id), в которой указать названия колонок:
• #
• Name
• Title
• Race
• Profession
• Level
• Birthday
• Banned
8. Добавить парный тег <script> – здесь будем писать функции.
9. Первая функция должна отправлять GET запрос на URL "/rest/players" – получить список. Результат нужно добавить к таблице из п.7 (вот и пригодился id таблицы). Если все сделал правильно – после перезапуска сервера у тебя на странице будет отображаться таблица на 4 строки. В первой строке – имена колонок, в остальных – данные, которые пришли с сервера.
10. Теперь, желательно, добавить таблице границы ячеек, а то информация вообще нечитаемая.
11. Теперь займемся пейджингом. Для этого нужно:
• Под таблицей добавить секцию, например, <div>, в которой будут кнопки пейджинга.
• Добавить функцию, которая отправит GET запрос на сервер, который возвращает общее количество аккаунтов на сервере. URL: "/rest/players/count".
• Добавить выпадающий список на 3-4 числовых значения, сколько показывать аккаунтов за раз. Числа должны быть в диапазоне от 3 до 20 включительно.
• В методе отображения списка аккаунтов (п.9) добавим расчет количества страниц, которые нужны при заданном количестве аккаунтов на страницу, чтоб можно было просмотреть все аккаунты.
12. В функцию показа списка аккаунтов добавь параметр, который будет отвечать за номер страницы, которую показывать. Откорректируй URL, чтоб он параметрами запроса передавал "pageNumber" и "pageSize". Теперь при смене количества на страницу в выпадающем списке, должно показываться запрошенное количество аккаунтов:
13. Теперь давай подкрасим номер текущей страницы, а то неудобно…
14. Добавим в таблицу еще 2 колонки: Edit и Delete. Для каждой строки давай добавим иконки, которые будут отвечать за редактирование и удаление каждой записи. Можешь использовать либо картинки, которые есть в <project_dir>/src/main/webapp/img/, либо используй свои.
15. Напиши функцию, которая будет отвечать за удаление аккаунта. Для этого нужно отправлять DELETE запрос на сервер на URL "/rest/players/{id}". При клике на картинку корзины – вызывай эту функцию. После вызова – не забудь обновлять список аккаунтов на текущей странице.
• До удаления аккаунта с id=23
• После удаления аккаунта с id=23. Обрати внимание, никаких кнопок, кроме корзины, не нажималось.
16. Теперь напиши функцию, которая отвечает за редактирование аккаунта. При клике на нее давай скроем кнопку “Delete”, а картинку кнопки “Edit” поменяем на “Save”.
17. Теперь добавим функционал для редактирования аккаунта. По клику на кнопку “Edit”, кроме смены картинки, нужно делать поля редактируемыми:
• Name
• Title
• Race
• Profession
• Banned

Обрати внимание, что значение в полях для редактирования должны быть те, что есть в аккаунте.

18. Теперь сделаем отправку изменений по клику на кнопку “Save”. Для этого нужно отправить POST запрос на URL “/rest/players/{id}” и в качестве тела запроса передать значения всех пяти полей, которые можно изменять в виде JSON. Используй JSON.stringify({…}); После изменения, не забудь перезагрузить данные на текущей странице.
19. Итак, из CRUD на данный момент должно быть сделано все, кроме “C” (Create). После кнопок пейджинга, добавь горизонтальную линию и текст о том, что здесь можно создать новый аккаунт. Кроме этого, добавь блоки текста и поля для ввода для параметров аккаунта:
• Name – текст, от 1 до 12 символов.
• Title – текст, от 1 до 30 символов.
• Race – выпадающий список, допустимые значения смотри в API.
• Profession – выпадающий список, допустимые значения смотри в API.
• Level – число от 0 до 100.
• Birthday – дата (<input type="date" …).
• Banned – булевое значение.
20. Теперь добавь кнопку, по клику на которую все введенные данные будут отправляться на сервер. Используй POST запрос на URL /rest/players. После ответа сервера, не забудь очистить поля для ввода данных и перезапросить список аккаунтов на текущей странице.
21. Теперь можно добавить "красоты" через стили – здесь все на твое усмотрение. У меня вышло так:

Полезное: API сервера:

Get players list

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

Разбор проекта. Смотреть после выполнения!