В этом руководстве мы создадим базовое CRUD-приложение, используя Java Spring в качестве бэкэнда, с интерфейсом React, используя хуки и функциональные компоненты. Полный код окончательного проекта доступен по адресу https://github.com/tmatthiash/CRUD_Example.
Шаг 1 — Используйте Spring initializr для настройки вашего проекта spring/java.
Перейдите на https://start.spring.io/ и создайте новый проект gradle todo со следующими зависимостями: Lombok, Spring Web, Spring Data JPA и база данных H2.
Шаг 2 — Распакуйте папку проекта из initializr, затем добавьте две папки в каталог src/main/java/com/example/todos. Создайте папки «configurations» и «item».
Шаг 3 — Создайте класс Item Entity.
Это будет модель, в которой будут храниться наши данные. Начните с создания ItemEntity.java в каталоге элементов и добавьте следующий код.
Шаг 4 — Создайте репозиторий предметов
Далее нам нужно будет создать репозиторий, который, по сути, позволит Spring взаимодействовать с нашими сохраненными ItemEntities. Поэтому создайте ItemRepository.java в каталоге элементов и добавьте следующее.
Шаг — 5 Создайте класс ответа Item
Чтобы создать конечную точку, которая возвращает все сохраненные ItemEntities, нам нужно создать класс, который будет использоваться в качестве ответа на HTTP-запрос для всех из них, создайте класс ItemResponse.java в папке элемента с этим кодом.
Шаг 6 — Создайте контроллер элементов
Создайте контроллер REST для элементов, это позволит HTTP-запросам фактически взаимодействовать с нашим сервером. Добавьте ItemController.java в каталог элементов. Сейчас у него будет только 1 конечная точка, которая извлекает все элементы и использует их для создания ответа на элемент, а затем возвращает его.
Шаг 7 — Тест, чтобы увидеть, работает ли он
Перейдите в свой терминал в каталоге проекта и запустите проект с помощью команды ./gradlew bR. После запуска проекта попробуйте получить доступ к https://localhost:8080/api/items, вы должны получить ответ объекта JSON с атрибутом items с пустым массивом в качестве значения.
Шаг 8 — Добавьте фиктивные данные
Мы собираемся добавить инициализатор, который загружает некоторые данные в наше приложение при запуске, чтобы нам было с чем работать. Создайте файл Initializer.java в каталоге src/com/example/todos со следующим кодом.
Теперь остановите приложение, если оно все еще работает, и перезапустите его с помощью ./gradlew bR. Обновите https://localhost:8080/api/items, теперь там должны быть данные.
Шаг 9 — Начните внешний интерфейс
В терминале из корневого каталога вашего проекта выполните следующую команду
npx create-react-app todo-frontend --template typescript
Это создаст каталог «todo-frontend» в вашем проекте с приложением create response. Он также использует шаблон машинописного текста. Перейдите в этот каталог и запустите «npm run start», чтобы увидеть запуск приложения.
Шаг 10 — Добавьте папки, которые нам понадобятся
В каталоге todo-frontend/src добавьте каждый из этих трех каталогов: «Клиенты», «Компоненты» и «Типы».
Шаг 11 — Создайте тип элемента
В каталоге типов мы создадим файл item.ts с этим кодом.
Шаг 12 — Добавьте HTTP-клиент
Во-первых, мы хотим установить пакет NPM «axios». Из каталога внешнего интерфейса запустите команду для этого.
npm install axios
Затем в каталог клиентов добавьте файл itemClients.ts, в нем мы будем хранить все наши http-вызовы с помощью axios. Первый, который мы добавим, попадет в созданную нами конечную точку и вернет обещание, которое разрешается как данные ответа.
Шаг 13 — Создайте компонент, который отображает данные
В каталоге компонентов создайте файл с именем ItemList.tsx. Это будет реагирующий компонент, который вызывает клиента и отображает данные. Он использует хук useEffect для получения данных о рендеринге компонента и хук useState для сохранения данных после их извлечения. Затем он использует функцию карты для отображения имени и описания каждого извлеченного элемента (в этом случае пока это будет только один). Вот как будет выглядеть компонент.
Шаг 14. Замените исходное содержимое приложения React только что созданным компонентом.
Измените app.tsx на следующий код, вы также можете удалить logo.svg.
Шаг 15 — CORS, или почему он пока не работает
Если вы попытаетесь запустить его сейчас, все будет скомпилировано и запущено, но запрос http для получения списка элементов завершится ошибкой, потому что у нас нет настройки политики совместного использования ресурсов между источниками в нашем бэкэнде, мы сделаем что сейчас. В бэкенде в папке конфигураций создайте класс ConfigureCors.java. Мы настроим наш CORS, чтобы разрешить запросы с любого URL-адреса.
Шаг 16 — Проверьте, сработало ли это
Перезапустите/убедитесь, что серверная часть работает, затем запустите интерфейс, запустив «npm run start» из каталога интерфейса. Вы должны увидеть приложение с одним элементом, который мы сделали отображаемым.
Шаг 17. Создание компонента строки элемента
Прямо сейчас мы просто отображаем имя и описание в виде текста, если мы хотим манипулировать ими, нам нужно превратить каждый элемент в компонент с элементами ввода/элементами управления. Создайте папку ItemRow в каталоге компонентов с файлами ItemRow.tsx и ItemRow.css.
Код ItemRow.tsx выглядит следующим образом. Он принимает Item в качестве реквизита и использует его для установки начальных значений для входных данных имени и описания. У него также есть кнопки «сохранить» и «удалить», которые в настоящее время ничего не делают.
Шаг 18 — Используйте компонент ItemRow в ItemList
Мы отредактируем ItemList.tsx, чтобы использовать наш новый компонент. Пока мы на этом, мы добавим пустой элемент в конец списка, который мы будем использовать для добавления новых элементов.
Шаг 19 — Добавьте немного CSS
В настоящее время он выглядит очень плохо, поэтому мы собираемся добавить немного CSS, чтобы он выглядел немного лучше. Мы не собираемся делать что-то удивительное, просто немного очистим его. Добавьте следующее в ItemRow.css и обратите внимание на импорт в строке 4 ItemRow.tsx.
Теперь он должен выглядеть немного менее плохо.
Шаг 20 — Добавьте конечную точку создания элемента к серверному контроллеру.
Добавьте следующий код в файл ItemController.java в классе ItemController. Вам также нужно будет добавить импорт для классов, которые еще не использовались в файле. Если вам нужно, посмотрите окончательную версию файла по адресу https://github.com/tmatthiash/CRUD_Example/blob/master/src/main/java/com/example/todos/item/ItemController.java.
Шаг 21 — Добавьте вызов axios для создания элемента в клиентский файл.
Обновите itemClients.ts внешнего интерфейса, добавив в него следующую функцию.
Шаг 22 — Обновите ItemList и ItemRow, чтобы они могли создать новый элемент
Измените ItemRow.tsx на следующее: обратите внимание, что кнопка сохранения теперь вызывает функцию saveItem. Он проверяет, является ли элемент новым (идентификатор будет пустой строкой), и если да, то сохраняет его. затем список обновляется. Обратите внимание, что функция обновления списка теперь передается как поддержка этого компонента из ItemList.tsx.
Это не сработает и даже не скомпилируется, пока мы не обновим ItemList, чтобы передать функцию списка обновлений в качестве реквизита. Обновите использование ItemRow с помощью такой добавленной опоры (строка 9).
Теперь вы сможете добавлять вещи в список, введя что-то в пустое поле ввода имени/описания и нажав «Сохранить».
Шаг 23 — Завершите внутренний контроллер, добавив функцию редактирования и удаления.
Очень похоже на методы get/post, которые мы добавим в ItemController.java, вам также нужно будет импортировать UUID
Шаг 24 — Добавьте в клиент вызовы axios редактирования/удаления.
Добавьте следующее в itemClients.ts
Шаг 25 — Измените ItemRow.tsx, чтобы использовать новые клиентские функции для обновления/удаления элементов.
В конце файл будет выглядеть так. Обратите внимание на изменения в saveItem и добавление функции removeItem.
Проверьте это, это должно быть сделано
Убедитесь, что вы перезапустили серверную часть после внесения последних изменений в контроллер, и попробуйте. Вы должны иметь возможность добавлять/редактировать/удалять все элементы в списке. Это все еще грубо по краям, но это должен был быть учебник по основам. Спасибо за использование моего руководства, и еще раз, весь окончательный код доступен по адресу https://github.com/tmatthiash/CRUD_Example.
