PéldaprogramokTananyagPortfólió követelményekFrontend tematikaSzámonkérésUTF-8 Karakterek válogatás Vite - Új projekt REST API SvelteKit + Load / Actions SvelteKit/Drizzle/Lucia/Turso SvelteKit FullStack Video tananyag
REST API működése
A kliensek ...
- a GET metódus segítségével érik el az erőforrásokat, amelyek a kiszolgáló megadott URL-címén találhatók, paramétereket küldhetnek a RESTful API kérésben, hogy utasítsák a szervert az adatok szűrésére a küldés előtt.
- a POST metódus segítségével küldik el az adatokat a szervernek. Tartalmazza az elküldendő adatot a kéréssel együtt.
- a PUT és , PATCH metódusok segítségével tudják módosítani a szerveren meglévő erőforrásokat.
- a DELETE metódus segítségével törölhetnek egy erőforrást. Például termék törléséhez a webshopból a DELETE metódust használják.
REST API
Kezdeti adatok lekérdezése a szerverről (GET metódus):
1 
//App.js <script></sript> -be:
2 
import { onMount } from "svelte";
3 
onMount(async () => {
4 
    let data = await fetch('https://tomuwhu.github.io/orarend_generator_svelte/tanarok.json').then(v =>v.json())
5 
    console.log(data)
6 
})
Adat küldése szerverre: POST (PUT, PATCH, DELETE) metódus:
1 
async () => { //Svelte eseménybe pl.: on:click={async () => { ...
2 
  ...
3 
  const answer = await fetch('http://localhost:3000/post/', {
4 
    method: 'POST', //v. PUT v. PATCH v. DELETE
5 
    headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
6 
    body: JSON.stringify({a: 1, b: 'Textual content'})
7 
  }).then(v => v.json())
8 
  console.log(answer)
9 
  ...
10 
}
Express Server API:
1 
import express from 'express'
2 
import cors from 'cors'
3 
const app = express()
4
5 
app.use(express.json())
6 
app.use(cors())
7
8 
app.post('/post', (req, res) => {
9 
    console.log(req.body)
10 
    res.send(JSON.stringify({x: 1, y: 2}))
11 
})
12
13 
app.get('/', (req, res) => {
14 
  res.send('Hello World!')
15 
})
16
17 
app.listen(3000)