Neturite paruošto API? Jokiu problemu! Kurkite ir naudokite netikras API su Mirage.js.

Kuriant visą krūvą taikomąsias programas, didelė frontend darbo dalis priklauso nuo realaus laiko duomenų iš užpakalinės sistemos.

Tai gali reikšti, kad turite atidėti vartotojo sąsajos kūrimą, kol bus galima naudoti API. Tačiau laukimas, kol API bus paruošta nustatyti sąsają, gali žymiai sumažinti produktyvumą ir pailginti projekto terminus.

Puikus šio iššūkio sprendimas yra naudoti netikras API. Šios API leidžia kurti ir Išbandykite savo sąsają naudodami duomenis, kurie imituoja tikrų duomenų struktūrą, nepasitikėdami faktiniais API.

Darbo su Mirage.js netikromis API pradžia

Mirage.js yra „JavaScript“ biblioteka, leidžianti kurti netikras API kartu su bandomuoju serveriu, veikiančiu jūsų žiniatinklio programos kliento pusėje. Tai reiškia, kad galite išbandyti savo sąsajos kodą nesijaudindami dėl tikrosios pagrindinės API prieinamumo ar veikimo.

Norėdami naudoti Mirage.js, pirmiausia turite sukurti netikrus API galinius taškus ir apibrėžti atsakymus, kuriuos jie turėtų grąžinti. Tada Mirage.js perima visas HTTP užklausas, kurias pateikia jūsų sąsajos kodas, ir grąžina netikrus atsakymus.

instagram viewer

Kai API bus paruošta, galėsite lengvai pereiti prie jos naudojimo, pakeisdami tik Mirage.js konfigūraciją.

Šio projekto šaltinio kodą galite rasti čia GitHub saugykla.

Sukurkite netikrą API serverį naudodami Mirage.js

Norėdami parodyti, kaip nustatyti netikras API, sukursite paprastą „React“ programą, kuri naudoja „Mirage.js“ pagrindinę programą. Bet pirma, sukurkite programą „React“ naudodami komandą „create-react-app“.. Arba galite naudoti Vite sukurti React projektą. Tada įdiekite Mirage.js priklausomybę.

npm install --save-dev miragejs

Dabar, norėdami sukurti Mirage.js serverio egzempliorių, kad perimtų užklausas ir pasityčiotų iš API atsakymų, naudokite sukurti serverį metodas. Šis metodas naudoja konfigūracijos objektą kaip parametrą.

Šis objektas apima aplinką ir vardų erdvė API. Aplinka nurodo kūrimo etapą, kuriame yra API, pvz., kūrimo, o vardų erdvė yra priešdėlis, pridėtas prie visų API galinių taškų.

Sukurti naują src/server.js failą ir įtraukite šį kodą:

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

Jei reikia, galite tinkinti vardų sritį, kad ji atitiktų tikrosios API URL struktūrą, įskaitant versijos nurodymą. Tokiu būdu, kai jūsų API bus paruošta, galėsite lengvai integruoti ją į priekinę programą atlikdami minimalius kodo pakeitimus.

Be to, serverio egzemplioriaus konfigūracijoje taip pat galite apibrėžti duomenų modelį, kad imituotų duomenų saugojimą ir gavimą netikroje aplinkoje.

Galiausiai paleiskite Mirage.js serverį, importuodami serverio objektą į savo index.jsx arba pagrindinis.jsx failą taip:

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

Pridėkite pradinius duomenis prie Mock API

Mirage.js turi atmintyje esančią duomenų bazę, kurią galite naudoti norėdami iš anksto užpildyti netikrą API pradiniais pradiniais duomenimis ir tvarkyti bandomuosius duomenis iš savo kliento programos. Tai reiškia, kad galite saugoti ir gauti bandymo duomenis iš netikros duomenų bazės ir naudoti juos savo kliento programoje.

Norėdami pridėti pradinius duomenis prie Mock API, pridėkite šį kodą server.js failą tiesiai po modeliai objektas.

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ėklos funkcija užpildo Mirage.js serverį trimis darbų elementais, kurių kiekvienas turi pavadinimą ir aprašymą. Pasirinktinai, užuot kietojo bandymo duomenų kodavimo, galite integruoti biblioteką, pvz., Faker.js sugeneruoti reikiamus bandymo duomenis.

Apibrėžkite netikrus API maršrutus

