Aplicativo de Notas Adesivas de Desejos com Vue.js

Introdução

Neste projeto, você aprenderá como criar uma aplicação "Wish Sticky Note" usando Vue.js e a biblioteca Element-UI. O projeto visa fornecer uma plataforma anônima e conveniente para que as pessoas expressem seus objetivos, ideais e aspirações de maneira segura e confidencial.

👀 Pré-visualização

O seguinte erro será relatado quando as condições de validação do campo não forem atendidas:

Após cumprir as condições e postar o desejo, o efeito é o seguinte:

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar a estrutura do projeto e preparar os arquivos e pastas necessários.
• Como renderizar o formulário preenchido na parede de desejos.
• Como implementar a validação do formulário para garantir que os campos de entrada atendam aos critérios exigidos.
• Como lidar com o envio do formulário e a funcionalidade de reset.
• Como implementar o upload e a visualização de imagens.

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Estruturar e organizar um projeto Vue.js.
• Usar a biblioteca Element-UI para criar formulários e lidar com interações do usuário.
• Implementar a validação do formulário usando as regras de validação do Element-UI.
• Lidar com uploads de arquivos e visualizações de imagens em uma aplicação Vue.js.
• Gerenciar o estado e atualizar a interface do usuário com base nas ações do usuário.

Configurar a Estrutura do Projeto

Nesta etapa, você configurará a estrutura do projeto e preparará os arquivos e pastas necessários.

Abra a pasta do projeto no seu editor de código. A estrutura de diretórios é a seguinte:

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

Onde:

• css é a pasta onde os estilos do projeto para element-ui são armazenados.
• images é a pasta de imagens.
• index.html é a página principal.
• js é a pasta para as bibliotecas JavaScript dependentes do projeto.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

A página não faz a validação da caixa de entrada durante a inicialização e a postagem do desejo não aparece após a entrada ser postada.

Renderizar o Formulário Completo na Wish Wall

Nesta etapa, você modificará o arquivo index.html para renderizar o formulário preenchido na parede de desejos.

1. Abra o arquivo index.html na pasta do projeto.
2. Encontre o comentário TODO no arquivo index.html e, após observar o problema no código, descobri que o código em v-for="(item,index) in []" é problemático e o alterei para o seguinte código:

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

O código no elemento <div> com o atributo class="card" exibirá o nome, o conteúdo e a imagem (se disponível) do formulário preenchido na parede de desejos.

Implementar a Validação do Formulário

Nesta etapa, você completará a validação do formulário para garantir que os campos de entrada atendam aos critérios exigidos.

1. Abra o arquivo index.html na pasta do projeto.
2. Encontre o objeto rules na seção data da sua instância Vue para adicionar o seguinte código:

rules: {
  // TODO
  name: [
    {
      required: true,
      message: "Please input your name",
      trigger: "blur"
    },
    {
      min: 2,
      max: 4,
      message: "Length should be between 2 and 4 characters",
      trigger: "blur"
    }
  ],
  content: [
    {
      required: true,
      message: "Please input content",
      trigger: "blur"
    },
    {
      min: 1,
      max: 30,
      message: "Length should be between 1 and 30 characters",
      trigger: "blur"
    }
  ]
},

3. Nas propriedades name e content do objeto rules, defina as regras de validação:

   • name: O campo nome é obrigatório e deve ter entre 2 e 4 caracteres.
   • content: O campo conteúdo é obrigatório e deve ter entre 1 e 30 caracteres.

4. Com essas regras de validação em vigor, o formulário agora exibirá mensagens de erro quando os campos de entrada não atenderem aos critérios especificados.

5. Após cumprir as condições e postar o desejo, o efeito é o seguinte:

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.