使用Vue + el-form + rules实现图书信息录入功能实战

news2024/11/26 8:50:59

前言 

上节回顾

转眼2023年已经过去一半了,我咋记得2022年刚过去呢,有时候在前端打版本的时候我还不小心写成2022啥啥啥呢,写完才发现自己自己写错了,应该是2023,真是时光一去不复回,往事只能回味啊。

上一节为了给图书录入功能模块打基础,单独写了一篇Vue + FormData + axios的博客,我们通过对上传图片的DOM布局上传事件的注意事项,还有在图片上传功能中,axios是如何支持的,做了讲解,不明白上下文的小伙伴可以回过头去看一看 : 使用Vue + FormData + axios实现图片上传功能实战

本节介绍

这一小节是本专栏的第12篇实战博客了,这一小节对前端初学者,和Vue实战项目不多,没有用过el-form + rules验证的小伙伴特别友好,可以说看过这篇博客,基本就算会了,即便有所遗漏,相信也能快速找到问题所在。这一小节主要内容是图书信息录入的前端布局,el-form的使用,rules验证,再配合时间组件、el-select选择组件、图片上传信息的验证。等把这一节学完了,这一节就直接开始图书信息录入的操作了。

目录

前言 

一、录入信息前端布局

1. 面包屑

2. 录入信息区域

3. 底部按钮区域

二、值的 一 一对应

1.  数据依赖的值

2. rules验证添加

3. el-select成功后的验证

 4. 图片上传成功后的验证

三、图书类型枚举值

四、验证结果

1. 完全没有输入的场景 

2. 分步验证

最后


一、录入信息前端布局

在说录入信息前端布局以前,我们需要在路由数据文件中,添加“录入信息”的路由配置,文件\src\router\routesData.js 中,添加如下代码:

{
        path: '/create-book',                     
        component: () => import("@/views/bookManager/Create"),
        meta: {
          title: '新建图书'
        },
        fatherTitle: '图书管理',
        fatherTitleCode: 1,
},

这样,根据之前讲解的左侧菜单组件,可以快速生成菜单按钮,接下来就可以通过点击左侧菜单“新建图书”,来开始开发新业务啦

 

1. 面包屑

接下来,新建开发目录文件 \src\views\bookManager\Create.vue。在管理系统中,面包屑是很重要的,它可以告诉我们当前处于哪个模块下,并且也是一个回到主页的快捷方式,包括返回首页 /index,返回图书管理的列表页 /book-manager 。代码如下

<div class="crumbs-box">
      <a href="/#/index">首页</a>&gt;
      <a href="/#/book-manager">图书管理</a>&gt;
      <span>新建图书</span>
</div>

2. 录入信息区域

录入信息区域由于业务不是特别的复杂,我们采用居中录入的方式。使用el-form 包含 el-form-item子项,输入框使用el-input、选择框使用el-select、时间选择使用el-date-picker、图片上传基本保持我们上一节使用的方式。代码如下

<div class="form-box">
      <el-form ref="form" :model="form" :rules="formRules" :validate-on-rule-change="false" label-width="80px">
        <el-form-item label="图书名称" prop="bookName" class="is-required">
          <el-input v-model="form.bookName" placeholder="图书名称长度大于2小于20"></el-input>
        </el-form-item>
        <el-form-item label="图书编号" prop="bookNo" class="is-required">
          <el-input v-model="form.bookNo" placeholder="请输入图书编号"></el-input>
        </el-form-item>
        <el-form-item label="图书类型" prop="bookType" class="is-required">
          <el-select v-model="form.bookType" placeholder="请选择图书类型">
            <el-option v-for="item in typeList" :key="item.code" :label="item.desc_name" :value="item.code"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图书作者" prop="author" class="is-required">
          <el-input v-model="form.author" placeholder="请输入图书作者"></el-input>
        </el-form-item>
        <el-form-item label="出版社" prop="publisher" class="is-required">
          <el-input v-model="form.publisher" placeholder="请输入图书出版社"></el-input>
        </el-form-item>
        <el-form-item label="出版时间" prop="publishDate" class="is-required">
          <el-date-picker
            v-model="form.publishDate"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="请选择出版时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="图书描述" prop="description" class="is-required">
          <el-input v-model="form.description" type="textarea" placeholder="图书描述不少于20个字"></el-input>
        </el-form-item>
        <el-form-item label="图书封面" prop="coverImage" class="is-required">
          <div class="upload-box">
            <div class="image-area">
              <img :src="form.coverImage" v-if="form.coverImage" />
            </div>
            <span class="upload-btn" @click="uploadImage">上传图片</span>
          </div>
          
          <el-input v-model="form.coverImage" class="hidden-input" />

          <input ref="imgFile" type="file"
            name="file" accept="image/png,image/gif,image/jpeg,image/jpg" 
            @change="go2UploadImg($event)" style="display: none;">
        </el-form-item>
      </el-form>

