Како направити и користити лажне АПИ-је у Реацт апликацијама користећи Мираге.јс

Приликом развоја апликација пуног стека, значајан део фронтенд рада се ослања на податке у реалном времену из позадинског дела.

То може значити да морате да одложите развој корисничког интерфејса док АПИ не буде доступан за употребу. Међутим, чекање да АПИ буде спреман за постављање фронтенда може значајно смањити продуктивност и продужити временске рокове пројекта.

Одлично решење за овај изазов укључује коришћење лажних АПИ-ја. Ови АПИ-ји вам омогућавају да развијете и тестирајте свој фронтенд користећи податке који опонашају структуру стварних података, све без ослањања на стварне АПИ.

Почетак рада са Мираге.јс лажним АПИ-јима

Мираге.јс је ЈаваСцрипт библиотека која вам омогућава да креирате лажне АПИ-је, заједно са тест сервером који ради на страни клијента ваше веб апликације. То значи да можете тестирати свој фронтенд код без потребе да бринете о доступности или понашању вашег стварног позадинског АПИ-ја.

Да бисте користили Мираге.јс, прво морате да креирате лажне АПИ крајње тачке и дефинишете одговоре које треба да врате. Затим, Мираге.јс пресреће све ХТТП захтеве које ваш фронтенд код прави и уместо тога враћа лажне одговоре.

Када ваш АПИ буде спреман, можете лако да пређете на његово коришћење само променом конфигурације Мираге.јс.

Овде можете пронаћи изворни код овог пројекта ГитХуб репозиторијум.

Направите лажни АПИ сервер са Мираге.јс

Да бисте демонстрирали како да подесите лажне АПИ-је, направићете једноставну Реацт апликацију која користи Мираге.јс позадину. Али прво, креирајте Реацт апликацију користећи команду цреате-реацт-апп. Алтернативно, можете користити Вите да бисте поставили Реацт пројекат. Затим инсталирајте зависност Мираге.јс.

npm install --save-dev miragejs

Сада, да бисте креирали инстанцу сервера Мираге.јс за пресретање захтева и лажних АПИ одговора, користите цреатеСервер методом. Овај метод узима конфигурациони објекат као параметар.

Овај објекат укључује Животна средина и именског простора за АПИ. Окружење специфицира фазу развоја у којој се АПИ налази, као што је развој, док је именски простор префикс који се додаје свим крајњим тачкама АПИ-ја.

Створити нова срц/сервер.јс датотеку и укључите следећи код:

import { createServer, Model } from'miragejs';
const DEFAULT_CONFIG = {
 environment: "development",
 namespace: "api",
};
exportfunctionmakeServer({ environment, namespace } = 
 DEFAULT_CONFIG) {
let server = createServer({
 environment,
 namespace,
 models: {
 Todo: Model, 
 },
 });
return server;
}

Ако је потребно, можете да прилагодите простор имена тако да одговара структури УРЛ-а вашег стварног АПИ-ја, укључујући навођење верзије. На овај начин, када је ваш АПИ спреман, можете га лако интегрисати у своју фронт-енд апликацију уз минималне промене кода.

Поред тога, у оквиру конфигурације инстанце сервера, такође можете дефинисати модел података за симулацију складиштења и преузимања података у лажном окружењу.

Коначно, покрените сервер Мираге.јс увозом серверског објекта у свој индек.јск или маин.јск фајл на следећи начин:

import React from'react'
import ReactDOM from'react-dom/client'
import App from'./App.jsx'
import { makeServer } from'./server';
if ( process.env.NODE_ENV 'development' && 
typeof makeServer 'function'
 ) {
 makeServer();}
ReactDOM.createRoot(document.getElementById('root')).render(


 </React.StrictMode>,
)

Додајте почетне податке у Моцк АПИ

Мираге.јс има базу података у меморији коју можете да користите за претходно попуњавање лажног АПИ-ја са почетним почетним подацима и за управљање тест подацима из ваше клијентске апликације. То значи да можете да складиштите и преузмете тест податке из лажне базе података и да их користите у својој клијентској апликацији.

Да бисте додали основне податке у Моцк АПИ, додајте следећи код у сервер.јс фајл одмах испод модели објекат.

seeds(server) {
 server.create('Todo', {
 title: 'item no 1',
 body:
'Do something nice for someone I care about',
 });
 server.create('Todo', {
 title: 'item no 2',
 body:
'Memorize the fifty states and their capitals.',
 });
 server.create('Todo', {
 title: 'item no 3',
 body:
'Watch a classic movie.',
 });
 },

Тхе семена функција попуњава Мираге.јс сервер са три ставке које треба урадити, свака са насловом и описом. Опционо, уместо тврдог кодирања тестних података, можете интегрисати библиотеку као што је Факер.јс да генерише потребне податке за тестирање.

Дефинишите лажне АПИ руте

Сада дефинишите неке АПИ руте за лажни АПИ. У овом случају наведите руте за руковање ГЕТ, ПОСТ и ДЕЛЕТЕ лажним АПИ захтевима.

Одмах испод података о семену, додајте код испод:

routes() {
this.namespace = 'api/todos'; 

this.get('/', (schema, request) => {
return schema.all('Todo'); 
 });
this.post('/', (schema, request) => {
let attrs = JSON.parse(request.requestBody);
return schema.create('Todo', attrs); 
 });
this.delete('/:id', (schema, request) => {
let id = request.params.id;
return schema.find('Todo', id).destroy(); 
 });
 }

Направите Реацт клијента