Dabar apibrėžkite kai kuriuos API modelio API maršrutus. Tokiu atveju nurodykite GET, POST ir DELETE netikrų API užklausų tvarkymo maršrutus.

Iš karto po pradiniais duomenimis pridėkite toliau esantį kodą:

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

Sukurkite „React“ klientą

Dabar, kai sukurta netikra API, sukurkime „React“ klientą, kad galėtumėte sąveikauti su API galutiniais taškais ir juos naudoti. Galite laisvai naudoti bet kurią jums patinkančią UI komponentų biblioteką, tačiau šiame vadove programai stiliuoti bus naudojama „Chakra“ vartotojo sąsaja.

Pirmiausia įdiekite šias priklausomybes:

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

Tada sukurkite naują src/components/TodoList.jsx failą ir įtraukite šį kodą:

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

Dabar apibrėžkite funkcinį komponentą, kad pateiktumėte darbų sąrašo vartotojo sąsają, įskaitant įvesties laukus, skirtus pridėti naujų užduočių ir esamų užduočių sąrašą.

exportdefaultfunctionTodoList() {
return (

"xl" mb={4}>Todo List</Text>
4}>
 type="text"
 name="body"
 value={newTodo.body}
 onChange={handleInputChange}
 />
 </FormControl>
 colorScheme="red"
 size="sm"
 onClick={() => handleDelete(todo.id)}>Delete 
 </Button>
 </Flex>
 </Box>
 ))
 )}
 </Container>
 );
}

Dabar apibrėžkite pridėjimo ir ištrynimo operacijų tvarkyklės funkcijas. Bet pirmiausia pridėkite šias būsenas. Arba galite Būsenos valdymo logikai apibrėžti naudokite kabliuką useReducer užduočių sąrašo programai.

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

Dabar nustatykite logiką, kaip nuskaityti ir rodyti pradinius duomenis atminties duomenų bazėje, kai programa pirmą kartą įkeliama į naršyklę, suvyniodami atnešti metodas a naudojimoEfektas kabliukas.

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

The renderKey būsena taip pat įtraukta į useEffect, siekiant užtikrinti, kad kodas suaktyvintų naujai pridėtų duomenų atvaizdavimą atminties duomenų bazėje, kai serveris veikia.

Paprasčiau tariant, kai vartotojas prideda naujų darbų duomenų į Mirage.js duomenų bazę, komponentas bus iš naujo pateiktas, kad būtų rodomi atnaujinti duomenys.

Duomenų įtraukimas į API

Dabar apibrėžkite duomenų įtraukimo į API logiką naudojant POST užklausas. Tiesiai po useEffect kabliu įtraukite šį kodą.

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

Kai vartotojas įveda duomenis į darbų įvesties lauką ir spusteli Pridėti Todo mygtuką, kodas atnaujina newTodo būsena su vartotojo įvestimi. Tada jis siunčia netikrą POST užklausą API su nauju duomenų objektu užklausos turinyje, kad išsaugotų jį atminties duomenų bazėje.

Jei POST užklausa yra sėkminga, kodas prideda naują elementą prie todos masyvas ir galiausiai suaktyvina komponento pakartotinį pateikimą, kad būtų rodomas naujas užduoties elementas.

Apgaulingos API IŠTRINIMO užklausos

Dabar apibrėžkite duomenų ištrynimo logiką naudojant DELETE imitacines API užklausas. Šis procesas apima DELETE užklausos siuntimą pašalinti užduoties elementą iš atminties duomenų bazės. Jei pasiseks, atnaujinkite abu todos ir pakrovimas būsena, kad atspindėtų ištrynimo procesą.

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

Atminkite, kad šis procesas gali ištrinti tik naujai pridėtus duomenis, o ne pradinius duomenis.

Galiausiai importuokite Užduočių sąrašas komponentas App.jsx failą, kad jis būtų pateiktas DOM.

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

Puiku! Paleidę kūrimo serverį, galite gauti pradinius duomenis ir pridėti bei ištrinti naujus duomenis iš netikros API programoje „React“.

Mock API naudojimas kūrimui paspartinti

Pasityčiojimas API yra puikus būdas paspartinti sąsajos kūrimą, nesvarbu, ar dirbate su projektu individualiai, ar kaip komandos dalis. Naudodami netikrą API, galite greitai sukurti vartotojo sąsają ir išbandyti jų kodą nelaukdami, kol baigsis užpakalinė programa.