乐优商城第八天

0.学习目标

• 独立实现品牌新增
• 实现图片上传
• 了解FastDFS的安装
• 使用FastDFS客户端实现上传

1.品牌的新增

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

1.1.页面实现

1.1.1.初步编写弹窗

当我们点击新增按钮，应该出现一个弹窗，然后在弹窗中出现一个表格，我们就可以填写品牌信息了。

我们查看Vuetify官网，弹窗是如何实现：

另外，我们可以通过文档看到对话框的一些属性：

• value：控制窗口的可见性，true可见，false，不可见
• max-width：控制对话框最大宽度
• scrollable ：是否可滚动，要配合v-card来使用，默认是false
• persistent ：点击弹窗以外的地方不会关闭弹窗，默认是false

现在，我们来使用一下。

首先，我们在data中定义一个show属性，来控制对话框的显示状态：

然后，在页面添加一个v-dialog

<!--弹出的对话框-->
<v-dialog max-width="500" v-model="show" persistent>
    <v-card>
        <!--对话框的标题-->
        <v-toolbar dense dark color="primary">
            <v-toolbar-title>新增品牌</v-toolbar-title>
        </v-toolbar>
        <!--对话框的内容，表单-->
        <v-card-text class="px-5">
            我是表单
        </v-card-text>
    </v-card>
</v-dialog>

说明：

• 我们给dialog指定了3个属性，分别是

  • max-width：限制宽度
  • v-model：value值双向绑定到show变量，用来控制窗口显示
  • persisitent：控制窗口不会被意外关闭

• 因为可滚动需要配合v-card使用，因此我们在对话框中加入了一个v-card

  • 在v-card的头部添加了一个 v-toolbar，作为窗口的头部，并且写了标题为：新增品牌
    • dense：紧凑显示
    • dark：黑暗主题
    • color：颜色，primary就是整个网站的主色调，蓝色
  • 在v-card的内容部分，暂时空置，等会写表单

• class=“px-5"：vuetify的内置样式，含义是padding的x轴设置为5，这样表单内容会缩进一些，而不是顶着边框

  基本语法：{property}{direction}-{size}

  • property：属性，有两种padding和margin
    • p：对应padding
    • m：对应margin
  • direction：只padding和margin的作用方向，
    • t - 对应margin-top或者padding-top属性
    • b - 对应margin-bottom or padding-bottom
    • l - 对应margin-left or padding-left
    • r - 对应margin-right or padding-right
    • x - 同时对应*-left和*-right属性
    • y - 同时对应*-top和*-bottom属性
  • size：控制空间大小，基于$spacer进行倍增，$spacer默认是16px
    • 0：将margin或padding的大小设置为0
    • 1 - 将margin或者padding属性设置为$spacer * .25
    • 2 - 将margin或者padding属性设置为$spacer * .5
    • 3 - 将margin或者padding属性设置为$spacer
    • 4 - 将margin或者padding属性设置为$spacer * 1.5
    • 5 - 将margin或者padding属性设置为$spacer * 3

1.1.2.实现弹窗的可见和关闭

窗口可见

接下来，我们要在点击新增品牌按钮时，将窗口显示，因此要给新增按钮绑定事件。

<v-btn color="primary" @click="addBrand">新增品牌</v-btn>

然后定义一个addBrand方法：

addBrand(){
   
    // 控制弹窗可见：
    this.show = true;
}

效果：

窗口关闭

现在，悲剧发生了，因为我们设置了persistent属性，窗口无法被关闭了。除非把show属性设置为false

因此我们需要给窗口添加一个关闭按钮：

<!--对话框的标题-->
<v-toolbar dense dark color="primary">
    <v-toolbar-title>新增品牌</v-toolbar-title>
    <v-spacer/>
    <!--关闭窗口的按钮-->
    <v-btn icon @click="closeWindow"><v-icon>close</v-icon></v-btn>
</v-toolbar>

并且，我们还给按钮绑定了点击事件，回调函数为closeWindow。

接下来，编写closeWindow函数：

closeWindow(){
   
    // 关闭窗口
    this.show = false;
}

效果：

1.1.3.新增品牌的表单页

接下来就是写表单了。我们有两种选择：

• 直接在dialog对话框中编写表单代码
• 另外编写一个组件，组件内写表单代码。然后在对话框引用组件

选第几种？

我们选第二种方案，优点：

• 表单代码独立组件，可拔插，方便后期的维护。
• 代码分离，可读性更好。

我们新建一个MyBrandForm.vue组件：

将MyBrandForm引入到MyBrand中，这里使用局部组件的语法：

先导入自定义组件：

  // 导入自定义的表单组件
  import MyBrandForm from './MyBrandForm'

然后通过components属性来指定局部组件：

components:{
   
    MyBrandForm
}

然后在页面中引用：

页面效果：

1.1.4.编写表单

1.1.4.1.表单

查看文档，找到关于表单的部分：

v-form，表单组件，内部可以有许多输入项。v-form有下面的属性：

• value：true，代表表单验证通过；false，代表表单验证失败

v-form提供了两个方法：

