Skip to main content
Bases de Svelte
Introduction
Réactivité
Props
Logique
Évènements
Liaisons
Classes et styles
Actions
Transitions
Svelte avancé
Réactivité avancée
Réutiliser du contenu
Mouvements
Liaisons avancées
Transitions avancées
API de contexte
Éléments spéciaux
<script module>
Next steps
Bases de SvelteKit
Introduction
Routing
Chargement de données
En-têtes et cookies
Modules partagés
Formulaires
Routes d’API
$app/state
Erreurs et redirections
SvelteKit avancé
Hooks
Options de page
Options de lien
Routing avancé
Chargement avancé
Variables d’environnement
Conclusion
Bases de SvelteKit Routes d’API Autres gestionnaires

Nous pouvons également ajouter des gestionnaires pour d’autres verbes HTTP. Ajouter une route /todo/[id] en créant un fichier src/routes/todo/[id]/+server.js ayant les gestionaires PUT et DELETE pour activer et supprimer les tâches, en utilisant les fonctions toggleTodo et deleteTodo importées depuis src/lib/server/database.js :

src/routes/todo/[id]/+server
import * as database from '$lib/server/database.js';

export async function PUT({ params, request, cookies }) {
	const { done } = await request.json();
	const userid = cookies.get('userid');

	await database.toggleTodo({ userid, id: params.id, done });
	return new Response(null, { status: 204 });
}

export async function DELETE({ params, cookies }) {
	const userid = cookies.get('userid');

	await database.deleteTodo({ userid, id: params.id });
	return new Response(null, { status: 204 });
}

Puisque nous n’avons pas besoin de renvoyer des données au navigateur, nous renvoyons un objet Response vide avec un status 204 No Content.

Nous pouvons maintenant interagir avec ce endpoint au sein de notre gestionnaire d’évènement :

src/routes/+page
<label>
	<input
		type="checkbox"
		checked={todo.done}
		onchange={async (e) => {
			const done = e.currentTarget.checked;

			await fetch(`/todo/${todo.id}`, {
				method: 'PUT',
				body: JSON.stringify({ done }),
				headers: {
					'Content-Type': 'application/json'
				}
			});
		}}
	/>
	<span>{todo.description}</span>
	<button
		aria-label="Marquer comme fait"
		onclick={async (e) => {
			await fetch(`/todo/${todo.id}`, {
				method: 'DELETE'
			});

			const todos = data.todos.filter((t) => t !== todo);

			data = { ...data, todos };
		}}
	></button>
</label>

Modifier cette page sur Github

précédent suivant
Gestionnaires POST
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<script>
	let { data } = $props();
</script>
 
<div class="centered">
	<h1>à faire</h1>
 
	<label>
		ajouter une tâche :
		<input
			type="text"
			autocomplete="off"
			onkeydown={async (e) => {
				if (e.key !== 'Enter') return;
 
				const input = e.currentTarget;
				const description = input.value;
 
				const response = await fetch('/todo', {
					method: 'POST',
					body: JSON.stringify({ description }),
					headers: {
						'Content-Type': 'application/json'
					}
				});
 
				const { id } = await response.json();
 
				const todos = [...data.todos, {
					id,
					description
				}];
 
				data = { ...data, todos };
 
				input.value = '';
			}}
		/>
	</label>
 
	<ul class="todos">
		{#each data.todos as todo (todo.id)}
			<li>
				<label>
					<input
						type="checkbox"
						checked={todo.done}
						onchange={async (e) => {
							const done = e.currentTarget.checked;
 
							// TODO gérer l'édition
						}}
					/>
					<span>{todo.description}</span>
					<button
						aria-label="Mark as complete"
						onclick={async (e) => {
							// TODO gérer la suppression
						}}
					></button>
				</label>
			</li>
		{/each}
	</ul>
</div>
 
<style>
	.centered {
		max-width: 20em;
		margin: 0 auto;
	}
 
	label {
		display: flex;
		width: 100%;
	}
 
	input[type="text"] {
		flex: 1;
	}
 
	span {
		flex: 1;
	}
 
	button {
		border: none;
		background: url(./remove.svg) no-repeat 50% 50%;
		background-size: 1rem 1rem;
		cursor: pointer;
		height: 100%;
		aspect-ratio: 1;
		opacity: 0.5;
		transition: opacity 0.2s;
	}
 
	button:hover {
		opacity: 1;
	}
</style>