Сада када је лажни АПИ постављен, хајде да направимо Реацт клијента за интеракцију са крајњим тачкама АПИ-ја и њихово коришћење. Можете слободно да користите било коју библиотеку компоненти корисничког интерфејса коју желите, али овај водич ће користити Цхакра УИ за стилизовање апликације.

Прво, инсталирајте ове зависности:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

Затим креирајте нову срц/цомпонентс/ТодоЛист.јск датотеку и укључите следећи код:

import React, { useState, useEffect } from'react';
import {
 Button,
 Box,
 Container,
 Text,
 Input,
 FormControl,
 Flex,
} from'@chakra-ui/react';

Сада дефинишите функционалну компоненту за приказивање корисничког интерфејса листе обавеза, укључујући поља за унос за додавање нових задатака и листу постојећих задатака.

exportdefaultfunctionTodoList() {
return (

"xl" mb={4}>Todo List</Text>
4}>
 type="text"
 name="body"
 value={newTodo.body}
 onChange={handleInputChange}
 />
 </FormControl>
"teal" onClick={handleAddTodo}> Add Todo</Button>
 {loading? ( <Text>Loading...Text> ): (
 todos.map((todo) => (
2} p={2} borderWidth="1px">
"center">
"1">{todo.body}</Text>
 colorScheme="red"
 size="sm"
 onClick={() => handleDelete(todo.id)}>Delete 
 </Button>
 </Flex>
 </Box>
 ))
 )}
 </Container>
 );
}

Сада дефинишите функције руковаоца за операције додавања и брисања. Али прво додајте ове државе. Алтернативно, можете користите закачицу усеРедуцер да дефинишете логику управљања стањем за апликацију листе обавеза.

const [todos, setTodos] = useState([]);
const [newTodo, setNewTodo] = useState({ title: '', body: '' });
const [loading, setLoading] = useState(true);
const [renderKey, setRenderKey] = useState(0);

Сада дефинишите логику за преузимање и приказ почетних података у бази података у меморији када се апликација први пут учита у претраживач тако што ћете омотати донети метода у а усеЕффецт кука.

 useEffect(() => {
 fetch('/api/todos') 
 .then((response) => response.json())
 .then((data) => {
 setTodos(data.todos);
 setLoading(false);
 });
 }, [renderKey]);

Тхе рендерКеи стање је такође укључено у усеЕффецт како би се осигурало да код покреће поновно приказивање новододатих података у бази података у меморији када сервер ради.

Једноставно речено, кад год корисник дода нове податке о обавезама у базу података Мираге.јс—компонента ће се поново приказати како би приказала ажуриране податке.

Додавање података у АПИ

Сада дефинишите логику за додавање података у АПИ путем ПОСТ захтева. Одмах испод усеЕффецт куке укључите следећи код.

const handleInputChange = (e) => {
const { name, value } = e.target;
 setNewTodo((prevTodo) => ({ ...prevTodo, [name]: value }));
};
const handleAddTodo = () => {
 setLoading(true);
 fetch('/api/todos', {
 method: 'POST',
 headers: {
'Content-Type': 'application/json',
 },
 body: JSON.stringify(newTodo),
 }).then((response) => response.json()).then((createdTodo) => {
 setTodos((prevTodos) => [createdTodo, ...prevTodos]);
 setNewTodo({ title: '', body: '' });
 setRenderKey((prevKey) => prevKey + 1); 
 setLoading(false); 
 }).catch((error) => {
console.error('Error adding todo:', error);
 setLoading(false); 
 });
};

Када корисник унесе податке у поље за унос обавеза и кликне на Додајте Тодо дугме, код ажурира невТодо стање са уносом корисника. Затим шаље лажни ПОСТ захтев АПИ-ју са новим објектом података у телу захтева да би га сачувао у бази података у меморији.

Ако је ПОСТ захтев успешан, код додаје нову ставку у тодос низ, и на крају, покреће поновно приказивање компоненте да би се приказала нова обавеза.

Моцк АПИ ДЕЛЕТЕ Захтеви

Сада дефинишите логику за брисање података преко ДЕЛЕТЕ лажних АПИ захтева. Овај процес укључује слање захтева ДЕЛЕТЕ за уклањање ставке обавеза из базе података у меморији. Ако успе, ажурирајте оба тодос и лоадинг стање које одражава процес брисања.

const handleDelete = (id) => { 
let deleteInProgress = true;
 fetch(`/api/todos/${id}`, {
 method: 'DELETE',
 }).then((response) => {
if (response.status 204) {
returnnull;
 } else {
return response.json();
 }
 }) .then((data) => {
if (data && data.error) {
console.error('Error deleting todo:', data.error);
 } else { 
 setTodos((prevTodos) => prevTodos.filter((todo) => todo.id !== id));
 setRenderKey((prevKey) => prevKey + 1);
 }
 deleteInProgress = false;
 }).catch((error) => {
console.error('Error deleting todo:', error);
 deleteInProgress = false;
 }) .finally(() => {
 setLoading(deleteInProgress);
 });
 };

Имајте на уму да овај процес може да избрише само новододате податке, не и податке о почетку.

На крају, увезите ТодоЛист компонента у Апп.јск датотеку да бисте је приказали у ДОМ-у.

import TodoList from'./components/TodoList';
//code ...

Велики! Када покренете развојни сервер, можете да преузмете почетне податке и додате и избришете нове податке из лажног АПИ-ја у вашој Реацт апликацији.

Коришћење лажних АПИ-ја за убрзање развоја

Моцкинг АПИ-ји су одличан начин да се убрза развој фронтенда, било да радите на пројекту појединачно или као део тима. Коришћењем лажних АПИ-ја, можете брзо да направите кориснички интерфејс и тестирате њихов код без чекања да се позадински део заврши.