Релационе базе података као што је МиСКЛ су традиционално биле избор базе података. Међутим, НоСКЛ базе података као што је МонгоДБ су постале популарне због своје флексибилне структуре за складиштење података и њихове способности да брзо складиште и преузимају податке.
Ове базе података нуде алтернативни језик упита који можете неприметно да интегришете са модерним веб и мобилним апликацијама. Читајте даље да бисте научили како да складиштите Реацт податке у МонгоДБ бази података.
Шта је НоСКЛ база података?
НоСКЛ је скраћеница од Не само СКЛ, нерелациона база података. Ова врста базе података се не ослања на традиционални модел релационе базе података. Нема дефинисану структуру колона-ред и може да складишти податке у различитим форматима, што га чини флексибилнијим и скалабилнијим.
Главна разлика између НоСКЛ и релационих база података је у томе што уместо редова и колона, НоСКЛ базе података складиште податке у документима, који имају динамичку структуру.
Подесите МонгоДБ базу података
МонгоДБ је најпопуларнија НоСКЛ база података. То је база података отвореног кода која чува податке у ЈСОН документима (табелама) унутар колекција (база података).
Ево како изгледа једноставна структура МонгоДБ документа:
{
Име: 'Андрија',
Улога: 'Бацкенд Девелопер'
}Да бисте започели, прво морате поставите МонгоДБ базу података. Када завршите са конфигурисањем МонгоДБ-а, отворите апликацију МонгоДБ Цомпасс. Затим кликните на Нова веза дугме за креирање везе са МонгоДБ сервером који ради локално.
Ако немате приступ МонгоДБ компас ГУИ алату, можете користити МонгоДБ схелл алат за креирање базе података и колекције.
Наведите УРИ везе и назив везе, а затим притисните Сачувај и повежи.
На крају, кликните на дугме Креирај базу података, попуните име базе података и наведите назив колекције за демо колекцију.
Креирајте Реацт клијента
Код ове апликације можете пронаћи у њој ГитХуб спремиште.
Да бисте брзо покренули Реацт апликацију, креирајте фасциклу пројекта на вашој локалној машини, пређите у тај директоријум и покрените ове терминалске команде да бисте креирали и покренули развојни сервер:
нпк цреате-реацт-апп ми-апп
цд моја апликација
нпм стартЗатим инсталирајте Акиос. Овај пакет ће вам омогућити да пошаљете ХТТП захтеве на ваш бацкенд Екпресс.јс сервер за складиштење података у вашој МонгоДБ бази података.
нпм инсталл акиосНаправите демо образац за прикупљање корисничких података
Отвори срц/Апп.јс датотеку, избришите шаблонски Реацт код и замените га следећим:
увоз'./Апп.цсс';
увоз Реагујте, { усеСтате } из'реаговати';
увоз Акиос из'акиос';функцијаАпликација() {
конст [наме, сетНаме] = усеСтате("")
конст [роле, сетРоле] = усеСтате("")конст хандлеСубмит = (е) => {
е.превентДефаулт();Акиос.пост(' http://localhost: 4000/инсерт', {
пуно име: име,
Улога компаније: улога
})
}повратак (
"Апликација">„Заглавље апликације“> "образац за пријаву">
извозУобичајено Апликација;
Хајде да то разложимо:
- Декларисајте два стања, име и стање улоге, за чување корисничких података прикупљених из поља за унос помоћу куке усеСтате.
- Тхе онЦханге метода сваког поља за унос покреће повратни позив који користи методе стања за хватање и складиштење података које корисник шаље путем обрасца.
- За слање података на позадински сервер, функција руковања онСубмит користи Акиос.пост метод за прослеђивање података прослеђених из стања као објекта крајњој тачки АПИ-ја за позадину.
Да бисте стилизовали приказани образац, додајте следећи код у Апп.цсс датотеку.
* {
паддинг: 0;
маргина: 0;
бок-сизинг: гранична кутија;
}тело {
породица фонтова: 'Поппинс', Санс Сериф;
боја позадине: #8ЕЦ1Д6;
}.образац за пријаву {
маргина: 100пкауто;
ширина: 200пк;
висина: 250пк;
боја позадине: #ффф;
граница-радијус: 10пк;
}.образац за пријавустр {
Поравнање текста: центар;
фонт-сизе: 12пк;
фонт-веигхт: 600;
боја: #Б8БФЦ6;
паддинг: 10пк 10пк;
}.образац за пријавуулазни {
приказ: блокирати;
ширина: 80%;
висина: 40пк;
маргина: 10пкауто;
граница: 1пкчврст#ццц;
граница-радијус: 5пк;
паддинг: 0 10пк;
фонт-сизе: 16пк;
боја: црн;
}
.образац за пријавудугме {
боја позадине: #8ЕЦ1Д6;
боја: #ффф;
курсор: показивач;
фонт-сизе: 15пк;
граница-радијус:7пк;
паддинг: 5пк 10пк;
граница: ниједан;
}
Сада покрените развојни сервер да ажурирате промене и идите до њега http://localhost: 3000 на вашем претраживачу да бисте видели резултате.
Направите позадину Екпресс.јс
Екпресс бацкенд делује као међувера између вашег Реацт клијента и МонгоДБ базе података. Са сервера можете дефинисати своје шеме података и успоставити везу између клијента и базе података.
Креирајте Екпресс веб сервер и инсталирајте ова два пакета:
нпм инсталирај монгоосе цорсМонгоосе је библиотека за моделирање података објеката (ОДМ) за МонгоДБ и Ноде. Пружа поједностављену методу засновану на шеми, за моделирање података ваше апликације и складиштење у МонгоДБ бази података.
ЦОРС (Цросс-Оригин Ресоурце Схаринг) пакет обезбеђује механизам за позадински сервер и фронтенд клијент да комуницирају и прослеђују податке преко АПИ крајњих тачака.
Направите шему података
Направите нову фасциклу у основном директоријуму фасцикле пројекта вашег сервера и дајте јој име модели. У овој фасцикли направите нову датотеку: датаСцхема.јс.
Шема, у овом случају, представља логичку структуру ваше базе података. Дефинише документе (записе) и поља (својства) која чине збирке унутар базе података.
Додајте следећи код у датаСцхема.јс:
конст мунгоосе = захтевају('Мунгос');конст РеацтФормДатаСцхема = Нова Мунгос. Шема({
име: {
тип: Низ,
потребан: истина
},
улога: {
тип: Низ,
потребан: истина
}
});
конст Корисник = монгоосе.модел('Корисник', РеацтФормДатаСцхема);
модул.екпортс = Корисник;
Овај код креира Монгоосе шему за модел корисника. Ова шема дефинише структуру података за корисничке податке, укључујући име и улогу корисника. Шема се затим користи за креирање модела за корисника. Ово омогућава моделу да складишти податке у МонгоДБ колекцији према структури дефинисаној у шеми.
Подесите Екпресс сервер
Затим отворите индек.јс датотеку у фасцикли пројекта сервера и додајте овај код:
конст екпресс = захтевају('изразити');
конст мунгоосе = захтевају('Мунгос');
конст цорс = захтевају('цорс');
конст апп = екпресс();
конст Усер= захтевају('./моделс/РеацтДатаСцхема')апп.усе (екпресс.јсон());
апп.усе (цорс());мунгоосе.цоннецт('монгодб://лоцалхост: 27017/реацтдата', { усеНевУрлПарсер: истина });
апп.пост('/инсерт', асинц(рек, рес) => {
конст Име = рек.боди.фирстНаме
конст ЦомпаниРоле = рек.боди.цомпаниРолеконст формДата = Нова Корисник({
име: Име,
улога: ЦомпаниРоле
})покушати {
чекати формДата.саве();
рес.сенд(„уметнути подаци..“)
} улов(ерр) {
конзола.лог (грешка)
}
});конст порт = процес.енв. ПОРТ || 4000;
апп.листен (порт, () => {
конзола.Пријава(`Сервер је покренут на порту ${порт}`);
});
Хајде да то разложимо:
- Иницијализујте Екпресс, мунгоосе и ЦОРС на серверу.
- Пакет Монгоосе успоставља везу са МонгоДБ базом података користећи повезати метод који узима УРИ домен и објекат. УРИ је низ везе који се користи за успостављање везе са МонгоДБ базом података. Објекат специфицира конфигурацију; у овом случају, садржи поставку за коришћење најновијег облика УРЛ парсера.
- Веб сервер углавном одговара на захтеве који долазе са различитих рута одговарајућом функцијом руковања. У овом случају, сервер има ПОСТ руту која прима податке од Реацт клијента, чува их у променљивој и прослеђује их увезеном моделу података.
- Сервер затим користи блок покушаја и хватања за складиштење и чување података у МонгоДБ бази података и одјављује све грешке, ако их има.
Коначно, покрените развојни сервер да бисте ажурирали промене и пређите на свој Реацт клијент у свом претраживачу. Унесите било које податке у образац и погледајте резултате у бази података МонгоДБ.
Коришћење МЕРН стека за прављење апликација
МЕРН стацк пружа ефикасан и моћан сет алата за изградњу апликација. Можете креирати потпуно развијене апликације из стварног света користећи МонгоДБ, Екпресс, Реацт и Ноде.јс,
Реацт екосистем такође нуди пакете који ће вам помоћи да радите са веб обрасцима. Неки од најпопуларнијих су Формик, КендоРеацт Форм и Реацт Хоок Форм.
