品牌新增页面分析

品牌的新增

昨天我们完成了品牌的查询，接下来就是新增功能。点击新增品牌按钮

Brand.vue页面有一个提交按钮：

点击触发addBrand方法：

把数据模型之的show置为true，而页面中有一个弹窗与show绑定：

弹窗中有一个表单子组件，并且是一个局部子组件，有页面可以找到该组件：

页面实现

重置表单

重置表单相对简单，因为v-form组件已经提供了reset方法，用来清空表单数据。只要我们拿到表单组件对象，就可以调用方法了。

我们可以通过$refs内置对象来获取表单组件。

首先，在表单上定义ref属性：

然后，在页面查看this.$refs属性：

      reset(){
        // 重置表单
        console.log(this);
      }

查看如下：

看到this.$refs中只有一个属性，就是myBrandForm

我们在clear中来获取表单对象并调用reset方法：

要注意的是，这里我们还手动把this.categories清空了，因为我写的级联选择组件并没有跟表单结合起来。需要手动清空。

表单校验

校验规则

Vuetify的表单校验，是通过rules属性来指定的：

校验规则的写法：

说明：

• 规则是一个数组

• 数组中的元素是一个函数，该函数接收表单项的值作为参数，函数返回值两种情况：

  • 返回true，代表成功，

  • 返回错误提示信息，代表失败

编写校验

我们有四个字段：

• name：做非空校验和长度校验，长度必须大于1

• letter：首字母，校验长度为1，非空。

• image：图片，不做校验，图片可以为空

• categories：非空校验，自定义组件已经帮我们完成，不用写了

首先，我们定义规则：

然后，在页面标签中指定：

<v-text-field v-model="brand.name" label="请输入品牌名称" hint="例如：oppo" :rules="[rules.required, rules.nameLength]"></v-text-field>
<v-text-field v-model="brand.letter" label="请输入品牌首字母" hint="例如：O" :rules="[rules.letter]"></v-text-field>

效果：

表单提交

在submit方法中添加表单提交的逻辑：

submit() {
    console.log(this.$qs);
    // 表单校验
    if (this.$refs.myBrandForm.validate()) {
        // 定义一个请求参数对象，通过解构表达式来获取brand中的属性{categories letter name image}
        const {categories, letter, ...params} = this.brand; // params:{name, image, cids, letter}
        // 数据库中只要保存分类的id即可，因此我们对categories的值进行处理,只保留id，并转为字符串
        params.cids = categories.map(c => c.id).join(",");
        // 将字母都处理为大写
        params.letter = letter.toUpperCase();
        // 将数据提交到后台
        // this.$http.post('/item/brand', this.$qs.stringify(params))
        this.$http({
            method: this.isEdit ? 'put' : 'post',
            url: '/item/brand',
            data: params
        }).then(() => {
            // 关闭窗口
            this.$emit("close");
            this.$message.success("保存成功！");
        })
            .catch(() => {
            this.$message.error("保存失败！");
        });
    }
}

1. 通过this.$refs.myBrandForm选中表单，然后调用表单的validate方法，进行表单校验。返回boolean值，true代表校验通过

2. 通过解构表达式来获取brand中的值，categories需要处理，单独获取。其它的存入params对象中

3. 品牌和商品分类的中间表只保存两者的id，而brand.categories中保存的是对象数组，里面有id和name属性，因此这里通过数组的map功能转为id数组，然后通过join方法拼接为字符串

4. 发起请求

5. 弹窗提示成功还是失败，这里用到的是我们的自定义组件功能message组件：

这个插件把$message对象绑定到了Vue的原型上，因此我们可以通过this.$message来直接调用。

包含以下常用方法：

• info、error、success、warning等，弹出一个带有提示信息的窗口，色调与为普通（灰）、错误（红色）、成功（绿色）和警告（黄色）。使用方法：this.$message.info("msg")

• confirm：确认框。用法：this.$message.confirm("确认框的提示信息")，返回一个Promise。