sveltekit est un représentant de la nouvelle génération de cadres d'application. Il créera bien sûr des applications pour vous, y compris le routage basé sur les fichiers, le déploiement et le rendu côté serveur que la prochaine a toujours fourni. Mais Sveltekit prend également en charge les dispositions imbriquées, les mutations côté serveur des données de page synchronisées et d'autres fonctionnalités que nous introduirons bientôt. Cet article vise à donner un aperçu de haut niveau de Sveltekit, dans l'espoir d'inspirer l'intérêt de quiconque n'a jamais utilisé Sveltekit. Ce sera un voyage facile. Si vous aimez ce que vous voyez, la documentation complète est ici. À certains égards, écrire cet article est difficile. Sveltekit est un framework d'application . Il existe pour vous aider à créer ... des applications. Cela rend la démonstration difficile. La construction d'une application entière dans un article de blog n'est pas possible. Nous utiliserons donc un peu notre imagination. Nous allons construire le squelette de l'application, en utilisant des espaces réservés d'interface utilisateur vides et des données statiques à code dur. L'objectif n'est pas de créer une application réelle, mais de vous montrer le mécanisme de fonctionnement de Sveltekit afin que vous puissiez créer votre propre application.
NPM Créez svelte @ Dernier Your-App-Name 
dans le terminal et répondez aux conseils de question. Assurez-vous de sélectionner "Skeleton Project", mais pour TypeScript, Eslint, etc., vous pouvez faire n'importe quel choix si vous le souhaitez.<https:>
<p> Une fois le projet créé, exécutez <code> npm i <https:> et <code> npm run dev <https:>, et le serveur de développement devrait commencer à fonctionner. Lancez <code> localhost: 5173 <https:> dans votre navigateur et vous obtiendrez la page d'espace réservé pour l'application Skeleton. <https:>
<h3> Route de base <https:>
<p> Veuillez noter le dossier <code> Routes <https:> sous <code> src <https:>. Il contient le code pour tous nos itinéraires. Il y a déjà un fichier <code> page.svelte <https:> qui contient le contenu du root <code> https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712 <https:> route. Peu importe où vous êtes dans la hiérarchie de fichiers, la page réelle de ce chemin est toujours nommée <code> page.svelte <https:>. Dans cet esprit, allons-y <code> https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list <https:>, <code> https://www.php.cn/link/29a9f8c8460e5e2be4edde557f83712DET . et <https:> https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712adminhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712paid-stat
<https:> Votre disposition de fichiers doit ressembler à ceci: <code>
<https:> Vous devriez être en mesure de naviguer en modifiant le chemin d'accès à la barre d'adresse du navigateur. <https:>
<p> Layout <https:>
<p> Nous voulons ajouter des liens de navigation à notre application, mais nous ne voulons certainement pas que leurs balises soient copiées sur chaque page que nous créons. Créons donc un fichier <https:> Layout.svelte <h3> dans la racine du dossier <https:> Routes <p>, que Sveltekit traitera comme un modèle global pour toutes les pages.Ajoutons-y du contenu: <https:>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <nav>
<ul>
<li>
<a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712"> Home <https:>
<https:>
<li>
<a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list"> liste de tâches <https:>
<https:>
<li>
<a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712adminhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712paid-status"> Statut du compte <https:>
<https:>
<li>
<a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712adminhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712user-settings"> Paramètres utilisateur <https:>
<https:>
<https:>
<https:>
<slot> <https:>
<style>
nav {
Color en arrière-plan: beige;
}
nav ul {
Affichage: flex;
}
li {
Style de liste: aucun;
marge: 15px;
}
un {
Décoration du texte: aucune;
Couleur: noir;
}
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712style> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p> une navigation de base et quelques styles de base. Ce qui est particulièrement important, c'est la balise <code> <slot> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>. Ce n'est pas la fente que vous utilisez avec les composants Web et l'ombre DOM, mais une fonctionnalité de Svelte qui indique où notre contenu est placé. Lorsque la page est rendue, le contenu de la page glissera dans l'emplacement où se trouve la fente. <em>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em> Maintenant, nous avons une navigation! Nous ne gagnerons aucune compétition de conception, mais nous n'avons pas essayé de le faire non plus. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Disposition imbriquée <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3> Et si nous voulons que toutes les pages de gestion héritent de la disposition normale que nous venons de construire et partagent également certains points communs de toutes les pages de gestion (mais uniquement des pages de gestion)? Pas de problème, nous ajoutons un autre <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3> Layout.svelte <p> au répertoire root <code> admin <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> et il sera hérité de tout ce qui est en dessous.Faisons ceci et ajoutons ceci: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> <div> Il s'agit d'une page d'administration <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712div>
<slot> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot>
<style>
div {
rembourrage: 15px;
marge: 10px 0;
Color d'arrière-plan: rouge;
Couleur: blanc;
}
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712style> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p> Nous ajoutons une bannière rouge indiquant qu'il s'agit d'une page d'administration, puis, comme auparavant, un <code> <slot> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot> indique où nous voulons que le contenu de la page se déroule. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> Notre disposition racine précédente sera rendu. Il y a une balise <p> <code> <slot> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot> dans la disposition racine. Le contenu de la disposition imbriquée entre dans la disposition racine <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> <code> <slot> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot>. Enfin, la mise en page imbriquée définit son propre <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> <code> <slot> où le contenu de la page sera rendu. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> Si vous accédez à la page d'administration, vous devriez voir une nouvelle bannière rouge: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> définir les données <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3> D'accord, rendons quelques données réelles - ou du moins voyons comment nous rendons certaines données réelles. Il existe de nombreuses façons de créer et de se connecter à une base de données. Ce message concerne Sveltekit, sans gérer DynamoDB, nous allons donc «charger» certaines données statiques. Cependant, nous utiliserons le même mécanisme que vous utilisez pour les données réelles pour les lire et les mettre à jour. Pour les applications Web réelles, remplacez la fonction qui renvoie les données statiques par la fonction qui connecte et interroge toute base de données que vous utilisez. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p>Let's create a very simple module in <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>libhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712datahttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712todoData.ts<p> which returns some static data along with manual delays to simulate the actual query. Vous verrez ce dossier <code> lib <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> importé ailleurs via <code> $ lib <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>. C'est ce que Sveltekit fournit ce dossier spécifique, et vous pouvez même ajouter votre propre alias.<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> Soit Todos = [
ot
{id: 2, titre: "Écrire un article de blog de chargement de chargement de données avancées Sveltekit", attribué: "Adam", tags: [1]},
{id: 3, titre: "Préparez le discours de renom
{id: 4, titre: "Correction de tous les bogues sveltekit", attribué: "riche", tags: [3]},
{id: 5, titre: "Modifier les articles de blog d'Adam", attribué: "Geoff", tags: [4]},
]]
Laissez les tags = [
{id: 1, nom: "contenu sveltekit", couleur: "ded"},
{id: 2, nom: "conférences", couleur: "violet"},
{id: 3, nom: "Sveltekit Development", couleur: "rose"},
{id: 4, nom: "CSS-Tricks Admin", couleur: "bleu"},
]]
Export const wait = async (montant) = & gt; Nouvelle promesse ((res) = & gt; setTimeout (res, montant ?? 100));
Exporter la fonction asynchrone getTodos () {
attendre wait ();
retourner todos;
}
Exporter la fonction asynchrone getTags () {
attendre wait ();
return tags.reduce ((recherche, tag) = & gt; {
Lookup [tag.id] = tag;
RETOUR Lookup;
}, {});
}
Exporter la fonction asynchrone getTodo (id) {
return todos.find ((t) = & gt; t.id == id);
} <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p> 一个函数返回我们待办事项的扁平数组、我们的标签的查找以及获取单个待办事项的函数 （我们将在 我们将在 详细信息 详细信息 页面中使用最后一个函数））。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3> 加载数据 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p> 我们如何将这些数据放入我们的 svelte 页面？方法有很多 ， 但现在 ， 让我们在 <code> Liste <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 文件夹中创建一个 <code> page.server.js <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 文件 ， 并将此内容放在其中 ： <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> import {getTodos, getTags} "$ libhttps: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712datahttps: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712todata";
Fonction d'exportation charge () {
const todos = getTodos ();
const tags = getTags ();
retour {
todos,
Tags,
};
} <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p> 我们定义了一个 <code> charge () <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 函数 ， 它会提取页面所需的数据。请注意 ， 我们 <em> 没有 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em> 等待对我们的 <code> getTodos <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 和 <code> getTags <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 异步函数的调用。这样做会创建一个数据加载瀑布 ， 因为我们在加载标签之前等待待办事项进入。相反 ， 我们从 我们从 <code> LOAD <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 返回原始 Promesse ， sveltekit 会执行必要的等待工作。<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Alors, comment accéder à ces données à partir du composant de page? Sveltekit fournit à notre composant un attribut Data <code> Data <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> avec les données. Nous allons accéder à nos tâches et balises à partir de celui-ci à l'aide des affectations réactives. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Notre composant de la page Liste ressemble maintenant à ceci. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> <script>
exporter des données de location;
$: ({todos, tags} = data);
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712script>
<table>
<thead>
<tr>
<th> tâche <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712th>
<th> Tags <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712th>
<th> attribué <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712th>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712tr>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712thead>
<tbody>
{#each todos as t}
<tr>
<td> {t.title} <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712td>
<td> {t.tags.map ((id) = & gt; tags [id] .name) .join (',')} <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712td>
<td> {t.assigned} <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712td>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712tr>
{https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712each}
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712tbody>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712table>
<style>
ème {
Texte-aligne: gauche;
}
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712style> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p> Cela devrait rendre notre liste de tâches! <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3> Group de mise en page <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p> Avant de passer à la page Détails et aux données mutées, jetons un coup d'œil à une fonctionnalité très intelligente de Sveltekit: <strong> Group de mise en page <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712strong>. Nous avons vu des dispositions imbriquées pour toutes les pages de gestion, mais que se passe-t-elle si nous voulons partager des dispositions entre les pages arbitraires au même niveau dans le système de fichiers? En particulier, que se passe-t-il si nous voulons simplement partager la mise en page entre notre page de liste et la page Détails? Nous avons déjà une disposition globale à ce niveau. Au lieu de cela, nous pouvons créer un nouveau répertoire, mais le nom doit être placé entre parenthèses, comme suit: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Nous avons maintenant un groupe de mise en page couvrant les pages de liste et détaille. Je l'ai nommé <code> (Todo-Management) <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>, mais vous pouvez le nommer comme vous le souhaitez.Il doit être clair que ce nom <em> n'affectera pas l'URL de la page dans le groupe de mise en page. L'URL restera la même; <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>
<code> nous <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> pouvons <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> Ajouter un fichier <p> disposition.svelte <em> et un peu de bannière idiote <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em> <code> qui dit "Hé, nous parvenons à faire des choses."Mais faisons quelque chose de plus intéressant. La disposition peut définir la fonction <code> charge () <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> pour fournir des données pour toutes les routes sous elle. Utilisons cette fonctionnalité pour charger nos balises - car nous utiliserons nos balises dans la page Détails - et la page de liste que nous avons déjà. En fait, il ne vaut certainement pas la peine de forcer le groupe de mise en page juste pour fournir une seule données; Mais pour ce post, il fournira une excuse dont nous avons besoin pour voir de nouvelles fonctionnalités de Sveltekit! <code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> Tout d'abord, allons dans le fichier <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> page.server.js <p> de la page de liste et supprimez-le. <code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> Import {getTodos} de "$ libhttps: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712datahtts: //www.php.cn/link/29a9f8c8460e5e2be4edde557f8371 a ";
Fonction d'exportation charge () {
const todos = getTodos ();
retour {
todos,
};
} <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> Notre page de liste devrait désormais produire une erreur car il n'y a pas d'objet <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre> Tags <p>. Résolvons ce problème en ajoutant un fichier <code> disposition.server.js <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> au groupe de mise en page, puis définissez une fonction <code> charg () <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> qui charge les balises. <code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> Import {getTags} de "$ libhttps: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712datahttps: //www.php.cn/link/29a9f8c8460e5e2be4edde557f8371 a ";
Fonction d'exportation charge () {
const tags = getTags ();
retour {
Tags,
};
} <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> De cette façon, notre page de liste a été rendue à nouveau! <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p> Nous chargeons des données à partir de plusieurs emplacements <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h4> Concentrons-nous sur ce qui se passe ici: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h4>
<p>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> Nous définissons une fonction <ul> charge () <li> pour le groupe de mise en page, et nous la plaçons dans <code> Layout.server.js <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>. <code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> Cela fournit des données pour toutes les pages <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li> desservant la disposition - dans ce cas, cela signifie nos pages de liste et de détails.<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<li> Notre page de liste définit également une fonction <code> Load () <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> située dans son fichier <code> page.server.js <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<li> sveltekit effectue du levage de lourds, fusionnant les résultats de ces sources de données ensemble et fournissant les deux dans <code> data <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712ul>
<h3> Détails Page <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p> Nous utiliserons la page Détails pour modifier la liste de tâches. Tout d'abord, ajoutons une colonne à la page de liste qui se lie à la page Détails de la chaîne de requête contenant l'ID à tâches. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> <td> <a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712details?id={t.id}"> modifier <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712a> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712td> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p> Créons maintenant la page Détails. Tout d'abord, nous ajouterons un chargeur pour obtenir l'élément de tâche que nous modifions. Créez un <code> page.server.js <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> dans <code> https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712details <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> avec le contenu suivant: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> Import {getTodo} de "$ libhttps: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712datahttps: //www.php.cn/link/29a9f8c8460e5e2be4edde557f8371 a ";
Fonction d'exportation charge ({url}) {
const id = url.searchParams.get ("id");
const todo = getTodo (id);
retour {
faire,
};
} <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p> Notre chargeur est livré avec l'attribut <code> url <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> à partir de laquelle nous pouvons extraire les valeurs de chaîne de requête. Cela facilite la recherche de la liste de tâches que nous modifions. Rendons la tâche et modifions sa fonction. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> sveltekit a une excellente mutabilité intégrée tant que vous utilisez le formulaire. Vous vous souvenez du formulaire? Voici notre page de détails. Pour plus de simplicité, j'ai omis des styles.<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> <script>
import {améliorer} de "$ apphttps: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712forms";
exporter des données de location;
$: ({todo, tags} = data);
$: currenttags = todo.tags.map ((id) = & gt; tags [id]);
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712script>
<div>
{#each currentTags comme tag}
{tag.name}
{https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712each}
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712div>
<form method="POST" action="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712editTodo" use:enhance>
<input type="hidden" name="id" value={todo.id} https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712>
<input type="text" name="title" bind:value={todo.title} https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712>
<button type="submit"> Enregistrer <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712button>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712form> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p> Nous obtenons l'étiquette du chargeur du groupe de mise en page comme avant et les éléments de tâche du chargeur de la page. Nous obtenons l'objet TAG réel à partir de la liste TAIT des ID de balise, puis rendons tout. Nous créons un formulaire avec une entrée d'ID masquée et une entrée de titre réelle. Nous affichons l'étiquette, puis fournissons un bouton pour soumettre le formulaire. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Si vous remarquez <code> utiliser: améliorer <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>, il s'agit simplement de dire à Sveltekit d'utiliser une amélioration progressive et un AJAX pour soumettre notre formulaire. Vous pouvez toujours l'utiliser. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h4> Comment pouvons-nous enregistrer nos modifications? <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h4>
<p> Remarquez le <code> action = "? Https: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712ettodo" <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> attribut sur le formulaire lui-même? Cela nous indique où nous voulons soumettre les données modifiées. Pour notre cas, nous voulons nous soumettre à une <code> edittodo <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> "action".<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Créons-le en ajoutant les éléments suivants au fichier <code> page.server.js <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> que nous fournissons déjà pour "les détails" (le fichier a actuellement une fonction <code> charger () <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> pour obtenir nos éléments de tâche): <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> import {redirect} depuis "@sveltejshttps: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712kit";
import {updateTodo, attendre} de "$ libhttps: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712datahtts: //www.php.cn/link/29a9f8c8460e5e2be4edde57f8371 "
https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712 ...
Exportation const actions = {
async edittodo ({request}) {
const formData = attendre request.formData ();
const id = formData.get ("id");
const NewTitle = formData.get ("Title");
attendre l'attente (250);
attendre updateTodo (id, newtitle);
Throw Redirect (303, "https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list");
},
}; <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
L'action <p> Form nous fournit un objet <code> request <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> qui donne accès à notre <code> formdata <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> qui a une méthode <code> get <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> pour nos différents champs de formulaire. Nous avons ajouté une entrée de valeur d'ID masquée afin que nous puissions l'obtenir ici pour trouver les tâches que nous modifions. Nous simulons le retard, appelons la nouvelle méthode <code> updateToDo () <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> et redirigez l'utilisateur vers le <code> https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> page. La méthode <code> updateToDo () <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> met simplement à jour nos données statiques; <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> Exportation de la fonction asynchrone UpdateTodo (id, newTitle) {
const todo = todos.find ((t) = & gt; t.id == id);
Object.assign (toDo, {title: newTitle});
} <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p> essayons-le. Nous allons d'abord sur la page de la liste: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Maintenant, cliquez sur le bouton Modifier pour l'un des éléments de tâche pour afficher la page d'édition dans <code> https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712details <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>.<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Nous ajouterons un nouveau titre: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Maintenant, cliquez sur Enregistrer.Cela devrait nous ramener au <code> https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> et appliquer le nouveau titre à faire. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Comment le nouveau titre est-il apparu? C'est automatique. Une fois que nous avons redirigé vers le <code> https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>, sveltekit réduira automatiquement tous nos chargeurs comme d'habitude. Il s'agit d'un progrès clé que les cadres d'application de nouvelle génération comme Sveltekit, Remix et les 13 prochaines offres. Au lieu de vous donner un moyen pratique de rendre des pages, puis bonne chance pour obtenir des points de terminaison dont vous avez peut-être besoin pour mettre à jour vos données, ils intègrent la mutation de données au chargement des données, permettant aux deux de travailler ensemble. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> certaines choses que vous voudrez peut-être savoir ... <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> <strong> Cette mise à jour de mutation ne semble pas trop impressionnante. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712strong> Le chargeur fonctionnera à nouveau pendant que vous naviguerez. Que se passe-t-il si nous n'ajoutons pas de redirection dans l'action du formulaire, mais que nous restions plutôt sur la page actuelle? Sveltekit effectuera des mises à jour dans les opérations de formulaire comme précédemment, mais réduira toujours tous les chargeurs pour la page actuelle, y compris celles de la mise en page de la page. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> <strong> Pouvons-nous avoir un moyen plus ciblé d'invalider nos données? <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712strong> Par exemple, nos balises ne sont pas modifiées, donc dans la vraie vie, nous ne voulons pas les remettre en place. Oui, tout ce que je vous montre, c'est le comportement de formulaire par défaut dans sveltekit. Vous pouvez désactiver le comportement par défaut en fournissant un rappel à <code> utiliser: améliorer <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>. Sveltekit fournit ensuite une fonction de défaillance manuelle. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> <strong> Le chargement des données à chaque fois que vous naviguez peut être coûteux et inutile. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712strong> Puis-je mettre en cache ces données comme un outil comme React-Queery? Oui, c'est juste différent. Sveltekit vous permet de définir (puis de respecter) des en-têtes de contrôle de cache que le Web a fourni. Je présenterai le mécanisme de défaillance du cache dans un article ultérieur. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Nous utilisons des données statiques tout au long de l'article et modifions les valeurs en mémoire. Si vous devez tout restaurer et recommencer, arrêtez et redémarrez le processus de nœud <code> NPM Run Dev <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3> Résumé <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p> Nous venons de toucher la surface de Sveltekit, mais j'espère que vous avez vu quelque chose qui suffit pour vous exciter.Je ne me souviens pas de la dernière fois que j'ai trouvé le développement Web si intéressant. Avec des fonctionnalités prêtes à l'emploi comme le regroupement, le routage, le SSR et le déploiement, je peux passer plus de temps à coder que la configuration. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Voici quelques ressources supplémentaires que vous pouvez utiliser comme les prochaines étapes pour apprendre Sveltekit: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<ul>
<li> annoncé Sveltekit 1.0 (blog svelte) <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<li> Sveltekit Débutant (Vercel) <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<li> Sveltekit Documentation <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712ul></style></https:></slot></https:></https:></https:></https:></a>
</li></https:></https:></a>
</li></https:></https:></a>
</li></https:></https:></a>
</li>
</ul></nav></pre><div class="contentsignin">Copier après la connexion</div></div></https:></p></https:>
</h3></https:></p></https:></p></https:></https:>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment utiliser la jointure gauche
Comment vérifier l'état du port avec netstat
La mémoire ne peut pas être une solution écrite
que signifie pm
Comment augmenter la vitesse de téléchargement
méthode de réglage chinois vscode
Toutes les utilisations des serveurs cloud
Comment résoudre le problème selon lequel Tomcat ne peut pas afficher la page
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
