Créer une application de notes adhésives de souhaits avec Vue.js

Introduction

Dans ce projet, vous allez apprendre à créer une application "Billet-sticky de souhaits" à l'aide de Vue.js et de la bibliothèque Element-UI. Le projet vise à fournir une plateforme anonyme et pratique pour que les gens puissent exprimer leurs objectifs, leurs idéaux et leurs aspirations de manière sûre et confidentielle.

👀 Aperçu

Le message d'erreur suivant sera rapporté lorsque les conditions de validation du champ ne sont pas remplies :

Message d'erreur de validation du formulaire

Après avoir rempli les conditions et publié le souhait, l'effet est le suivant :

Effet terminé

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment configurer la structure du projet et préparer les fichiers et les dossiers nécessaires.
Comment afficher le formulaire terminé sur le mur des souhaits.
Comment implémenter la validation du formulaire pour vous assurer que les champs de saisie répondent aux critères requis.
Comment gérer la soumission et la fonction de réinitialisation du formulaire.
Comment implémenter la fonction de téléchargement et d'affichage d'aperçu d'image.

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Structurer et organiser un projet Vue.js.
Utiliser la bibliothèque Element-UI pour créer des formulaires et gérer les interactions utilisateur.
Implémenter la validation du formulaire à l'aide des règles de validation d'Element-UI.
Gérer les téléchargements de fichiers et les aperçus d'image dans une application Vue.js.
Gérer l'état et mettre à jour l'interface utilisateur en fonction des actions de l'utilisateur.

Configurer la structure du projet

Dans cette étape, vous allez configurer la structure du projet et préparer les fichiers et les dossiers nécessaires.

Ouvrez le dossier du projet dans votre éditeur de code. La structure de répertoire est la suivante :

├── css
│   ├── fonts
│   │   ├── element-icons.ttf
│   │   └── element-icons.woff
│   ├── index.css
│   └── wish.css
├── images
│   ├── bg.jfif
│   └── ding.png
├── index.html
└── js
    ├── index.js
    └── vue.min.js

Où :

css est le dossier où sont stockées les styles du projet pour element-ui.
images est le dossier d'images.
index.html est la page principale.
js est le dossier pour les bibliothèques JavaScript dépendantes du projet.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez manuellement pour voir la page.

La page ne valide pas la zone de saisie lors de l'initialisation et le message de souhait n'apparaît pas après la saisie.

Afficher le formulaire terminé sur le mur des souhaits

Dans cette étape, vous allez modifier le fichier index.html pour afficher le formulaire terminé sur le mur des souhaits.

Ouvrez le fichier index.html dans le dossier du projet.
Trouvez le commentaire TODO dans le fichier index.html et après avoir observé le problème dans le code, j'ai constaté que le code dans v-for="(item,index) in []" était problématique et l'ai modifié en le suivant :

<!-- TODO -->
<div
  class="card"
  :class="item.css"
  v-for="(item,index) in wishList"
  :key="index"
>
  <!--... -->
</div>

Le code dans l'élément <div> avec l'attribut class="card" affichera le nom, le contenu et l'image (le cas échéant) du formulaire terminé sur le mur des souhaits.

Mettre en œuvre la validation du formulaire

Dans cette étape, vous allez compléter la validation du formulaire pour vous assurer que les champs de saisie répondent aux critères requis.

Ouvrez le fichier index.html dans le dossier du projet.
Trouvez l'objet rules dans la section data de votre instance Vue pour ajouter le code suivant :

rules: {
  // TODO
  name: [
    {
      required: true,
      message: "Veuillez entrer votre nom",
      trigger: "blur"
    },
    {
      min: 2,
      max: 4,
      message: "La longueur doit être comprise entre 2 et 4 caractères",
      trigger: "blur"
    }
  ],
  content: [
    {
      required: true,
      message: "Veuillez entrer un contenu",
      trigger: "blur"
    },
    {
      min: 1,
      max: 30,
      message: "La longueur doit être comprise entre 1 et 30 caractères",
      trigger: "blur"
    }
  ]
},

Dans les propriétés name et content de l'objet rules, définissez les règles de validation :
- name : Le champ name est requis et doit avoir une longueur comprise entre 2 et 4 caractères.
- content : Le champ content est requis et doit avoir une longueur comprise entre 1 et 30 caractères.
Avec ces règles de validation en place, le formulaire affichera désormais des messages d'erreur lorsque les champs de saisie ne répondent pas aux critères spécifiés.