3. 底部按钮区域

底部按钮除了提交按钮以外,还要添加一个“取消按钮”,因为用户很可能在录入的过程中不想再录入了,想要回到列表页,所以取消按钮呢,也是起到一个返回的作用。代码如下:

<div class="footer">
        <el-button plain @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSubmit" 
        :loading="isLoading">提交</el-button>
</div>

二、值的 一 一对应

在使用el-form表单验证中,很多值是需要 一 一 对应的,不对应就不会起作用,例如v-model的依赖数据对应,例如rules中的验证规则key值对应等。

1.  数据依赖的值

看到上面DOM布局中,有大量的v-model,这些值都是怎么来的呢,当然不是随便起名字,这些值都是根据后端接口入参数据来定义的,所以就涉及到图书信息录入的接口入参字段数据

 根据以上接口入参字段数据,前端可以形成数据依赖如下:

export default {
  name: 'Create',
  data () {
    return {
      form: {
        bookName: '',
        bookNo: '',
        bookType: '',
        author: '',
        publisher: '',
        publishDate: '',
        description: '',
        coverImage: '',
      },

2. rules验证添加

点击“提交”按钮的时候,不符合验证条件的要给出精准提示,这就是el-from中的rules起到的作用,而在DOM片段中添加了  :rules="formRules" 的的配置,这就需要添加对应的 formRules 配置数据,代码如下:

formRules: {
        bookName: [
          { required: true, message: '请输入图书名称', trigger: 'blur' },
          { min: 2, max: 20, message: '图书名称长度需大于2小于20', trigger: 'blur',},
        ],
        bookNo: [
          { required: true, message: '请输入图书编号', trigger: 'blur' },
        ],
        bookType: [
          { required: true, message: '请选择图书类型', trigger: ['blur', 'change'] },
        ],
        author: [
          { required: true, message: '请输入图书作者', trigger: 'blur' },
        ],
        publisher: [
          { required: true, message: '请输入出版社', trigger: 'blur' },
        ],
        publishDate: [
          { required: true, message: '请选择出版时间', trigger: 'blur' },
        ],
        description: [
          { required: true, message: '请输入图书描述', trigger: 'blur' },
        ],
        coverImage: [
          { required: true, message: '请上传图书封面', trigger: ['blur', 'change'] },
        ],
},

3. el-select成功后的验证

“图书类型”验证成功后,由于使用的el-select组件,不像el-input那样,验证通过下面的小红字就消失了,所以form-Rules中的trigger只是使用blur是不够的,还需要添加change事件

 4. 图片上传成功后的验证

图片上传我们没有使用第三方组件el-upload,想要自己实现一下,所以到了这里,图片上传成功后,无法使用组件本身的成功取消验证。所以在DOM中添加了一个el-input,使用它自身与el-form的配合验证

 

三、图书类型枚举值

入参字段中有个“bookType”字段值,这是一个图书类型的枚举列表,暂时定义到了前端代码中。虽然定义到了前端,但仍然要以数据配置的形式出现,新建文件:\src\config\bookType.js,维护数据如下:

export const BOOKTYPES = [
  {
    desc_name: '科幻小说',
    code: 1,
  },
  {
    desc_name: '励志成长',
    code: 2,
  },
  {
    desc_name: '文学传记',
    code: 3,
  },
  {
    desc_name: '历史小说',
    code: 4,
  },
  {
    desc_name: '科学技术',
    code: 5,
  },
  {
    desc_name: '散文诗歌',
    code: 6,
  },
]

这样,在我们的业务组件中就可以引用了 , 在 \src\views\bookManager\Create.vue 文件中引入

import { BOOKTYPES } from "@/config/bookType";

数据依赖中指定数据

typeList: BOOKTYPES,

这样在业务组件中就可以正常使用了,如图

 

四、验证结果

在提交数据前,需要做数据合法性验证,这样也可以有效减轻服务端压力,做出精确提示,使用户感知更加友好,同时也是用户知道自己该做出哪些改正

1. 完全没有输入的场景 

完全没有输入的场景,当用于点击“提交”按钮后,需要在全部信息下面做出红色提示,验证代码如下:

handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log('已验证通过');
          this.isLoading = true;
        }
      })
},

 

2. 分步验证

