Kuidas Mirage.js-i kasutades Reacti rakendustes luua ja kasutada näidis-API-sid

Täisviru rakenduste arendamisel tugineb suur osa eessüsteemi tööst taustaprogrammi reaalajas andmetele.

See võib tähendada, et peate kasutajaliidese arendamisest loobuma, kuni API on kasutamiseks saadaval. Kuid oodates, kuni API on kasutajaliidese seadistamiseks valmis, võib oluliselt vähendada tootlikkust ja pikendada projekti ajakava.

Selle väljakutse suurepärane lahendus hõlmab näidis-API-de kasutamist. Need API-d võimaldavad teil arendada ja testige oma kasutajaliidest, kasutades andmeid, mis jäljendavad tegelike andmete struktuuri, ilma tegelikele andmetele tuginemata API.

Mirage.js Mock API-dega alustamine

Mirage.js on JavaScripti teek, mis võimaldab teil luua näidis API-sid koos teie veebirakenduse kliendi poolel töötava testserveriga. See tähendab, et saate oma kasutajaliidese koodi testida, ilma et peaksite muretsema oma tegeliku taustarakenduse API saadavuse või käitumise pärast.

Mirage.js-i kasutamiseks peate esmalt looma näidis-API lõpp-punktid ja määrama vastused, mille nad peaksid tagastama. Seejärel peatab Mirage.js kõik HTTP-päringud, mille teie kasutajaliidese kood teeb, ja tagastab selle asemel näidisvastused.

Kui teie API on valmis, saate hõlpsalt selle kasutamiseks üle minna, muutes ainult Mirage.js konfiguratsiooni.

Selle projekti lähtekoodi leiate siit GitHub hoidla.

Looge Mirage.js-iga näidis-API server

Näidis-API-de seadistamise demonstreerimiseks looge lihtne rakendus React, mis kasutab Mirage.js-i taustaprogrammi. Aga esmalt, looge rakendus React, kasutades käsku create-react-app. Teise võimalusena võite kasutada Vite Reacti projekti seadistamiseks. Järgmisena installige Mirage.js-i sõltuvus.

npm install --save-dev miragejs

Nüüd, et luua Mirage.js serveri eksemplar, et pealtkuulada päringuid ja pilkata API vastuseid, kasutage looServer meetod. See meetod võtab parameetrina konfiguratsiooniobjekti.

See objekt sisaldab keskkond ja nimeruum API jaoks. Keskkond määrab API arendusetapi, näiteks arenduse, samas kui nimeruum on kõikidele API lõpp-punktidele lisatud eesliide.

Loo uus src/server.js faili ja lisage järgmine kood:

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;
}

Vajadusel saate kohandada nimeruumi nii, et see vastaks teie tegeliku API URL-i struktuurile, sealhulgas täpsustades versiooni. Nii saate pärast API valmisolekut hõlpsasti integreerida selle oma esiotsa rakendusse minimaalsete koodimuudatustega.

Lisaks saate serveri eksemplari konfiguratsioonis määratleda ka andmemudeli, mis simuleerib andmete salvestamist ja otsimist näidiskeskkonnas.

Lõpuks käivitage Mirage.js server, importides serveri objekti oma index.jsx või main.jsx faili järgmiselt:

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>,
)

Lisage Mock API-le seemneandmed

Mirage.js-il on mälusisene andmebaas, mida saate kasutada näidis-API esialgse algandmetega eeltäitmiseks ja kliendirakenduse testandmete haldamiseks. See tähendab, et saate testandmeid prooviandmebaasist salvestada ja sealt tuua ning neid oma klientrakenduses kasutada.

Mock API-le algandmete lisamiseks lisage järgmine kood server.js faili otse all mudelid objektiks.

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.',
 });
 },

The seemned funktsioon täidab Mirage.js serveri kolme ülesandega, millest igaühel on pealkiri ja kirjeldus. Soovi korral saate testandmete kõva kodeerimise asemel integreerida teegi, näiteks Faker.js vajalike testiandmete genereerimiseks.

