Integration af frontend-frameworks
Integrér Workers med populære frontend-frameworks som React, Vue eller Svelte til dynamiske full-stack-apps.
Integration af frontend-frameworks er en gratis Edge computing med Cloudflare Workers og Deno-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Edge computing med Cloudflare Workers og Deno, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Edge computing med Cloudflare Workers og Deno-kurset indeholder 4 lektioner i alt.
Full-stack ved kanten med frontend-apps
Velkommen til integration af frontend-frameworks med Cloudflare Workers! I denne lektion undersøger vi, hvordan populære frameworks som React, Vue eller Svelte kan fungere problemfrit sammen med Workers for at skabe dynamiske full-stack-applikationer ved kanten.
Ved at kombinere dem får du det bedste fra begge verdener: en avanceret brugergrænseflade og en ekstremt hurtig, globalt distribueret backend.
Sådan kommunikerer frontends med Workers
Grundlæggende kommunikerer et frontend-framework (der kører i brugerens browser) med en Cloudflare Worker ved hjælp af standardiserede HTTP-anmodninger. Workeren fungerer som en letvægts-API-backend.
- Frontenden sender anmodninger (GET, POST osv.) til Workerens URL.
- Workeren behandler anmodningen og returnerer et svar, ofte JSON-data.
- Frontenden opdaterer derefter brugergrænsefladen baseret på disse data.
Worker: En simpel JSON-API
Lad os se på en grundlæggende Worker, der fungerer som en simpel API og returnerer en JSON-meddelelse. Din frontend-applikation kan nemt hente data fra dette endpoint.
Prøv at køre dette eksempel for at se Workerens svar.
export default {
async fetch(request, env, ctx) {
const data = {
message: "Hello from the Edge!",
timestamp: new Date().toISOString()
};
return new Response(JSON.stringify(data), {
headers: { 'Content-Type': 'application/json' }
});
}
}Frontend: Sådan sender du en GET-anmodning
Fra din frontend-app (f.eks. en React-komponent) kan du bruge browserens fetch-API eller et bibliotek som Axios til at kalde din Worker. Sådan ser det typisk ud (konceptuel kode, som ikke kan køres alene):
fetch('/api/hello')
.then(response => response.json())
.then(data => console.log(data));Frontenden sender en GET-anmodning til Workeren, som derefter sender JSON-dataene tilbage.
Worker: Håndtering af POST-anmodninger
Frontends sender ofte data til backenden ved hjælp af POST-anmodninger, f.eks. når en formular indsendes, eller et nyt element oprettes. Workeren kan læse anmodningens body for at hente disse data.
Kør denne Worker, og forestil dig, at din frontend sender en POST-anmodning med {"name": "Coddy"} i body'en.
export default {
async fetch(request, env, ctx) {
if (request.method === 'POST') {
try {
const body = await request.json();
const name = body.name || 'Guest';
return new Response(JSON.stringify({ greeting: `Hello, ${name}!` }), {
headers: { 'Content-Type': 'application/json' }
});
} catch (error) {
return new Response('Invalid JSON body', { status: 400 });
}
}
return new Response('Please send a POST request.', { status: 405 });
}
}Forstå CORS for edge-API'er
CORS (Cross-Origin Resource Sharing) er en sikkerhedsfunktion, som browsere bruger. Hvis din frontend (f.eks. myapp.com) forsøger at hente data fra en Worker på en anden origin (f.eks. myworker.workers.dev), blokerer browseren det, medmindre Workeren udtrykkeligt tillader det.
Du skal tilføje specifikke HTTP-headere til din Workers svar for at aktivere CORS.
Implementering af grundlæggende CORS i en Worker
For at give din frontend mulighed for at kommunikere med din Worker skal du inkludere CORS-headere i Workerens svar. Headeren Access-Control-Allow-Origin er afgørende.
Dette eksempel viser, hvordan du tilføjer grundlæggende CORS-headere, der tillader anmodninger fra enhver origin (any) (*). I produktion skal du angive dit frontends nøjagtige domæne.
export default {
async fetch(request, env, ctx) {
const headers = {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*', // Allow requests from any origin
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type'
};
if (request.method === 'OPTIONS') {
// Handle preflight requests for CORS
return new Response(null, { headers });
}
const data = { message: 'CORS enabled response!' };
return new Response(JSON.stringify(data), { headers });
}
}Miljøvariabler og hemmeligheder
Dine Workers kan have brug for adgang til API-nøgler eller anden følsom konfiguration. Brug miljøvariabler (ofte kaldet 'bindings' i Workers) til at levere disse sikkert.
Indlejr aldrig hemmeligheder direkte i din kode, og eksponér dem ikke for frontenden. Workers kan få sikker adgang til dem under kørsel og fungere som en proxy for følsomme handlinger.
- Definér variabler i
wrangler.toml. - Tilgå dem via
env-objektet i din Worker.
Bedste praksis for integration
Overvej disse bedste praksisser, når du bygger robuste full-stack-applikationer ved kanten:
- API-versionering: Brug stier som
/api/v1/usersfor at gøre opdateringer nemmere. - Tydelige endpoint-navne: Gør dine Worker-ruter intuitive (f.eks.
/products,/orders). - Fejlhåndtering: Returnér meningsfulde HTTP-statuskoder (400, 401, 404, 500) og JSON-fejlmeddelelser fra din Worker.
- Godkendelse: Workers kan håndtere godkendelsestokens (JWT'er) og administrere brugersessioner for din frontend.
Hurtigt tjek: Worker-integration
Når du integrerer et frontend-framework med en Cloudflare Worker, hvad er så den primære mekanisme, frontenden bruger til at hente dynamiske data fra Workeren?
Opsamling: Full-stack-integration ved kanten
I denne lektion undersøgte vi, hvordan frontend-frameworks integreres med Cloudflare Workers. Vi lærte, at Workers fungerer som effektive, globalt distribuerede API-backends, som dine frontend-apps kan kommunikere med via standardiserede HTTP-anmodninger.
Vigtige pointer:
- Workers leverer JSON-data og håndterer forskellige anmodningsmetoder.
- CORS-headere er afgørende for kommunikation på tværs af origins.
- Bedste praksis omfatter et tydeligt API-design og sikker håndtering af hemmeligheder.
Denne integration gør det muligt at bygge hurtige, skalerbare full-stack-applikationer ved kanten!
Lær Edge computing med Cloudflare Workers og Deno med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 12
- Lektioner
- 47
Ofte stillede spørgsmål
Er lektionen “Integration af frontend-frameworks” gratis?
Ja — hele teksten til “Integration af frontend-frameworks” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Edge computing med Cloudflare Workers og Deno-kurset, skal du opgradere til CoddyKit PRO. Edge computing med Cloudflare Workers og Deno-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Integration af frontend-frameworks”?
Integrér Workers med populære frontend-frameworks som React, Vue eller Svelte til dynamiske full-stack-apps. Du øver dig i Edge computing med Cloudflare Workers og Deno med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Edge computing med Cloudflare Workers og Deno?
Der kræves ingen tidligere erfaring. Edge computing med Cloudflare Workers og Deno på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Integration af frontend-frameworks”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Edge computing med Cloudflare Workers og Deno-lektion?
Ja. Alle Edge computing med Cloudflare Workers og Deno-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Workers Sites og Pages
- Integration af frontend-frameworks
- Databaseproxyer med Deno
- Server-side rendering på edge