咱们就不一步一步的验证截图了,狗哥已经帮大家验证过了,咱们只是这里做一个图片上传成功后,验证取消的效果。图片上传的功能上一节已经实现过了,这里就直接使用即可,但是上传图片成功后的赋值代码稍有改动,就是需要给当前业务组件的 form.coverImage 赋值即可,代码如下

uploadImage() {
      this.$refs.imgFile.click();
},
go2UploadImg(e) {
      const file = e.target.files[0];
      const formData = new FormData();
      formData.append("file", file);

      uploadFile(formData).then((res) => {
        this.form.coverImage = res.data;
      }).catch(() => {
        console.log('图片上传异常,请联系技术人员');
      })
}

 这本《三十岁,一切刚刚开始》读着非常棒,其实不光是三岁时,二十岁,四十岁读起来都完全没有问题,我之前读过三遍,做过一些精华感悟,小伙伴可以去看一看哦: 读书精华分享:三十岁,我们值得

最后

我和天哥一直在思考怎么把实战专栏博客写的精细一些,更实战一些,但写代码和边写边以文字的形式讲解,的确是一种挑战,不过幸好我俩还在前行着,2023年已过半,希望下半年,我们能够写出更多的实战博客,和大家一起学习。

天哥服务端实战专栏还请关注 SpringBoot+Vue前后端分离项目实战。同时,已经有越来越多的小伙伴开始要源码学习了,说明我和天哥的努力没有白费,2023,一起继续加油吧。我给大家准备了有意思的投票,希望能够引起你的共鸣哦!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/764729.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于FPGA的视频接口之SDI编码

简介 SDI接口是一种“数字分量串行接口”,对于详细解释,可以在Google下SDI,我就不当网络的搬运工了,划重点的是,SDI常见的分为3种模式,即SD-SDI、HD-SDI和3G-SDI,以及升级版12G-SDI。 SD-SDI很少有人用,我怀疑可能是640x512的说法,270Mb/s的数据传输量 HD-SDI最常遇到…

vue3 实现 Map 地图区域组件封装

图例&#xff1a;重庆区域 一、安装echarts 坑&#xff1a;地图echarts版本必须在5.0.0以下&#xff0c;否则不能显示&#xff0c;此处指定安装 echarts4.9.0 即可 cnpm install echarts4.9.0 --save 二、下载 “重庆” 区域地图json文件 下载地址&#xff1a;https://www.…

面向对象基础

目录 1. 类和对象 1.1 什么是对象 1.2 什么是面向对象 1.3 什么是类 1.4 什么是对象的属性 1.5 什么是对象的行为 1.6 类和对象的关系 1.7 类的定义 1.8 对象的使用 2. 成员变量和局部变量 2.1 什么是成员变量和局部变量 2.2 成员变量和局部变量的区别 3. 封装 3.1…

软件测试基础篇(测试系列3)

目录 前言&#xff1a; 1.软件测试的生命周期 2.如何描述一个BUG 3.如何定义BUG的级别 4.BUG的生命周期 5.如何开始第一次测试 6.测试执行和BUG管理 结束语&#xff1a; 前言&#xff1a; 在两节中小编与大家简单的讲解了一些有关于软件测试的基础知识&#xff0c;带着…

Ubuntu开机自启动设置

一、创建执行脚本 这里有两个程序所以编写了两个脚本&#xff0c;第一脚本(master.sh)&#xff1a; gnome-terminal -- bash -c "source /home/zyy/anaconda3/bin/activate wood2;cd /home/zyy/pycharmProject/master_program;python main.py > /home/zyy/pycharmProj…

MYSQL常见面试题汇总

Yan-英杰的主页 悟已往之不谏 知来者之可追 C程序员&#xff0c;2024届电子信息研究生 目录 1、三大范式 2、DML 语句和 DDL 语句区别 3、主键和外键的区别 4、drop、delete、truncate 区别 5、基础架构 6、MyISAM 和 InnoDB 有什么区别&#xff1f; 7、推荐自增id作…

HCIP第十天

题目 拓扑图 配置IP地址和环回 启动OSPF&#xff0c;使得AS2内部互相学习到路由 BGP建立对等体关系&#xff0c;R1和R2为EBGP对等体&#xff0c;R234为AS64512的联邦&#xff0c;R567为AS64513的联邦&#xff0c;R7和R8为EBGP对等体&#xff0c;R2-R5和R4-R7为不同联邦的EBGP对…

UML类图的使用

相关概念 1. uml例图使用场景: 类图 类图的使用 1. 在UML类图中表示具体类 具体类在类图中用矩形框表示&#xff0c;矩形框分为三层&#xff1a;第一层是类名字。第二层是类的成员变量&#xff1b;第三层是类的方法。成员变量以及方法前的访问修饰符用符号来表示&#xff1…

