使用Vue.js的许愿便签应用

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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

👀 预览

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

表单验证错误消息

满足条件并发布愿望后,效果如下:

完成效果

🎯 任务

在这个项目中,你将学习:

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

🏆 成果

完成这个项目后,你将能够:

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") html/FormsandInputGroup -.-> html/form_valid("`Form Validation`") html/FormsandInputGroup -.-> html/form_access("`Accessibility in Forms`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/head_elems -.-> lab-445638{{"`使用Vue.js的许愿便签应用`"}} html/layout -.-> lab-445638{{"`使用Vue.js的许愿便签应用`"}} html/forms -.-> lab-445638{{"`使用Vue.js的许愿便签应用`"}} html/form_valid -.-> lab-445638{{"`使用Vue.js的许愿便签应用`"}} html/form_access -.-> lab-445638{{"`使用Vue.js的许愿便签应用`"}} html/inter_elems -.-> lab-445638{{"`使用Vue.js的许愿便签应用`"}} end

设置项目结构

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

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

├── 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 文件,以便在愿望墙上呈现完整的表单。

  1. 在项目文件夹中打开 index.html 文件。
  2. 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> 元素中的代码将在愿望墙上显示完整表单的名称、内容和图像(如果有)。

实现表单验证

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

  1. 在项目文件夹中打开 index.html 文件。
  2. 在你的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"
    }
  ]
},
  1. rules 对象的 namecontent 属性中,定义验证规则:

    • name:名字字段是必填项,且长度必须在2到4个字符之间。
    • content:内容字段是必填项,且长度必须在1到30个字符之间。
  2. 有了这些验证规则后,当输入字段不符合指定标准时,表单现在将显示错误消息。

表单验证错误显示
  1. 满足条件并发布愿望后,效果如下:
完成效果
✨ 查看解决方案并练习

总结

恭喜你!你已经完成了这个项目。你可以在LabEx中练习更多实验来提升你的技能。

您可能感兴趣的其他 HTML 教程