Comprendre les modèles et les associations Mirage JS (partie 1)

Mirage JS contribue à simplifier le développement frontal moderne en offrant la capacité de front -des ingénieurs finaux pour concevoir des applications sans compter sur un service back-end réel. Dans cet article, je vais adopter une approche indépendante du cadre pour vous montrer les modèles et les associations Mirage JS. Si vous n'avez pas entendu parler de Mirage JS, vous pouvez lire mon article précédent dans lequel je le présente et également l'intégrer au cadre progressif Vue.js.

Remarque: Ces Les séries de plongée sont indépendantes du cadre, ce qui signifie que nous examinerions Mirage JS lui-même et non l'intégration dans un cadre frontal.

Modèles

Mirage JS a emprunté certains termes et concepts qui sont bien connus des back-end Cependant, étant donné que la bibliothèque serait principalement utilisée par les équipes frontales, il est approprié d'apprendre ce que sont ces termes et concepts. Commençons par ce que sont les modèles.

Que sont les modèles?

Les modèles sont des classes qui définissent les propriétés d'une donnée particulière à stocker dans une base de données. Par exemple, si nous avons un modèle utilisateur, nous définirions les propriétés d'un utilisateur pour notre application, telles que le nom, l'e-mail, etc. Donc, chaque fois que nous voulons créer un nouvel utilisateur, nous utilisons le modèle utilisateur que nous avons défini.

Création de modèles dans Mirage JS

Bien que Mirage JS vous permette de créer des données de maquette manuellement, l'utilisation de la classe Mirage Model vous donnera beaucoup d'expérience de développement impressionnante car vous auriez à portée de main, la persistance des données.

Les modèles enveloppent votre base de données et vous permettent de créer des relations qui sont vraiment utiles pour renvoyer différentes collections de données à votre application.

Mirage utilise une base de données en mémoire pour stocker les entrées que vous effectuez à l'aide de son modèle. De plus, sans modèles, vous n'aurez pas accès aux associations que nous examinerions un peu.

Donc, pour créer un modèle dans Mirage JS, vous devez d'abord importer la classe Model de Mirage JS comme ceci :

 importez {Server, Model} depuis 'miragejs'

