Wish Sticky Note App with Vue.js

Introduction

In this project, you will learn how to create a "Wish Sticky Note" application using Vue.js and the Element-UI library. The project aims to provide an anonymous and convenient platform for people to express their goals, ideals, and aspirations in a safe and confidential manner.

👀 Preview

The following error will be reported when the field validation conditions are not met:

After fulfilling the conditions and posting the wish, the effect is as follows:

🎯 Tasks

In this project, you will learn:

• How to set up the project structure and prepare the necessary files and folders.
• How to render the completed form on the wish wall.
• How to implement form validation to ensure that the input fields meet the required criteria.
• How to handle form submission and reset functionality.
• How to implement image upload and preview functionality.

🏆 Achievements

After completing this project, you will be able to:

• Structure and organize a Vue.js project.
• Use the Element-UI library to create forms and handle user interactions.
• Implement form validation using the Element-UI validation rules.
• Handle file uploads and image previews in a Vue.js application.
• Manage state and update the UI based on user actions.

Skills Graph

Set Up the Project Structure

In this step, you will set up the project structure and prepare the necessary files and folders.

Open the project folder in your code editor. The directory structure is as follows:

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

Where:

• css is the folder where the project styles for element-ui are stored.
• images is the image folder.
• index.html is the main page.
• js is the folder for the project's dependent JavaScript libraries.

Click on Go Live button in the bottom right corner of WebIDE, to run the project.

Next, open "Web 8080" on the top of the VM and manually refresh it to see the page.

The page doesn't do validation of the input box during initialization and the wishing post doesn't appear after the input is posted.

Render the Completed Form on the Wish Wall

In this step, you will modify the index.html file to render the completed form on the wish wall.

1. Open the index.html file in the project folder.
2. Find the TODO comment in the index.html file and after observing the problem in the code, I found that the code in v-for="(item,index) in []" is problematic and changed it to the following code:

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

The code in the <div> element with the class="card" attribute will display the name, content, and image (if available) of the completed form on the wish wall.

Implement Form Validation

In this step, you will complete the form validation to ensure that the input fields meet the required criteria.

1. Open the index.html file in the project folder.
2. Find the rules object in the data section of your Vue instance to add the following code:

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. In the name and content properties of the rules object, define the validation rules:

   • name: The name field is required and must be between 2 and 4 characters long.
   • content: The content field is required and must be between 1 and 30 characters long.

4. With these validation rules in place, the form will now display error messages when the input fields do not meet the specified criteria.

5. After fulfilling the conditions and posting the wish, the effect is as follows:

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.