Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

Реляционные базы данных, такие как MySQL, традиционно были предпочтительным выбором базы данных. Тем не менее, базы данных NoSQL, такие как MongoDB, стали более популярными из-за их гибкой структуры для хранения данных и их способности быстро хранить и извлекать данные.

Эти базы данных предлагают альтернативный язык запросов, который можно легко интегрировать с современными веб-приложениями и мобильными приложениями. Читайте дальше, чтобы узнать, как хранить данные React в базе данных MongoDB.

Что такое база данных NoSQL?

NoSQL расшифровывается как Not only SQL, нереляционная база данных. Этот тип базы данных не опирается на традиционную модель реляционной базы данных. Он не имеет определенной структуры столбцов и строк и может хранить данные в различных форматах, что делает его более гибким и масштабируемым.

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

instagram viewer

Настройка базы данных MongoDB

MongoDB — самая популярная база данных NoSQL. Это база данных с открытым исходным кодом, которая хранит данные в JSON-подобных документах (таблицах) внутри коллекций (баз данных).

Вот как выглядит простая структура документа MongoDB:

{
 Имя: 'Эндрю',
 Роль: «Бэкенд-разработчик»
}

Для начала нужно сначала настроить базу данных MongoDB. Закончив настройку MongoDB, откройте приложение MongoDB Compass. Затем нажмите кнопку Новое соединение кнопку, чтобы создать соединение с сервером MongoDB, работающим локально.

Если у вас нет доступа к инструменту MongoDB Compass с графическим интерфейсом, вы можете использовать Инструмент оболочки MongoDB для создания базы данных и коллекции.

Укажите URI подключения и имя подключения, затем нажмите Сохранить и подключиться.

Наконец, нажмите кнопку «Создать базу данных», введите имя базы данных и укажите имя коллекции для демонстрационной коллекции.

Создайте React-клиент

Вы можете найти код этого приложения в его Репозиторий GitHub.

Чтобы быстро загрузить приложение React, создайте папку проекта на локальном компьютере, перейдите в этот каталог и запустите эти команды терминала, чтобы создать и запустить сервер разработки:

npx создать-реагировать-приложение мое-приложение
cd мое приложение
запуск нпм

Затем установите Axios. Этот пакет позволит вам отправлять HTTP-запросы на ваш внутренний сервер Express.js для хранения данных в вашей базе данных MongoDB.

npm установить аксиомы

Создайте демонстрационную форму для сбора пользовательских данных

Открой источник/App.js файл, удалите шаблонный код React и замените его следующим:

