Apothegme Auteur Soumettre une tentative de modification de src/ routes/index. svelte

Une grande partie de index.svelte reste le même. Notez que je a commenté l’exportation du module dans l’en-tête de la page afin qu’il ne soit plus pré-rendu. (Parmi les superpouvoirs de SvelteKit, il y a sa capacité à pré-rendre totalement les pages qui ne frappent pas l’arrière-plan. Nous devons désactiver cette fonctionnalité car notre page touchera le back-end.)

Le reste des modifications s’engage à fournir un aspect aimable avec 2 champs. Lorsque le formulaire est soumis, nous le marshalons dans JSON et l’envoyons via un POST à ​​la racine endpoint (« / ») au moyen de bring.

Traitement de la fonction post

La cal API POST l sera traité en arrière-plan par src/routes/index. js, par n’importe quelle fonction vivant sous le nom  » post.  » Comptons-nous là-dessus maintenant. Le Listing 2 révèle le corps de index.js.

Listing 2. index.js import clientPromise from './ lib/mongo'; exporter la fonction asynchrone post () const dbConnection = attendre clientPromise ; const db = dbConnection.db(); const collection = db.collection('apothegm'); let apothegm = attendre request.json(); const dbApothegm = attendre collection.insertOne(apothegm); return

La toute première chose que nous voyons dans le Listing 2 est une importation dans une bibliothèque d’assistance que nous allons vérifier dans une minute. Vient ensuite la fonction post elle-même, qui prend un argument de requête par déstructuration à partir du framework SvelteKit. Cet objet de requête attend que nous devions traiter une requête HTTP.

Dans notre cas, nous ouvrons une connexion à la base de données en utilisant l’assistant de base de données, obtenons un pointeur vers la collection  » apothegm « , puis récupérons le contenu du corps frontal au moyen de la requête wait Approche .json().

La méthode place le corps de la demande dans la collection de la base de données et renvoie un statut « tout va bien » de 200.

Le port MongoDB

Maintenant, regardons le /src/lib/mongo. js, affiché dans Noting 3, que nous utilisons pour accéder à la base de données. Il s’agit principalement de l’assistant canonique proposé par les documents MongoDB, avec un léger ajustement. Notez également que, pour la fonction de la présentation, j’ai choisi d’inclure l’URL de la base de données directement dans le fichier. Ne faites pas ça dans la réalité ! C’est une faille de sécurité ostentatoire. Pour une application réelle, vous auriez besoin d’externaliser l’URL dans une variable d’environnement.

Listing 3. Lien vers MongoDB (mongo.js) import dotenv from 'dotenv'; dotenv.config(); import from 'mongodb';// const uri = process.env [' MONGODB_URI'];// ** Ne faites pas cela dans la vraie vie **: const uri = "mongodb srv://:@cluster0.foobar.mongodb .net/myFirstDatabase?retryWrites=true&w=majority "; const alternatives= let client let clientPromise if(! uri)throw new Error('Please include your Mongo URI to.env.local') if (process.env ['NODE_ENV']==='advancement' ) else // Export une garantie MongoClient étendue au module.// En faisant cela dans un module différent,// le client peut être partagé à travers les fonctions. exporter la promesse client par défaut ; Cet assistant est assez simple. La plus grande complexité réside dans

la gestion des environnements de développement et de production. Passons à l’établissement de la base de données. MongoDB Atlas : la base de données en tant que service MongoDB est une base de données orientée document,

l’un des premiers et des plus populaires datastores NoSQL.

Atlas est le service cloud géré par MongoDB, ou base de données en tant que service (DBaaS). MongoDB Atlas vous permet d’accéder à une base de données hébergée par MongoDB et de l’utiliser au moyen d’une API. Gardez à l’esprit que pour cette prochaine étape, vous devrez créer un compte MongoDB Atlas gratuit.

L’inscription est simple et rapide. Lorsque vous avez un nouveau compte, vous serez redirigé vers le panneau de contrôle, où vous créerez un nouveau projet en appuyant sur le bouton Nouveau projet. Ensuite, il vous sera demandé de nommer le nouveau travail, que j’ai

appelé apothegm-foundry. Vous aurez également la possibilité d’ajouter des utilisateurs et des approbations, mais vous pouvez ignorer cette offre puisque vous avez été immédiatement ajouté. Confirmez le projet en appuyant sur Produire un projet. Ajouter une base de données Un travail est un seau pour les bases de données. Ajoutons maintenant une base de données encliquant sur Créer une base de données