Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Релационните бази данни като MySQL традиционно са изборът на база данни. Но NoSQL базите данни като MongoDB нараснаха в популярност поради гъвкавата си структура за съхранение на данни и способността им бързо да съхраняват и извличат данни.

Тези бази данни предлагат алтернативен език за заявки, който можете безпроблемно да интегрирате с модерни уеб и мобилни приложения. Прочетете, за да научите как да съхранявате React данни в база данни MongoDB.

Какво е NoSQL база данни?

NoSQL означава Не само SQL, нерелационна база данни. Този тип база данни не разчита на традиционния модел на релационна база данни. Той няма дефинирана структура колона-ред и може да съхранява данни в различни формати, което го прави по-гъвкав и мащабируем.

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

instagram viewer

Настройте база данни MongoDB

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

Ето как изглежда проста структура на MongoDB документ:

{
 Първо име: „Андрю“,
 Роля: „Програмист на задната част“
}

За да започнете, първо трябва настройте база данни MongoDB. След като приключите с конфигурирането на MongoDB, отворете приложението MongoDB Compass. След това щракнете върху Нова връзка бутон за създаване на връзка със сървъра MongoDB, работещ локално.

Ако нямате достъп до GUI инструмента MongoDB Compass, можете да използвате MongoDB shell инструмент за създаване на база данни и колекция.

Предоставете URI на връзката и името на връзката, след което натиснете Запазване и свързване.

Накрая щракнете върху бутона Създаване на база данни, попълнете името на базата данни и дайте име на колекция за демонстрационна колекция.

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

Можете да намерите кода на това приложение в него GitHub хранилище.

За бързо стартиране на React приложение, създайте папка на проекта на вашата локална машина, променете в тази директория и изпълнете тези терминални команди, за да създадете и развъртите сървъра за разработка:

npx create-react-app моето приложение
cd моето приложение
npm стартиране

След това инсталирайте Axios. Този пакет ще ви позволи да изпращате HTTP заявки към сървъра на Backend Express.js, за да съхранявате данни във вашата база данни MongoDB.

npm инсталирайте axios

Създайте демонстрационен формуляр за събиране на потребителски данни

Отвори src/App.js файл, изтрийте шаблонния код на React и го заменете със следното:

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


конст handleSubmit = (д) => {
 e.preventDefault();


 Axios.post(' http://localhost: 4000/вмъкнете", {
 пълно име: име,
 companyRole: роля
 })
 }


връщане (


"приложение">
„Заглавка на приложението“> 
"форма за влизане">


Първо име</p>


 className = "Име"
 тип="текст"
 заместител ="Първо име ..."
 onChange={(e) => {setName (e.target.value)}}
 />




 Фирмена роля</p>


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








износпо подразбиране Приложение;

Нека да го разбием:

  • Декларирайте две състояния, име и състояние на роля, за да съхранявате потребителските данни, събрани от полетата за въвеждане, като използвате куката useState.
  • The onChange метод на всяко поле за въвеждане изпълнява обратно извикване, което използва методите на състоянието за улавяне и съхраняване на данни, които потребителят изпраща чрез формуляра.
  • За да изпрати данните към бекенд сървъра, функцията за обработка onSubmit използва Axios.post метод за подаване на данните, предадени от състоянията като обект, към крайната точка на API на бекенда.

За да стилизирате изобразения формуляр, добавете следния код към файла App.css.

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


.форма за влизане {
марж: 100pxАвтоматичен;
ширина: 200px;
височина: 250px;
Цвят на фона: #Ф ф ф;
граница-радиус: 10px; 
}


.форма за влизанестр {
подравняване на текст: център;
размер на шрифта: 12px;
тегло на шрифта: 600;
цвят: #B8BFC6;
подплата: 10px 10px;
}


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

Сега завъртете сървъра за разработка, за да актуализирате промените и отидете до него http://localhost: 3000 в браузъра си, за да видите резултатите.

Създайте Backend на Express.js

Експресният бекенд действа като междинен софтуер между вашия клиент React и базата данни MongoDB. От сървъра можете да дефинирате вашите схеми на данни и да установите връзката между клиента и базата данни.

Създайте Express уеб сървър и инсталирайте тези два пакета:

npm инсталирайте mongoose cors

Mongoose е библиотека за моделиране на обектни данни (ODM) за MongoDB и Node. Той предоставя опростен метод, базиран на схема, за моделиране на вашите данни от приложението и съхраняването им в база данни MongoDB.

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

Създайте схема на данни

Създайте нова папка в главната директория на папката на вашия сървърен проект и я наименувайте модели. В тази папка създайте нов файл: dataSchema.js.

В този случай схемата представлява логическата структура на вашата база данни. Той дефинира документите (записите) и полетата (свойствата), които съставляват колекциите в базата данни.

Добавете следния код към dataSchema.js:

конст мангуста = изискват("мангуста");
конст ReactFormDataSchema = нов мангуста. Схема ({
 име: {
 Тип: низ,
 задължително: вярно
 },
 роля: {
 Тип: низ,
 задължително: вярно
 }
});
конст Потребител = mongoose.model("Потребител", ReactFormDataSchema);
модул.exports = потребител;

Този код създава схема на Mongoose за потребителски модел. Тази схема дефинира структурата на данните за потребителските данни, включително името и ролята на потребителя. След това схемата се използва за създаване на модел за потребителя. Това позволява на модела да съхранява данни в колекция MongoDB според структурата, дефинирана в схемата.

Настройте експресния сървър

След това отворете index.js файл в папката на сървърния проект и добавете този код:

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


mongoose.connect('mongodb://localhost: 27017/reactdata', { useNewUrlParser: вярно });


app.post('/вмъкване', асинхронен(req, res) => {
конст FirstName = req.body.firstName
конст CompanyRole = req.body.companyRole


конст formData = нов потребител ({
 име: FirstName,
 роля: CompanyRole
 })


опитвам {
изчакайте formData.save();
 res.send("въведени данни..")
 } улов(грешка) {
конзола.log (грешка)
 }
});


конст порт = process.env. ПРИСТАНИЩЕ || 4000;
app.listen (порт, () => {
конзола.log(`Сървърът стартира на порт ${порт}`);
});

Нека да го разбием:

  • Инициализирайте Express, mongoose и CORS в сървъра.
  • Пакетът Mongoose установява връзка с базата данни MongoDB с помощта на свържете се метод, който приема URI домейна и обект. URI е низ за връзка, използван за установяване на връзка с базата данни MongoDB. Обектът определя конфигурация; в този случай той съдържа настройка за използване на най-новата форма на URL парсер.
  • Уеб сървърът отговаря главно на заявките, идващи от различни маршрути, с подходящата функция за обработка. В този случай сървърът има POST маршрут, който получава данни от React клиента, съхранява ги в променлива и ги предава на импортирания модел на данни.
  • След това сървърът използва блок пробване и улавяне, за да съхрани и запише данните в базата данни на MongoDB и извежда всички грешки, ако има такива.

И накрая, завъртете сървъра за разработка, за да актуализирате промените и преминете към вашия React клиент във вашия браузър. Въведете всякакви данни във формуляра и вижте резултатите в базата данни MongoDB.

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

Стекът MERN предоставя ефективен и мощен набор от инструменти за изграждане на приложения. Можете да създавате пълноценни приложения от реалния свят с помощта на MongoDB, Express, React и Node.js,

Екосистемата React също така предоставя пакети, които да ви помогнат да работите с уеб формуляри. Някои от най-популярните са Formik, KendoReact Form и React Hook Form.