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

前言

上节回顾

转眼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('图片上传异常，请联系技术人员');
      })
}