乐优商场开发第八天笔记

0.学习目标

• 独立实现品牌新增

• 实现图片上传

• 了解FastDFS的安装

• 使用FastDFS客户端实现上传

 

1.品牌的新增

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

1.1.页面实现

1.1.1.初步编写弹窗

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

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

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

• value：控制窗口的可见性，true可见，false，不可见

• max-width：控制对话框最大宽度

• with：设置对话框的宽度

• scrollable ：是否可滚动，要配合v-card来使用，默认是false

• persistent ：点击弹窗以外的地方不会关闭弹窗，默认是false

现在，我们来使用一下。

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

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

<v-card-title flat color="white">
      <v-btn color="primary">新增</v-btn>
      <!--弹出的对话框-->
      <v-dialog persistent v-model="dialog" width="500">
        <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>
      <!--空间隔离组件-->
      <v-spacer />
      <!--搜索框，与search属性关联-->
      <v-text-field label="输入关键字搜索" append-icon="search" v-model="search" hide-details/>
    </v-card-title>

说明：

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

• width：限制宽度

• v-model：value值双向绑定到dialog变量，用来控制窗口显示

• 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.dialog = true;
}

效果：

 

窗口关闭

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

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

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

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

接下来，编写closeWindow函数：

close(){
    // 关闭窗口
    this.dialog = false;
}

 

效果：

 

1.1.3.表单页

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

• 直接在dialog对话框中编写表单代码

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

选第几种？

 

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

• 表单代码独立组件，可拔插，方便后期的维护。

• 代码分离，可读性更好。

 

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

内容：

<template>
  <div>my brand form</div>
</template>
​
<script>
    export default {
        name: "MyBrandForm"
    }
</script>
​
<style scoped>
​
</style>
​

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

先导入自定义组件：

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

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

components:{
    MyBrandForm
}

然后在页面中引用：

<v-card-text class="px-5">
    这是一个表单
    <my-brand-form></my-brand-form>
</v-card-text>

页面效果：

 

1.1.3.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：文本框后追加图标，需要填写图标名称。无默认值