Määratlege näidis-API marsruudid

Nüüd määrake näidis-API jaoks mõned API marsruudid. Sel juhul määrake marsruudid GET, POST ja DELETE näidis-API taotluste käsitlemiseks.

Lisage kohe seemneandmete alla allolev kood:

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(); 
 });
 }

Looge Reacti klient

Nüüd, kui näidis-API on seadistatud, loome API lõpp-punktidega suhtlemiseks ja tarbimiseks Reacti kliendi. Võite vabalt kasutada mis tahes soovitud kasutajaliidese komponentide teeki, kuid see juhend kasutab rakenduse stiili kujundamiseks Chakra kasutajaliidest.

Esmalt installige need sõltuvused:

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

Järgmisena looge uus src/components/TodoList.jsx faili ja lisage järgmine kood:

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

Nüüd määrake ülesannete loendi kasutajaliidese renderdamiseks funktsionaalne komponent, sealhulgas sisestusväljad uute ülesannete lisamiseks ja olemasolevate ülesannete loend.

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>
 );
}

Nüüd määrake lisamis- ja kustutamistoimingute käitleja funktsioonid. Kuid kõigepealt lisage need olekud. Teise võimalusena saate kasutage olekuhaldusloogika määratlemiseks konksu useReducer ülesannete loendi rakenduse jaoks.

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

Nüüd määrake loogika algandmete toomiseks ja kuvamiseks mälus olevas andmebaasis, kui rakendus esmakordselt brauserisse laadib, pakkides tooma meetod a useEffect konks.

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

The renderKey olek on kaasatud ka useEffecti, et tagada, et kood käivitab serveri töötamise ajal mälusiseste andmebaasi äsja lisatud andmete uuesti renderdamise.

Lihtsamalt öeldes, kui kasutaja lisab Mirage.js andmebaasi uusi ülesandeandmeid, renderdatakse komponent uuesti, et kuvada värskendatud andmed.

Andmete lisamine API-le

Nüüd määratlege loogika API-le andmete lisamiseks POST-päringute kaudu. Lisage otse kasutusefekti konksu alla järgmine kood.

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); 
 });
};

Kui kasutaja sisestab ülesande sisestusväljale andmed ja klõpsab nuppu Lisa Todo nuppu, värskendab kood uusTodo olek kasutaja sisendiga. Seejärel saadab see API-le näidis-POST-päringu koos uue andmeobjektiga päringu kehas, et salvestada see mälus olevasse andmebaasi.

Kui POST-i päring on edukas, lisab kood uue üksuse loendisse todos massiivi ja lõpuks käivitab komponendi uuesti renderdamise, et kuvada uus ülesanne.

Teema API KUSTUTUStaotlused

Nüüd määratlege andmete kustutamise loogika DELETE imiteeritud API päringute kaudu. See protsess hõlmab DELETE-päringu saatmist ülesande eemaldamiseks mälus olevast andmebaasist. Kui see õnnestub, värskendage mõlemat todos ja laadimine kustutamisprotsessi kajastamiseks.

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);
 });
 };

Pidage meeles, et selle protsessiga saab kustutada ainult äsja lisatud andmeid, mitte algandmeid.

Lõpuks importige Nimekiri komponenti App.jsx faili, et see DOM-is renderdada.

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

Suurepärane! Kui käivitate arendusserveri, saate hankida algandmed ning lisada ja kustutada uusi andmeid oma Reacti rakenduse näidis-API-st.

Mock API-de kasutamine arenduse kiirendamiseks

API-de pilkamine on suurepärane viis kasutajaliidese arendamise kiirendamiseks olenemata sellest, kas töötate projekti kallal individuaalselt või meeskonnana. Mock API-de abil saate kiiresti luua kasutajaliidese ja testida nende koodi ilma taustaprogrammi valmimist ootamata.