Kā izveidot un izmantot viltotās API programmās React, izmantojot Mirage.js

Izstrādājot pilnas stekas lietojumprogrammas, ievērojama priekšgala darba daļa balstās uz reāllaika datiem no aizmugursistēmas.

Tas var nozīmēt, ka jums ir jāatturas no lietotāja interfeisa izstrādes, līdz API ir pieejama lietošanai. Tomēr gaidīšana, līdz API būs gatava priekšgala iestatīšanai, var ievērojami samazināt produktivitāti un pagarināt projekta termiņus.

Lielisks risinājums šim izaicinājumam ietver viltotu API izmantošanu. Šīs API ļauj izstrādāt un pārbaudiet savu priekšpusi, izmantojot datus, kas atdarina reālo datu struktūru, nepaļaujoties uz faktiskajiem API.

Darba sākšana ar Mirage.js Mock API

Mirage.js ir JavaScript bibliotēka, kas ļauj izveidot viltus API, komplektā ar testa serveri, kas darbojas jūsu tīmekļa lietojumprogrammas klienta pusē. Tas nozīmē, ka varat pārbaudīt savu priekšgala kodu, neuztraucoties par reālās aizmugursistēmas API pieejamību vai darbību.

Lai izmantotu Mirage.js, vispirms ir jāizveido viltoti API galapunkti un jādefinē atbildes, kas tiem jāatgriež. Pēc tam Mirage.js pārtver visus HTTP pieprasījumus, ko veic jūsu priekšgala kods, un tā vietā atgriež imitētās atbildes.

Kad API ir gatava, varat viegli pārslēgties uz tās lietošanu, mainot tikai Mirage.js konfigurāciju.

Šeit varat atrast šī projekta pirmkodu GitHub krātuve.

Izveidojiet viltus API serveri, izmantojot Mirage.js

Lai parādītu, kā iestatīt viltus API, izveidojiet vienkāršu React lietotni, kas izmanto Mirage.js aizmugursistēmu. Bet vispirms, izveidot React lietojumprogrammu, izmantojot komandu create-react-app. Alternatīvi, jūs varat izmantot Vite izveidot React projektu. Pēc tam instalējiet Mirage.js atkarību.

npm install --save-dev miragejs

Tagad, lai izveidotu Mirage.js servera gadījumu, lai pārtvertu pieprasījumus un izspēles API atbildes, izmantojiet izveidotServeri metodi. Šī metode izmanto konfigurācijas objektu kā parametru.

Šis objekts ietver vidi un nosaukumvieta API. Vide norāda izstrādes stadiju, kurā atrodas API, piemēram, izstrāde, savukārt nosaukumvieta ir prefikss, kas pievienots visiem API galapunktiem.

Izveidojiet jaunu src/server.js failu un iekļaujiet šādu kodu:

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

Ja nepieciešams, varat pielāgot nosaukumvietu, lai tā atbilstu faktiskās API URL struktūrai, tostarp norādot versiju. Tādā veidā, kad API ir gatava, varat to viegli integrēt savā priekšgala lietojumprogrammā, veicot minimālas koda izmaiņas.

Turklāt servera instances konfigurācijā varat arī definēt datu modeli, lai simulētu datu glabāšanu un izguvi viltotajā vidē.

Visbeidzot, palaidiet Mirage.js serveri, importējot servera objektu savā index.jsx vai galvenais.jsx failu šādi:

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

Pievienojiet sēklu datus Mock API

Mirage.js ir atmiņā esoša datu bāze, ko varat izmantot, lai iepriekš aizpildītu viltus API ar sākotnējiem sākuma datiem un pārvaldītu testa datus no klienta lietojumprogrammas. Tas nozīmē, ka varat saglabāt un ienest testa datus no viltotās datu bāzes un izmantot tos savā klienta lietojumprogrammā.

Lai Mock API pievienotu sākuma datus, pievienojiet tālāk norādīto kodu serveris.js failu tieši zem modeļiem objektu.

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 sēklas funkcija aizpilda Mirage.js serveri ar trim uzdevumiem, katram no kuriem ir nosaukums un apraksts. Pēc izvēles testa datu cietā kodēšanas vietā varat integrēt bibliotēku, piemēram, Faker.js lai ģenerētu nepieciešamos testa datus.

