Aplicación de notas adhesivas de deseos con Vue.js

Introducción

En este proyecto, aprenderás a crear una aplicación de "Nota Pegajosa de Deseos" utilizando Vue.js y la biblioteca Element-UI. El objetivo del proyecto es proporcionar una plataforma anónima y conveniente para que las personas expresen sus metas, ideales y aspiraciones de manera segura y confidencial.

👀 Vista previa

Se reportará el siguiente error cuando no se cumplan las condiciones de validación del campo:

Después de cumplir las condiciones y publicar el deseo, el efecto es el siguiente:

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar la estructura del proyecto y preparar los archivos y carpetas necesarios.
• Cómo renderizar el formulario completado en la pared de deseos.
• Cómo implementar la validación del formulario para asegurarse de que los campos de entrada cumplan con los criterios requeridos.
• Cómo manejar la función de envío y restablecimiento del formulario.
• Cómo implementar la funcionalidad de carga y vista previa de imágenes.

🏆 Logros

Después de completar este proyecto, podrás:

• Estructurar y organizar un proyecto de Vue.js.
• Utilizar la biblioteca Element-UI para crear formularios y manejar las interacciones de los usuarios.
• Implementar la validación del formulario utilizando las reglas de validación de Element-UI.
• Manejar la carga de archivos y las vistas previas de imágenes en una aplicación de Vue.js.
• Administrar el estado y actualizar la interfaz de usuario según las acciones del usuario.

Skills Graph

Configurar la estructura del proyecto

En este paso, configurarás la estructura del proyecto y prepararás los archivos y carpetas necesarios.

Abre la carpeta del proyecto en tu editor de código. La estructura de directorios es la siguiente:

├── 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

Donde:

• css es la carpeta donde se almacenan los estilos del proyecto para element-ui.
• images es la carpeta de imágenes.
• index.html es la página principal.
• js es la carpeta para las bibliotecas JavaScript dependientes del proyecto.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente para ver la página.

La página no realiza la validación del cuadro de entrada durante la inicialización y la publicación del deseo no aparece después de la entrada.

Renderizar el formulario completado en la pared de deseos

En este paso, modificarás el archivo index.html para renderizar el formulario completado en la pared de deseos.

1. Abre el archivo index.html en la carpeta del proyecto.
2. Encuentra el comentario TODO en el archivo index.html y, después de observar el problema en el código, descubrí que el código en v-for="(item,index) in []" tiene problemas y lo cambié al siguiente código:

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

El código en el elemento <div> con el atributo class="card" mostrará el nombre, el contenido y la imagen (si está disponible) del formulario completado en la pared de deseos.

Implementar la validación del formulario

En este paso, completarás la validación del formulario para asegurarte de que los campos de entrada cumplan con los criterios requeridos.

1. Abre el archivo index.html en la carpeta del proyecto.
2. Encuentra el objeto rules en la sección data de tu instancia de Vue para agregar el siguiente código:

rules: {
  // TODO
  name: [
    {
      required: true,
      message: "Por favor, ingrese su nombre",
      trigger: "blur"
    },
    {
      min: 2,
      max: 4,
      message: "La longitud debe estar entre 2 y 4 caracteres",
      trigger: "blur"
    }
  ],
  content: [
    {
      required: true,
      message: "Por favor, ingrese el contenido",
      trigger: "blur"
    },
    {
      min: 1,
      max: 30,
      message: "La longitud debe estar entre 1 y 30 caracteres",
      trigger: "blur"
    }
  ]
},

3. En las propiedades name y content del objeto rules, define las reglas de validación:

   • name: El campo de nombre es obligatorio y debe tener entre 2 y 4 caracteres de longitud.
   • content: El campo de contenido es obligatorio y debe tener entre 1 y 30 caracteres de longitud.

4. Con estas reglas de validación en lugar, el formulario ahora mostrará mensajes de error cuando los campos de entrada no cumplan con los criterios especificados.

5. Después de cumplir las condiciones y publicar el deseo, el efecto es el siguiente:

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.