JavaRush/Курсы/Модуль 5. Spring/Проект по теме: Spring (1)

Проект по теме: Spring (1)

Открыта

Тема: CRUD на Spring MVC

Нужно сделать список задач (todo-list) с возможностью просматривать список задач, добавлять новые задачи, редактировать и удалять существующие задачи.

Желательно, не использовать Spring Boot, а самому разобраться как все сконфигурировать.

Что нужно сделать:

  1. Развернуть sql скрипт
  2. CREATE DATABASE  IF NOT EXISTS `todo` /*!40100 DEFAULT CHARACTER SET utf8mb4 */;
    USE `todo`;
    DROP TABLE IF EXISTS `task`;
    /*!40101 SET @saved_cs_client     = @@character_set_client */;
    /*!40101 SET character_set_client = utf8 */;
    CREATE TABLE `task` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `description` varchar(100) NOT NULL,
      `status` int(11) NOT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=16 DEFAULT CHARSET=utf8mb4;
    /*!40101 SET character_set_client = @saved_cs_client */;
    
    LOCK TABLES `task` WRITE;
    /*!40000 ALTER TABLE `task` DISABLE KEYS */;
    INSERT  IGNORE INTO `task` VALUES (1,'aaa',1),(2,'bbb',2),(3,'ccc',0),(4,'ddd',1),(5,'eee',2),(6,'fff',0),(7,'ggg',1),(8,'hhh',2),(9,'jjj',0),(10,'kkk',1),(11,'lll',2),(12,'mmm',0),(13,'nnn',1),(14,'ooo',2),(15,'ppp',0);
    /*!40000 ALTER TABLE `task` ENABLE KEYS */;
    UNLOCK TABLES;
  3. Создать новый Maven проект.
  4. Добавить зависимости, которые нужны для работы с MySQL, Hibernate, Spring, Spring MVC, Thymeleaf.
  5. Добавить в проект ентити слой (пакет domain). Добавить класс Task – он будет отвечать за задачу в списке дел. Необходимые поля: description – описание задачи, status – статус выполнения задачи. В качестве статуса используй энам:
  6. public enum Status {
        IN_PROGRESS,
        DONE,
        PAUSED
    }
  7. Добавь пакет config. В нем размести необходимые классы настройки Spring MVC приложения, работы с БД (через Hibernate) и все прочие настройки.
  8. Добавь dao слой, в котором должен быть класс TaskDAO, который будет отвечать за работу с БД. Методы, которые должны быть – CRUD и поддержка пейджинга.
  9. Добавь сервисный слой, в котором размести логику по созданию и редактированию задач.
  10. Теперь слой контроллера: в нем должны быть методы:
    • получить список задач (с учетом пейджинга)
    • добавить новую задачу
    • отредактировать существующую задачу
    • далить задачу

    Какими должны быть методы и их маппинги продумай сам.

  11. Последний шаг – шаблон (html или js файл). Опционально, можно вынести стили и скрипты в разные файлы по типам. Как обычно, для бекэнд разработчика важен функционал, а не внешний вид, поэтому каким будет визуал приложенния – на твое усмотрение. У меня вышло так:

Опциональное задание:

Упаковать наше приложение в docker контейнер, добавить docker-compose файл, в котором настроить работу связки приложение-БД в docker-контейнерах.


Выполнение проекта:

Комментарии (18)
  • популярные
  • новые
  • старые
