Чтобы создать приложение в экспрессе с интерфейсом React и подключиться к базе данных, следуйте моей предыдущей статье. Создав скелет, вы можете играть с ним.
Примечание. Я написал эту статью для того, чтобы вы поняли, как взаимодействуют интерфейс и сервер. Чтобы избежать SQL-инъекций и других уязвимостей, вам необходимо реализовать проверку на стороне сервера и на стороне сервера.
Я собираюсь создать аутентификацию пользователя для моего личного проекта донора крови. У меня есть пользовательский модуль, который нужно разработать, и этот модуль определенно нуждается в операции CRUD для управления пользователями.
Вот моя регистрационная форма. Для демонстрации я собираюсь сохранять, извлекать, редактировать и удалять только поля электронной почты и имени пользователя.
- Создание записи (C)
Вот и все. Вы готовы зарегистрировать своих пользователей. Вы можете добавить сколько угодно полей.
2. Просмотр данных (R)
Ваше извлечение (R) в CRUD будет извлекать данные из базы данных. Я собираюсь создать административную панель, из которой вы сможете просматривать, редактировать и удалять данные пользователя из серверной части.
Изначально мой код реакции для просмотра данных был бы таким:
Теперь, когда я создал и перечислил записи, я собираюсь работать над функциями редактирования и удаления.
Я использовал react-modal для просмотра конкретного пользователя в модуле редактирования данных.
3. Редактирование записи (U)
Редактировать будет так же просто, как и ваше создание, за исключением того факта, что всякий раз, когда мы редактируем данные, мы будем редактировать их по уникальному идентификатору.
Вы можете повторно использовать тот же компонент реакции, который мы написали для регистрации, чтобы редактировать сохраненные данные пользователя. Вам просто нужно добавить состояние для сохранения уникального поля.
В моем случае, поскольку я делаю это из панели администратора, я управляю функцией редактирования в модуле администратора, который я создал для вывода списка пользователей.
В приведенном выше коде для редактирования используются следующие функции:
a. handleEdit (): захватывает отредактированные данные и отправляет их в серверную часть.
b. logChange (): Когда значения (имя и адрес электронной почты) изменяются, мы устанавливаем его в состояние, такое же, как и при создании.
4. Удаление данных (D)
Удалить совсем не составит труда. Удаляем запись из базы данных по какому-то уникальному ID.
Чтобы моя функция удаления работала в React, я использую тот же компонент пользователей / администратора и делаю следующее:
A. Добавление события onClick для удаления кнопки действия
Б. Добавление следующего кода для работы моего удаления.
Мы сделали все, чтобы CRUD работал в react + express. Мы можем просто запустить наш сервер, перейти на http: // localhost: 3000 и увидеть все операции CRUD, происходящие в экспресс-режиме через response.
Весь этот код находится в репозитории uthiram у меня на гитхабе. :) Удачного кодирования. 👍
P.S. Для базы данных mysql запустите на сервере mysql следующее.
CREATE TABLE members ( id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY, name VARCHAR(30) NOT NULL, bloodGroup VARCHAR(30) NOT NULL, email VARCHAR(50), phone_number VARCHAR(50) )