• reset：重置表单数据
• validate：校验整个表单数据，前提是你写好了校验规则。返回Boolean表示校验成功或失败

我们在data中定义一个valid属性，跟表单的value进行双向绑定，观察表单是否通过校验，同时把等会要跟表单关联的品牌brand对象声明出来：

  export default {
   
    name: "my-brand-form",
    data() {
   
      return {
   
        valid:false, // 表单校验结果标记
        brand:{
   
          name:'', // 品牌名称
          letter:'', // 品牌首字母
          image:'',// 品牌logo
          categories:[], // 品牌所属的商品分类数组
        }
      }
    }
  }

然后，在页面先写一个表单：

<v-form v-model="valid">

</v-form>

1.1.4.2.文本框

我们的品牌总共需要这些字段：

• 名称
• 首字母
• 商品分类，有很多个
• LOGO

表单项主要包括文本框、密码框、多选框、单选框、文本域、下拉选框、文件上传等。思考下我们的品牌需要哪些？

• 文本框：品牌名称、品牌首字母都属于文本框
• 文件上传：品牌需要图片，这个是文件上传框
• 下拉选框：商品分类提前已经定义好，这里需要通过下拉选框展示，提供给用户选择。

先看文本框，昨天已经用过的，叫做v-text-field：

查看文档，v-text-field有以下关键属性：

• append-icon：文本框后追加图标，需要填写图标名称。无默认值
• clearable：是否添加一个清空图标，点击会清空文本框。默认是false
• color：颜色
• counter：是否添加一个文本计数器，在角落显示文本长度，指定true或允许的组大长度。无默认值
• dark：是否应用黑暗色调，默认是false
• disable：是否禁用，默认是false
• flat：是否移除默认的动画效果，默认是false
• full-width：指定宽度为全屏，默认是false
• hide-details：是否因此错误提示，默认是false
• hint：输入框的提示文本
• label：输入框的标签
• multi-line：是否转为文本域，默认是false。文本框和文本域可以自由切换
• placeholder：输入框占位符文本，focus后消失
• required：是否为必填项，如果是，会在label后加*，不具备校验功能。默认是false
• rows：文本域的行数，multi-line为true时才有效
• rules：指定校验规则及错误提示信息，数组结构。默认[]
• single-line：是否单行文本显示，默认是false
• suffix：显示后缀

接下来，我们先添加两个字段：品牌名称、品牌的首字母，校验规则暂时不写：

  <v-form v-model="valid">
    <v-text-field v-model="brand.name" label="请输入品牌名称" required />
    <v-text-field v-model="brand.letter" label="请输入品牌首字母" required />
  </v-form>

• 千万不要忘了通过v-model把表单项与brand的属性关联起来。

效果：

1.1.4.3.级联下拉选框

接下来就是商品分类了，按照刚才的分析，商品分类应该是下拉选框。

但是大家仔细思考，商品分类包含三级。在展示的时候，应该是先由用户选中1级，才显示2级；选择了2级，才显示3级。形成一个多级分类的三级联动效果。

这个时候，就不是普通的下拉选框，而是三级联动的下拉选框！

这样的选框，在Vuetify中并没有提供（它提供的是基本的下拉框）。因此我已经给大家编写了一个无限级联动的下拉选框，能够满足我们的需求。

具体请参考课前资料的《自定义组件用法指南.md》

我们在代码中使用：

    <v-cascader
      url="/item/category/list"
      multiple 
      required
      v-model="brand.categories"
      label="请选择商品分类"/>

• url：加载商品分类选项的接口路径
• multiple：是否多选，这里设置为true，因为一个品牌可能有多个分类
• requried：是否是必须的，这里为true，会在提示上加*，提醒用户
• v-model：关联我们brand对象的categories属性
• label：文字说明

效果：

data中获取的结果：

1.1.4.4.文件上传项

在Vuetify中，也没有文件上传的组件。

还好，我已经给大家写好了一个文件上传的组件：

详细用法，参考《自定义组件使用指南.md》

我们添加上传的组件：

<v-layout row>
    <v-flex xs3>
        <span style="font-size: 16px; color: #444">品牌LOGO：</span>
    </v-flex>
    <v-flex>
        <v-upload
             v-model="brand.image"
             url="/upload" 
             :multiple="false" 
             :pic-width="250" 
             :pic-height="90"
                  />
    </v-flex>
</v-layout>

注意：

• 文件上传组件本身没有提供文字提示。因此我们需要自己添加一段文字说明
• 我们要实现文字和图片组件左右放置，因此这里使用了v-layout布局组件：
  • layout添加了row属性，代表这是一行，如果是column，代表是多行
  • layout下面有v-flex组件，是这一行的单元，我们有2个单元
    • <v-flex xs3> ：显示文字说明，xs3是响应式布局，代表占12格中的3格
    • 剩下的部分就是图片上传组件了
• v-upload：图片上传组件，包含以下属性：
  • v-model：将上传的结果绑定到brand的image属性
  • url：上传的路径，我们先随便写一个。
  • multiple：是否运行多图片上传，这里是false。因为品牌LOGO只有一个
  • pic-width和pic-height：可以控制l图片上传后展示的宽高

最终结果：