Ensuite, dans nos options ‘Serveur’, nous l’utilisons comme suit:

 let server = new Server ({
  des modèles: {
    utilisateur: modèle,
  }

Remarque : Si vous ne savez pas ce qu'est le serveur Mirage JS, c'est ainsi que Mirage JS intercepte les requêtes réseau. Je l'ai expliqué en détail dans mon précédent article .

D'après ce qui précède, vous pouvez voir que nous créons une instance de modèle utilisateur. Cela nous permet de conserver les entrées pour ledit modèle.

Création d'entrées

Pour créer de nouvelles entrées pour notre modèle utilisateur, vous devez utiliser la classe de schéma comme suit:

 let user = schema.users.create ({nom: "Harry Potter"})

Remarque : Mirage JS pluralise automatiquement vos modèles pour former le schéma. Vous pouvez également voir que nous ne décrivons pas explicitement à l'avance les propriétés de l'instance de modèle utilisateur. Cette approche permet la création rapide d'entrées et la flexibilité dans l'ajout de champs pour lesdites entrées.

Vous créerez probablement des instances de votre modèle dans la méthode seeds () de votre instance de serveur, donc dans ce scénario, vous créeriez une nouvelle instance d'utilisateur à l'aide de la méthode create () de l'objet server comme ceci:

 let server = new Server ({
  des modèles: {
    utilisateur: modèle
  },

  graines (serveur) {
    server.create ("utilisateur", {nom: "Harry Potter"});
});

Dans le code ci-dessus, j'ai ajouté de manière redondante l'extrait de code pour la création du serveur et du modèle afin d'établir un certain contexte.

Pour voir un serveur Mirage JS pleinement fonctionnel, consultez mon article précédent sur le même sujet ou consultez ce dépôt .

Accès aux propriétés et relations

Vous pouvez accéder aux propriétés ou aux champs d'une instance de modèle à l'aide de la notation par points. Donc, si nous voulons créer une nouvelle instance utilisateur pour le modèle utilisateur, utilisez ceci:

 let user = schema.users.create ({name: "Hermione Granger"})

Nous pouvons également accéder au nom de l'utilisateur simplement en utilisant ce qui suit:

 user.name
// Hermione Granger

En outre, si l'instance créée a une relation appelée ‘posts’ par exemple, nous pouvons y accéder en utilisant:

 user.posts
// Renvoie toutes les publications appartenant à l'utilisateur

Recherche d'une instance

Supposons que vous ayez créé trois instances du modèle utilisateur et que vous souhaitiez trouver la première, vous pouvez simplement utiliser le schéma sur ce modèle comme suit:

 let firstUser = schema.users .find (1)
// Renvoie le premier utilisateur

Autres propriétés d'instance de modèle

Mirage expose quelques propriétés utiles sur les instances de modèle. Examinons-les de plus près.

associations

Vous pouvez obtenir les associations d'une instance particulière en utilisant la propriété associations .

 let harry = schema.users.create ({name : "Harry Potter"})
user.associations
// retournerait les associations de cette instance le cas échéant

Selon les documents Mirage JS, ce qui précède retournerait un hachage des relations appartenant à cette instance.

attrs

Nous pouvons également obtenir tous les champs ou attributs d'une instance particulière en utilisant la propriété attrs d'un instance de modèle comme ceci:

 harry.attrs
// {nom: "Harry Potter"}

Méthodes

destroy ()

Cette méthode supprime les instances auxquelles elle est appelée de la base de données Mirage JS.

 harry.destroy ()

isNew ()

Cette méthode retourne vrai si le modèle n'a pas encore été conservé dans la base de données. L'utilisation de la méthode create du schéma enregistrerait toujours une instance dans la base de données Mirage JS, donc isNew () retournerait toujours false. Cependant, si vous utilisez la nouvelle méthode pour créer une nouvelle instance et que vous n'avez pas appelé save () dessus, isNew () renverrait true.

Voici un exemple :

 let ron = schema.users.new ({name: "Ronald Weasley"})

ron.isNew ()

// vrai

ron.save ()

ron.isNew ()

// faux

isSaved ()

C'est tout à fait le contraire de la méthode isNew () . Vous pouvez l'utiliser pour vérifier si une instance a été enregistrée dans la base de données. Elle renvoie true si l'instance a été enregistrée ou false si elle n'a pas été enregistrée.

reload ()

Cette méthode recharge une instance à partir de la base de données Mirage Js. Notez que cela ne fonctionne que si cette instance a été enregistrée dans la base de données. Il est utile d’obtenir les attributs réels dans la base de données et leurs valeurs si vous en avez changé précédemment. Par exemple:

 let headmaster = schema.users.create ({name: “Albus Dumbledore”})

headmaster.attrs
// {id: 1, nom: "Albus Dumbledore"}

headmaster.name = "Severus Snape"

headmaster.name
// Severus Rogue

headmaster.reload ()

headmaster.name

// Albus Dumbledore

save ()

Cette méthode fait ce qu'elle dit, c'est-à-dire qu'elle enregistre ou crée un nouvel enregistrement dans la base de données. Vous n’avez besoin de l’utiliser que si vous avez créé une instance sans utiliser la méthode create () . Voyons cela en action.

 let headmaster = schema.users.new ({name: “Albus Dumbledore”})

headmaster.id
// nul

headmaster.save ()

headmaster.name = "Severus Snape"
// La base de données n'a pas encore été mise à jour pour refléter le nouveau nom

headmaster.save ()
// la base de données a été mise à jour

headmaster.name

// Severus Rogue

toString ()

Cette méthode renvoie une représentation sous forme de chaîne simple du modèle et de l'identifiant de cette instance particulière. En utilisant notre instance headmaster ci-dessus du modèle utilisateur, lorsque nous appelons:

 headmaster.toString ()

Nous obtenons:

 // «modèle: utilisateur: 1»

update ()

Cette méthode met à jour une instance particulière dans la base de données. Un exemple serait:

 let headmaster = schema.users.find (1)
headmaster.update ("nom", "Rubeus Harris")

Remarque : La mise à jour () prend deux arguments. Le premier est la clé qui est une chaîne et le deuxième argument est la nouvelle valeur sous laquelle vous souhaitez la mettre à jour.

Associations

Depuis que nous connaissons maintenant bien les modèles et comment nous les utilisons dans Mirage JS, regardons son homologue – les associations.

Les associations sont simplement des relations entre vos modèles. La relation peut être un-à-un ou un-à-plusieurs.

Les associations sont très courantes dans le développement backend, elles sont puissantes pour obtenir un modèle et ses modèles associés, par exemple, disons que nous voulons un utilisateur et tout son postes, les associations sont utilisées dans de tels scénarios. Voyons comment nous avons configuré cela dans Mirage JS.

Une fois que vous avez défini vos modèles, vous pouvez créer des relations entre eux à l'aide des assistants d'association Mirage JS

Mirage a les assistants d'associations suivants

• hasMany () [19659079] utiliser pour définir des relations entre plusieurs
• appartientTo ()
utiliser pour définir des relations entre plusieurs

Lorsque vous utilisez l'un des assistants ci-dessus, Mirage JS injecte des propriétés et des méthodes utiles dans l'instance de modèle. Examinons un scénario typique de publications, d'auteurs et de commentaires. On pourrait en déduire qu'un auteur particulier peut également avoir plus d'un article de blog, un article particulier peut avoir des commentaires associés. Voyons donc comment nous pouvons simuler ces relations avec les assistants de l'association Mirage JS:

appartient à ()

Aide à l'importation

Importez d'abord le appartient à

 import {Serveur, modèle, appartient à} de 'miragejs'

Ensuite, nous créons nos modèles et utilisons la méthode extend pour ajouter nos relations comme ceci

 nouveau serveur ({
  des modèles: {
    post: Model.extend ({
      auteur: appartient à (),
    }),

    auteur: Model,
  },
})

Ce qui précède définit une relation biunivoque entre le modèle de post et le modèle d'auteur. Pour ce faire, l'appartenant appartient à ajoute plusieurs propriétés et méthodes aux modèles concernés. Par conséquent, nous pouvons maintenant faire ce qui suit:

 post.authorId // renvoie l'ID auteur du message
post.author // Instance d'auteur
post.author = anotherAuthor
post.newAuthor (attrs) // crée un nouvel auteur sans enregistrer dans la base de données
post.createAuthor (attrs) // crée un nouvel auteur et enregistre dans la base de données

hasMany ()

Cet assistant comme son homologue appartient à doit être importé de Mirage JS avant utilisation, donc:

 import {Server, Model, hasMany} de 'miragejs'

Ensuite, nous pouvons continuer à créer nos relations to-many:

 modèles: {
    post: Model.extend ({
      commentaires: hasMany (),
    }),

    commentaire: Model,
  },
})

Comme l'appartenance à (), l'aide hasMany () ajoute également plusieurs propriétés et méthode automatiquement aux modèles concernés:

 post.commentIds // [1, 2, 3]
post.commentIds = [2, 3] // met à jour la relation
post.comments // tableau de commentaires connexes
post.comments = [comment1, comment2] // met à jour la relation
post.newComment (attrs) // nouveau commentaire non enregistré
post.createComment (attrs) // nouveau commentaire enregistré (comment.postId est défini)

L'extrait ci-dessus est adapté de la documentation bien écrite de Mirage JS

Conclusion

Mirage JS a pour but de faire de la moquerie de notre back-end un jeu d'enfant dans le développement frontal moderne. Dans cette première partie de la série, nous avons examiné les modèles et les associations / relations et comment les utiliser dans Mirage JS. Restez à l'écoute pour les prochaines parties!

(dm, ra, il)