Импортировать'./Приложение.css';
Импортировать Реагировать, {useState} от«реагировать»;
Импортировать Аксиос отаксиос;
функцияПриложение() {
константа [имя, setName] = useState("")
константа [роль, setRole] = useState("")


константа обработатьОтправить = (е) => {
 e.preventDefault();


 Аксиос.пост(' http://localhost: 4000/вставка', {
 полное имя: имя,
 CompanyRole: роль
 })
 }


возвращаться (


"Приложение">
"Заголовок приложения"> 
"logIn-форма">


Имя</p>


 имя_класса = "Имя"
 тип="текст"
 заполнитель ="Имя ..."
 onChange={(e) => {setName (e.target.value)}}
 />




 Роль компании</p>


 имя_класса = "Роль"
 тип="текст"
 заполнитель = "Роль..."
 onChange={(e) => {setRole (e.target.value)}}
 />








экспортпо умолчанию Приложение;

Давайте разберем это:

  • Объявите два состояния, имя и состояние роли, для хранения пользовательских данных, собранных из полей ввода с помощью хука useState.
  • по изменению Метод каждого поля ввода запускает обратный вызов, который использует методы состояния для сбора и хранения данных, которые пользователь отправляет через форму.
  • Чтобы отправить данные на внутренний сервер, функция обработчика onSubmit использует Axios.post метод для отправки данных, переданных из состояний в виде объекта, в конечную точку внутреннего API.

Чтобы стилизовать отображаемую форму, добавьте следующий код в файл App.css.

* {
набивка: 0;
допуск: 0;
размер коробки: пограничный ящик;
}
тело {
семейство шрифтов: 'Поппинс', без засечек;
фоновый цвет: #8EC1D6;
}


.logIn-форма {
допуск: 100пикс.авто;
ширина: 200пикс.;
высота: 250пикс.;
фоновый цвет: #ффф;
радиус границы: 10пикс.; 
}


.logIn-формап {
выравнивание текста: центр;
размер шрифта: 12пикс.;
вес шрифта: 600;
цвет: #B8BFC6;
набивка: 10пикс. 10пикс.;
}


.logIn-формавход {
отображать: блокировать;
ширина: 80%;
высота: 40пикс.;
допуск: 10пикс.авто;
граница: 1пикс.твердый#ccc;
радиус границы: 5пикс.;
набивка: 0 10пикс.;
размер шрифта: 16пикс.;
цвет: черный;
}
.logIn-формакнопка {
фоновый цвет: #8EC1D6;
цвет: #ффф;
курсор: указатель;
размер шрифта: 15пикс.;
радиус границы:7px;
набивка: 5пикс. 10пикс.;
граница: никто;
}

Теперь запустите сервер разработки, чтобы обновить изменения и перейти к http://localhost: 3000 в браузере для просмотра результатов.

Создайте серверную часть Express.js

Серверная часть Express действует как промежуточное ПО между вашим клиентом React и базой данных MongoDB. С сервера вы можете определить свои схемы данных и установить соединение между клиентом и базой данных.

Создайте веб-сервер Express и установите эти два пакета:

npm установить корс мангуста

Mongoose — это библиотека объектного моделирования данных (ODM) для MongoDB и Node. Он предоставляет упрощенный метод на основе схемы для моделирования данных приложения и их сохранения в базе данных MongoDB.

Пакет CORS (Cross-Origin Resource Sharing) предоставляет механизм для внутреннего сервера и внешнего клиента для связи и передачи данных через конечные точки API.

Создайте схему данных

Создайте новую папку в корневом каталоге папки проекта вашего сервера и назовите ее модели. В этой папке создайте новый файл: схема данных.js.

Схема в данном случае представляет собой логическую структуру вашей базы данных. Он определяет документы (записи) и поля (свойства), составляющие коллекции в базе данных.

Добавьте следующий код в dataSchema.js:

константа мангуст = требовать('мангуста');
константа СхемаДанных РеагированияФормы = новый мангуста. Схема({
 имя: {
 тип: Нить,
 необходимый: истинный
 },
 роль: {
 тип: Нить,
 необходимый: истинный
 }
});
константа Пользователь = мангуст.модель('Пользователь', ReactFormDataSchema);
модуль.экспорт = пользователь;

Этот код создает схему Mongoose для модели User. Эта схема определяет структуру данных для пользовательских данных, включая имя и роль пользователя. Затем схема используется для создания модели пользователя. Это позволяет модели хранить данные в коллекции MongoDB в соответствии со структурой, определенной в схеме.

Настройте экспресс-сервер

Далее откройте index.js файл в папке проекта сервера и добавьте этот код:

константа экспресс = требовать('выражать');
константа мангуст = требовать('мангуста');
константа кор = требовать(корс);
константа приложение = экспресс();
константа Пользователь= требовать('./модели/ReactDataSchema')
app.use(express.json());
app.use(cors());


мангуст.подключить('mongodb://localhost: 27017/данные реакции', { useNewUrlParser: истинный });


приложение.пост('/вставлять', асинхронный(требование, разрешение) => {
константа Имя = req.body.firstName
константа CompanyRole = req.body.companyRole


константа данные формы = новый Пользователь({
 имя: Имя,
 роль: CompanyRole
 })


пытаться {
Ждите данные формы.сохранить();
 рес.отправить("вставленные данные..")
 } ловить(ошибка) {
консоль.лог (ошибка)
 }
});


константа порт = процесс.env. ПОРТ || 4000;
app.listen (порт, () => {
консоль.бревно(`Сервер запущен на порту ${порт}`);
});

Давайте разберем это:

  • Инициализируйте Express, mongoose и CORS на сервере.
  • Пакет Mongoose устанавливает соединение с базой данных MongoDB, используя соединять метод, который принимает домен URI и объект. URI — это строка подключения, используемая для установления соединения с базой данных MongoDB. Объект определяет конфигурацию; в этом случае он содержит настройку для использования новейшей формы синтаксического анализатора URL.
  • Веб-сервер в основном отвечает на запросы, поступающие с разных маршрутов, с помощью соответствующей функции обработчика. Для этого случая у сервера есть маршрут POST, который получает данные от клиента React, сохраняет их в переменной и передает в импортированную модель данных.
  • Затем сервер использует блок try-and-catch для хранения и сохранения данных в базе данных MongoDB и регистрирует любые ошибки, если таковые имеются.

Наконец, запустите сервер разработки, чтобы обновить изменения, и перейдите в свой клиент React в своем браузере. Введите любые данные в форму и просмотрите результаты в базе данных MongoDB.

Использование стека MERN для создания приложений

Стек MERN предоставляет эффективный и мощный набор инструментов для создания приложений. Вы можете создавать полноценные реальные приложения, используя MongoDB, Express, React и Node.js,

Экосистема React также предоставляет пакеты, которые помогут вам работать с веб-формами. Одними из самых популярных являются Formik, KendoReact Form и React Hook Form.