Definējiet viltotos API maršrutus

Tagad definējiet dažus API maršrutus viltus API. Šādā gadījumā norādiet maršrutus, lai apstrādātu GET, POST un DELETE imitācijas API pieprasījumus.

Tieši zem sēklu datiem pievienojiet tālāk norādīto kodu:

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

Izveidojiet React klientu

Tagad, kad viltotā API ir iestatīta, izveidosim React klientu, lai mijiedarbotos ar API galapunktiem un patērētu tos. Varat brīvi izmantot jebkuru lietotāja interfeisa komponentu bibliotēku, kas jums patīk, taču šajā rokasgrāmatā tiks izmantots Chakra lietotāja interfeiss, lai veidotu lietotni.

Vispirms instalējiet šīs atkarības:

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

Pēc tam izveidojiet jaunu src/components/TodoList.jsx failu un iekļaujiet šādu kodu:

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

Tagad definējiet funkcionālu komponentu, lai renderētu uzdevumu saraksta lietotāja saskarni, tostarp ievades laukus jaunu uzdevumu pievienošanai un esošo uzdevumu sarakstu.

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

Tagad definējiet pievienošanas un dzēšanas darbību apdarinātāja funkcijas. Bet vispirms pievienojiet šos stāvokļus. Alternatīvi, jūs varat izmantojiet āķi useReducer, lai definētu stāvokļa pārvaldības loģiku uzdevumu saraksta lietotnei.

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

Tagad definējiet loģiku, lai izgūtu un parādītu sākuma datus atmiņas datu bāzē, kad lietojumprogramma pirmo reizi tiek ielādēta pārlūkprogrammā, iesaiņojot atnest metode a useEffect āķis.

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

The renderKey statuss ir iekļauts arī useEffect, lai nodrošinātu, ka kods aktivizē tikko pievienoto datu atkārtotu renderēšanu atmiņas datu bāzē, kad serveris darbojas.

Vienkārši sakot, ikreiz, kad lietotājs Mirage.js datubāzei pievieno jaunus uzdevumu datus, komponents tiks atkārtoti renderēts, lai parādītu atjauninātos datus.

Datu pievienošana API

Tagad definējiet loģiku datu pievienošanai API, izmantojot POST pieprasījumus. Tieši zem useEffect āķa iekļaujiet šādu kodu.

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

Kad lietotājs ievada datus uzdevuma ievades laukā un noklikšķina uz Pievienot uzdevumu pogu, kods atjaunina jaunsTodo stāvokli ar lietotāja ievadi. Pēc tam tas nosūta fiktīvu POST pieprasījumu API ar jauno datu objektu pieprasījuma pamattekstā, lai saglabātu to atmiņas datu bāzē.

Ja POST pieprasījums ir veiksmīgs, kods pievieno jauno vienumu todos masīvs un, visbeidzot, aktivizē komponenta atkārtotu renderēšanu, lai parādītu jauno uzdevuma vienumu.

Izspēles API DZĒŠANAS pieprasījumi

Tagad definējiet datu dzēšanas loģiku, izmantojot DELETE viltotus API pieprasījumus. Šis process ietver DELETE pieprasījuma nosūtīšanu, lai noņemtu uzdevuma vienumu no atmiņas datu bāzes. Ja izdodas, atjauniniet abus todos un iekraušana stāvoklī, lai atspoguļotu dzēšanas procesu.

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

Ņemiet vērā, ka šis process var dzēst tikai tikko pievienotos datus, nevis sākuma datus.

Visbeidzot, importējiet Darāmo lietu saraksts sastāvdaļa App.jsx failu, lai to renderētu DOM.

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

Lieliski! Kad palaižat izstrādes serveri, varat ienest sākuma datus un pievienot un dzēst jaunus datus no viltus API savā React lietotnē.

Izspēles API izmantošana, lai paātrinātu attīstību

API ņirgāšanās ir lielisks veids, kā paātrināt priekšgala izstrādi neatkarīgi no tā, vai strādājat pie projekta individuāli vai kā komandas daļa. Izmantojot viltus API, varat ātri izveidot lietotāja interfeisu un pārbaudīt to kodu, negaidot aizmugursistēmas pabeigšanu.