Приложение для заметок желаний на Vue.js

Введение

В этом проекте вы научитесь создавать приложение "Желание на заметке" с использованием Vue.js и библиотеки Element-UI. Цель проекта - предоставить анонимную и удобную платформу для людей, чтобы они могли выражать свои цели, идеалы и мечты в безопасной и конфиденциальной форме.

👀 Предварительный просмотр

При несоответствии условиям проверки полей будет отображаться следующая ошибка:

После выполнения условий и публикации желания результат будет выглядеть так:

🎯 Задачи

В этом проекте вы научитесь:

• настраивать структуру проекта и готовить необходимые файлы и папки;
• отображать заполненную форму на стене желаний;
• реализовывать проверку формы, чтобы убедиться, что поля ввода соответствуют требуемым критериям;
• обрабатывать отправку формы и функцию сброса;
• реализовывать загрузку и предварительный просмотр изображений.

🏆 Достижения

После завершения этого проекта вы сможете:

• структурировать и организовать проект на Vue.js;
• использовать библиотеку Element-UI для создания форм и обработки взаимодействия с пользователем;
• реализовать проверку формы с использованием правил проверки Element-UI;
• обрабатывать загрузку файлов и предварительный просмотр изображений в приложении на Vue.js;
• управлять состоянием и обновлять интерфейс пользователя в зависимости от действий пользователя.

Skills Graph

Настройка структуры проекта

В этом шаге вы настроите структуру проекта и подготовите необходимые файлы и папки.

Откройте папку проекта в вашем редакторе кода. Структура директории следующая:

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

где:

• css - папка, в которой хранятся стили проекта для element-ui;
• images - папка с изображениями;
• index.html - главная страница;
• js - папка для зависимых от проекта JavaScript-библиотек.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите его вручную, чтобы увидеть страницу.

При инициализации страница не проверяет ввод в поле ввода, и запись желания не появляется после ввода.

Отобразить заполненную форму на стене желаний

В этом шаге вы измените файл index.html, чтобы отобразить заполненную форму на стене желаний.

1. Откройте файл index.html в папке проекта.
2. Найдите комментарий TODO в файле index.html и, изучив проблему в коде, я обнаружил, что код в v-for="(item,index) in []" имеет ошибку и изменил его на следующий код:

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

Код в элементе <div> с атрибутом class="card" будет отображать имя, содержание и изображение (если оно есть) заполненной формы на стене желаний.

Реализовать проверку формы

В этом шаге вы завершите проверку формы, чтобы убедиться, что поля ввода соответствуют требуемым критериям.

1. Откройте файл index.html в папке проекта.
2. Найдите объект rules в разделе data вашего экземпляра Vue и добавьте следующий код:

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. В свойствах name и content объекта rules определите правила проверки:

   • name: Поле имени является обязательным и должно быть от 2 до 4 символов в длину.
   • content: Поле содержания является обязательным и должно быть от 1 до 30 символов в длину.

4. С этими правилами проверки форма будет отображать сообщения об ошибках, когда поля ввода не соответствуют указанным критериям.

5. После выполнения условий и публикации желания результат будет выглядеть так:

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.