文档加密软件有哪些(好用的文档加密软件排名)

在现代社会中&#xff0c;随着信息技术的快速发展&#xff0c;文档的保密性变得越来越重要。为了保护敏感信息不被未经授权的人访问&#xff0c;使用文档加密软件是一种常见的做法。本文将介绍文档加密软件的重要性&#xff0c;并列举一些常见的文档加密软件供读者参考。 文档加…

Git及Tortoisegit使用教程,设置中文

一、到git官网下载GIT 官网 二、下载安装Tortoisegit及中文语言包,Tortoisegit及语言包 语言包下载地址 三、在电脑某个盘的文件里右键 提示未设置git.exe 路径不能继续, 于是去下载git GIT下载 安装Git时, 一直点击 Next > 不要停, 直到结束 此时再跳到TortoiseGit…

[QT编程系列-21]:基本框架 - QT常见数据结构:QString、QList、QVector、QMap、QHash、QSet、QPair详解

目录 1 QString 2 QList 3 QVector 4 QMap 5 QHash 6 QSet 7 QPair 1 QString QString是Qt中用于存储和操作字符串的类。它提供了丰富的字符串处理方法和功能。 以下是QString的一些主要特点和常用操作&#xff1a; 创建QString对象&#xff1a; QString str "H…

远程在Ubuntu20.04安装nvidia显卡驱动

第零步&#xff0c;找人装一个todesk。 在终端运行&#xff1a; ifconfig 记住ip地址&#xff0c;后面要用。 第一步&#xff0c;安装软件&#xff1a; sudo apt-get update sudo apt-get install g gcc make 第二步&#xff0c;下载显卡驱动&#xff1a; 官方驱动 | NVI…

mac批量提取图片文件名到excel?

mac批量提取图片文件名到excel&#xff1f;最近有个小伙伴向我求助一个电脑操作上的问题&#xff0c;问我在Mac电脑上用什么方法可以快速批量的将大量图片的名称一次性提取出来&#xff0c;并且保存到excel表格里。记得小编曾经给大家分享过windows电脑上批量提取文件名称的方法…

关键点检测SIFT算法笔记

SIFT算法 SIFT&#xff08;Scale Invariant Feature Transform&#xff09;&#xff0c;尺度不变特征变换。具有旋转不变性、尺度不变性、亮度变化保持不变性&#xff0c;是一种非常稳定的局部特征。在目标检测和特征提取方向占据着重要的地位。 SIFT算法所查找到的关键点是一些…

LabVIEW实现基于DCT的野生动物监测无线图像传输

LabVIEW实现基于DCT的野生动物监测无线图像传输 针对野生动物物种数量不断下降的情况&#xff0c;需改进以增强当前野生动物监测系统的能力。目前的系统要求工人进入森林以收集存储在存储卡中的图像数据。这项任务风险很大&#xff0c;而且耗费大量时间。系统也无法提供实时报…

APP加固:助力移动应用安全合规

近日&#xff0c;工业和信息化部发布了2023年第2批侵害用户权益行为的App&#xff08;SDK&#xff09;名单&#xff0c;55款App因涉及强制、频繁、过度索取权限等问题而被通报。这一举措进一步凸显了合规对于APP发展的重要性。 根据工业和信息化部的通报&#xff0c;被通报的这…

redolog 、undolog 和binlog

redolog(可以恢复数据&#xff0c;保证数据不丢失) 、undolog(事务回滚) 和binlog&#xff08;主从同步数据&#xff09; 脏页 在mysql中&#xff0c;当内存数据页和磁盘数据页上的内容不一致时&#xff0c;则称这个内存页为脏页 脏页什么时候会刷入磁盘&#xff1f; ● redo…

MySQL-DQL-小结

基本查询 条件查询 分组查询 排序查询 分页查询

TX Barcode .NET for WPF Crack

TX Barcode .NET for WPF Crack 用于WPF软件的TX Barcode.NET包括一天完成的功能以及用于WPF的软件的2D条形码控制。 用于WPF的TX Barcode.NET的功能和属性&#xff1a; 它具有以下特性和属性&#xff0c;如&#xff1a; 常见的文字处理功能&#xff1a;它可以为用户和开发人员…

网络安全问题严重?Web3和IP代理能否提供解决方案?

在数字世界中&#xff0c;网络安全问题越来越严重。黑客和网络犯罪分子利用各种手段来窃取个人信息、盗取数字资产或破坏网络服务。为了应对这些威胁&#xff0c;Web3和IP代理成为了有力的工具&#xff0c;可以帮助改善网络安全性&#xff0c;提高网络防御水平。 首先&#xff…