Для того, чтобы оставить комментарий Вы должны авторизоваться
СтудентJava
Уровень 109
30 апреля 2025, 19:32
У меня получилось так! Открыл видео. Автора слышно плохо, зато как клацает по клавиатуре слышно так что уши заболели. Смотреть и делать как на видео не стал. На просторах интернета и так полно примеров как делать TodoList которая по качеству картинки и подаче информации в разы лучше.
30 апреля 2025, 22:31
Морда классная, где фронт создавал?
СтудентJava
Уровень 109
10 июня 2025, 19:14
ИИ сгенерировал 🙂
I'm Siberian Trust me, i'm an engineer Expert
25 апреля 2025, 10:57
Для тех кому лень искать скрип: https://code.jquery.com/jquery-3.7.1.min.js
Павло Лєбєдєв
Уровень 106
7 сентября 2024, 18:16
Дошел до третьего видео (10 минута) - возникла ошибка при запуске. Погуглил - оказалось, глюк в версии докера 4.27.1, при апдейте до более новой версии такой ошибки нет.
Павло Лєбєдєв
Уровень 106
3 сентября 2024, 23:49
Интересное объяснение, как в тимлифе с enum-ом работать https://ru.stackoverflow.com/questions/1512302/Обработка-значения-enummselect-в-форме-на-java Классно - не надо хардкодить статус, что-то добавили-удалили в енаме - изменения на вьюшке видны :)
Павло Лєбєдєв
Уровень 106
3 сентября 2024, 21:58
Автор молодец, быстро проект делает. Только опечален, что во втором видео на 14:50: "Добавлю скрипт jquery.js" - но вам его не дам и полностью не покажу. А без него - кнопки не работают. Предлагаю на странице дать ссылку для скачивания хотя бы скриптов, раз с помощью них делается. Но зачем нам скрипты? Можно ж тимлифом все сделать. Так вот, опишу-ка, что сделал, чтобы работала кнопка (и функция) Delete. Инфа взята из курса "[Udemy, Наиль Алишев] Полный курс. Boot, Hibernate, Security, REST (2022)" , раздел "2. Spring MVC", лекция "10. CRUD приложение. PATCH, DELETE запросы" В файл WebAppInitializer.java надо добавить: @Override public void onStartup(ServletContext aServletContext) throws ServletException { super.onStartup(aServletContext); registerHiddenFieldFilter(aServletContext); } private void registerHiddenFieldFilter(ServletContext aContext) { aContext.addFilter("hiddenHttpMethodFilter", new HiddenHttpMethodFilter()) .addMappingForUrlPatterns(null, true, "/*"); } В tasks.html заменить <button th:id="'delete_' + ${task.id}" th:onclick="'delete_task(' + ${task.id} + ')'">Delete</button> на <form th:method="DELETE" th:action="@{/{id}(id=${task.id})}"> <input type="submit" value="Delete"/> </form> И работает! Идет запрос в контроллер на @DeleteMapping("/{id}") public String delete Ура! Когда переделаю Edit - постараюсь написать.
Павло Лєбєдєв
Уровень 106
2 сентября 2024, 23:03
Во втором видео на 14:50 интересный подход: "Добавлю скрипт jquery.js" - но вам его не дам и полностью не покажу. А без него - кнопки не работают. Кто-то поделится файлом? Зачем через скрипты это делается - тот же Трегулов в своем курсе по спрингу даже без тимлифа реализует функционал редактирования и удаления без скриптов, только средствами джавы и html
Дмитрий
Уровень 109
Expert
3 сентября 2024, 07:18
Вбей в гугл jquery.js. дальше разберешься
Павло Лєбєдєв
Уровень 106
4 сентября 2024, 15:05
Вбивал, не помогает. Как понял, в этом файле конкретный для этого случая код на jquery, а сам код до конца не показали. Но ничего - сделал функционал без скриптов
Alexander Feoktistov
Уровень 106
Expert
20 октября 2024, 07:54
Можно подключить jQuery не через локальный файл, а через CDN:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
И всё должно заработать)
Светлана
Уровень 106
Expert
22 октября 2024, 21:12
или создать файл jquery.js и скопировать в интернете его содержимое: https://jquery.com/download/
Павло Лєбєдєв
Уровень 106
2 сентября 2024, 09:19
По первому видео на 1:05:50 - не мапится html-ный файл. Как указать папку webapp - https://ru.stackoverflow.com/questions/681306/Как-добавить-webapp-директорию-в-уже-существующее-приложение-maven-intellij-ide По первому видео - был удивлен, что DTO на Task назвали TaskInfo, а не TaskDTO
Нурлы
Уровень 111
Expert
31 января 2024, 07:30
Если более подробно то не надо менять в базе типа поля status на tinyint можно просто добавить аннотацию @Column(name = "status", columnDefinition = "int") чтобы hibarnate кастил к типу int значение EnumType.ORDINAL к int и сохранял в БД
Олег
Уровень 111
Expert
12 января 2024, 22:06
С полем Status проблему решил с подсказкой, поменяв в базе данных её определение через tinyint, а Entiity поле аннотировал @Column(name = "status", columnDefinition = "tinyint") @Enumerated(EnumType.ORDINAL)
Надежда
Уровень 104
Expert
7 декабря 2023, 12:58
Во второй части разбора функцию getDropdownStatusHtml надо изменить, чтобы for атрибут указывал на id элемента <select>, а не на его name. Вот исправленный код: function getDropdownStatusHtml(task_id) { let status_id = "select_status_" + task_id; return "<label for='" + status_id + "'></label>" + "<select id=" + status_id + " name='status'>" + "<option value='IN_PROGRESS'>IN_PROGRESS</option>" + "<option value='DONE'>DONE</option>" + "<option value='PAUSED'>PAUSED</option>" + "</select>"; }
Павло Лєбєдєв
Уровень 106
2 сентября 2024, 23:22
А что будет, если Status изменят - введут новые поля или удалят существующие? А тут захардкожено