使用 Vue.js 创建许愿便签应用

介绍

在这个项目中，你将学习如何使用 Vue.js 和 Element-UI 库创建一个“愿望便签”应用程序。该项目旨在为人们提供一个匿名且便捷的平台，使他们能够以安全、保密的方式表达自己的目标、理想和抱负。

👀 预览

当不满足字段验证条件时，将报告以下错误：

表单验证错误消息

满足条件并发布愿望后，效果如下：

完成效果

🎯 任务

在这个项目中，你将学习：

如何设置项目结构并准备必要的文件和文件夹。
如何在愿望墙上呈现完整的表单。
如何实现表单验证，以确保输入字段符合所需标准。
如何处理表单提交和重置功能。
如何实现图像上传和预览功能。

🏆 成果

完成这个项目后，你将能够：

构建和组织一个 Vue.js 项目。
使用 Element-UI 库创建表单并处理用户交互。
使用 Element-UI 验证规则实现表单验证。
在 Vue.js 应用程序中处理文件上传和图像预览。
管理状态并根据用户操作更新用户界面。

设置项目结构

在这一步中，你将设置项目结构并准备必要的文件和文件夹。

在你的代码编辑器中打开项目文件夹。目录结构如下：

├── 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 库的文件夹。

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

接下来，在 VM 顶部打开“Web 8080”并手动刷新以查看页面。

页面在初始化期间不会对输入框进行验证，并且输入后许愿帖子不会出现。

在许愿墙上渲染完成的表单

在这一步中，你将修改 index.html 文件，以便在愿望墙上呈现完整的表单。

在项目文件夹中打开 index.html 文件。
在 index.html 文件中找到 TODO 注释，在观察代码中的问题后，我发现 v-for="(item,index) in []" 中的代码有问题，并将其修改为以下代码：

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

具有 class="card" 属性的 <div> 元素中的代码将在愿望墙上显示完整表单的名称、内容和图像（如果有）。

实现表单验证

在这一步中，你将完成表单验证，以确保输入字段符合所需标准。

在项目文件夹中打开 index.html 文件。
在你的 Vue 实例的 data 部分找到 rules 对象，并添加以下代码：

rules: {
  // TODO
  name: [
    {
      required: true,
      message: "请输入你的名字",
      trigger: "blur"
    },
    {
      min: 2,
      max: 4,
      message: "长度应在 2 到 4 个字符之间",
      trigger: "blur"
    }
  ],
  content: [
    {
      required: true,
      message: "请输入内容",
      trigger: "blur"
    },
    {
      min: 1,
      max: 30,
      message: "长度应在 1 到 30 个字符之间",
      trigger: "blur"
    }
  ]
},

在 rules 对象的 name 和 content 属性中，定义验证规则：
- name：名字字段是必填项，且长度必须在 2 到 4 个字符之间。
- content：内容字段是必填项，且长度必须在 1 到 30 个字符之间。
有了这些验证规则后，当输入字段不符合指定标准时，表单现在将显示错误消息。

表单验证错误显示