Прошли су дани када сте морали да направите засебну позадину за своју веб локацију. Уз рутирање АПИ-ја заснованог на Нект.јс датотекама, можете олакшати свој живот писањем свог АПИ-ја унутар Нект.јс пројекта.
Нект.јс је Реацт мета-оквир са функцијама које поједностављују процес прављења веб апликација спремних за производњу. Видећете како да направите РЕСТ АПИ у Нект.јс и искористите податке из тог АПИ-ја на Нект.јс страници.
Креирајте Нект.јс пројекат користећи цреате-нект-апп
Можете да креирате нови Нект.јс пројекат користећи ЦЛИ алатку цреате-нект-апп. Инсталира неопходне пакете и датотеке да бисте започели са прављењем Нект.јс апликације.
Покрените ову команду у терминалу да бисте креирали нову фасциклу Нект.јс под називом апи-роутес. Можда ћете добити упит да инсталирате цреате-нект-апп.
нпк Креирај-следећи-апп апи-руте
Када се команда заврши, отворите фасциклу апи-роутес да бисте започели креирање АПИ рута.
АПИ рутирање у Нект.јс
АПИ руте се покрећу на серверу и имају много намена као што је чување корисничких података у бази података или преузимање података из АПИ-ја без подизања
Грешка ЦОРС политике.У Нект.јс морате креирати АПИ руте унутар директоријума /пагес/апи. Нект.јс генерише АПИ крајње тачке за сваку датотеку у овој фасцикли. Ако додате усер.јс у /пагес/апи, Нект.јс ће креирати крајњу тачку на http://localhost: 3000/апи/корисник.
Основна рута Нект.јс АПИ-ја има следећу синтаксу.
извозУобичајенофункцијаруковалац(рек, рес) {
рес.статус (200).јсон({ наме: 'Н.Н. лице' })
}
Морате да извезете функцију руковаоца да би она радила.
Креирање АПИ рута
Креирајте нову датотеку под називом тодо.јс у /pages/api фолдер за додавање АПИ руте за ставке задатака.
Исмевање Тодо базе података
Да бисте добили задатке, морате креирати ГЕТ крајњу тачку. За једноставност. Овај водич користи низ задатака уместо базе података, али слободно користите базу података као што је МонгоДБ или МиСКЛ.
Креирајте тодо ставке у тодо.јс у основној фасцикли ваше апликације, а затим додајте следеће податке.
извозконст тодос = [
{
ид: 1,
урадити: "Учини нешто лепо за некога до кога ми је стало",
завршено: истина,
усерИд: 26,
},
{
ид: 2,
урадити: "Запамтите педесет држава и њихове престонице",
завршено: лажно,
усерИд: 48,
},
// други тодос
];
Ове тодо ставке су са веб локације ДуммиЈСОН, а РЕСТ АПИ за лажне податке. Тачне податке можете пронаћи из овога ДуммиЈСОН крајња тачка задатака.
Затим креирајте АПИ руту у /pages/api/todos.js и додајте функцију руковаоца.
увоз { тодос } из "../../урадити";извозфункцијаруковалац(рек, рес) {
конст {метод} = рек;
прекидач (метод) {
случај "ДОБИТИ":
рес.статус(200).јсон(тодос);
пауза;
случај "ПОШТА":
конст { задатак, завршено } = рек.боди;
тодос.пусх({
ид: тодос.дужина + 1,
урадити,
завршено,
});
рес.статус(200).јсон(тодос);
пауза;
Уобичајено:
рес.сетХеадер("Дозволи", ["ДОБИТИ", "ПОШТА"]);
рес.статус(405).крај(`Метода ${метход} Није дозвољено`);
пауза;
}
}
Ова рута обрађује ГЕТ и ПОСТ крајње тачке. Враћа све задатке за ГЕТ захтев и додаје ставку задатака у базу података задатака за ПОСТ захтев. За друге методе, обрађивач враћа грешку.
Конзумирање АПИ рута у Фронтенду
Направили сте АПИ крајњу тачку која враћа ЈСОН објекат који садржи низ задатака.
Да бисте користили АПИ, креирајте функцију под називом фетцхТодос која преузима податке са крајње тачке АПИ-ја. Функција користи метод преузимања, али можете и ви користите Акиос за прављење АПИ захтева. Затим позовите ову функцију када кликнете на дугме.
увоз Глава из "следећи/глава";
увоз { усеСтате } из "реаговати";извозУобичајенофункцијаКућа() {
конст [тодос, сеттодос] = усеСтате([]);конст фетцхТодос = асинц () => {
конст одговор = чекати дохвати("/api/тодос");
конст подаци = чекати респонсе.јсон();
сеттодос (подаци);
};
повратак (
<див цлассНаме={стилес.цонтаинер}>
<Глава>
<наслов>Креирајте следећу апликацију</title>
<мета наме="Опис" цонтент="Генерисано креирањем следеће апликације" />
<линк рел="икона" хреф="/favicon.ico" />
</Head>
<главни>
<дугме онЦлицк={фетцхТодос}>Гет тодос</button>
<ул>
{тодос.мап((тодо) => {
повратак (
<ли
стиле={{ цолор: `${тодо.цомплетед? "зелен": "црвена"}` }}
кеи={тодо.ид}
>
{тодо.тодо}:{тодо.цомплетед}.
</li>
);
})}
</ul>
</main>
</div>
);
}
Листа у овом исечку приказује ставке задатака када се преузму.
За крајњу тачку ПОСТ, креирајте нову функцију под називом савеТодо која шаље ПОСТ захтев АПИ-ју. Захтев за преузимање складишти нову ставку задатака у телу и враћа све ставке задатака укључујући и нову. Функција савеТодо их затим чува у стању задатака.
конст савеТодо = асинц () => {
конст одговор = чекати дохвати("/api/тодос", {
метод: "ПОШТА",
тело: ЈСОН.стрингифи (невТодо),
заглавља: {
"Тип садржаја": "апплицатион/јсон",
},
});
конст подаци = чекати респонсе.јсон();
сеттодос (подаци);
};
Затим креирајте образац са траком за унос текста да бисте примили нову ставку обавеза. Функција руковања слањем овог обрасца ће позвати функцију савеТодо.
увоз Глава из "следећи/глава";
увоз { усеРедуцер, усеСтате } из "реаговати";
увоз стилова из "../стилес/Хоме.модуле.цсс";извозУобичајенофункцијаКућа() {
конст [тодос, сеттодос] = усеСтате([]);конст [невТодо, сетневТодо] = усеСтате({
урадити: "",
завршено: лажно,
});конст фетцхТодос = асинц () => {
// фетцхТодос
};
конст савеТодо = асинц (е) => {
конст одговор = чекати дохвати("/api/тодос", {
метод: "ПОШТА",
тело: ЈСОН.стрингифи (невТодо),
заглавља: {
"Тип садржаја": "апплицатион/јсон",
},
});конст подаци = чекати респонсе.јсон();
сеттодос (подаци);
};конст хандлеЦханге = (е) => {
сетневТодо({
урадити: е.таргет.вредност,
});
};конст хандлеСубмит = (е) => {
е.превентДефаулт();
савеТодо();
сетневТодо({
урадити: '',
});
};повратак (
<див цлассНаме={стилес.цонтаинер}>
<Глава>
<наслов>Креирајте следећу апликацију</title>
<мета наме="Опис" цонтент="Генерисано креирањем следеће апликације" />
<линк рел="икона" хреф="/favicon.ico" />
</Head>
<главни>
// Дохваћа ставке задатака када се кликне
<дугме онЦлицк={фетцхТодос}>Гет тодос</button>
// Чува нову ставку обавеза када се пошаље
<форм онСубмит={хандлеСубмит}>
<тип уноса="текст" онЦханге={хандлеЦханге} валуе={невТодо.тодо} />
</form>
<ул>
{// листа задатака}
</ul>
</main>
</div>
);
}
Руковалац додаје нови задатак бази података сваки пут када корисник пошаље образац. Такође, ова функција ажурира вредност задатака користећи податке примљене од АПИ-ја који заузврат додаје нову ставку задатака на листу.
АПИ рутирање је само једна од предности Нект.јс-а
Видели сте како правите и користите Нект.јс АПИ руту. Сада можете да креирате пуну апликацију без напуштања фасцикле пројекта Нект.јс. АПИ рутирање је једна од многих предности које Нект.јс пружа.
Нект.јс такође нуди оптимизације перформанси као што је дељење кода, лењо учитавање и уграђена ЦСС подршка. Ако правите веб локацију која мора да буде брза и прилагођена СЕО, требало би да размислите о Нект.јс.