乐优商城第八天（品牌的管理，图片上传FastDFS）

乐优商城已经进入第八天了，今天是品牌的管理，品牌要涉及到图片的上传，以及品牌与分类的中间表的维护，这是主要的两个难点。

商品的新增，从0开始新增商品。。

1.首先是页面的入口，一个按钮，点击后应该有弹窗

<!--这里是新增品牌的入口-->
<v-btn @click="addBrand" color="primary">新增品牌</v-btn>

点击按钮后，出发addBrand方法，show = true，弹出窗口

methods: {
  addBrand()
  {
    this.brand = {};
    this.isEdit = false;
    this.show = true;
  }

2.编写弹窗

<v-dialog v-model="show" max-width="600" scrollable v-if="show">
  <v-card>
    <v-toolbar dark dense color="primary">
      <v-toolbar-title>{
 {
 isEdit ? '修改品牌' : '新增品牌'}}</v-toolbar-title>
      <v-spacer/>
      <!--这里是关闭的组件-->
      <v-btn icon @click="show = false">
        <v-icon>close</v-icon>
      </v-btn>
    </v-toolbar>
    <v-card-text class="px-5 py-2">
      <!-- 表单 -->
      <brand-form :oldBrand="brand" :isEdit="isEdit" @close="show = false" :reload="getDataFromApi"/>
    </v-card-text>
  </v-card>
</v-dialog>

这个是弹窗，其中表单，我们单独写了一个组件，为brandForm

<template>
  <v-form v-model="valid" ref="brandForm">
    <v-text-field
      label="品牌名称"

      v-model="brand.name"

      :rules="[v => !!v || '品牌名称不能为空']"
      :counter="10"
      required
    />
    <v-text-field
      label="首字母"

      v-model="brand.letter"

      :rules="[v => v.length === 1 || '首字母只能是1位']"
      required
      mask="A"
    />
    <v-cascader url="/item/category/list" required

                v-model="brand.categories"

                multiple label="商品分类"/>
    <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="/item/upload" :multiple="false" :pic-width="250" :pic-height="90"
        />
      </v-flex>
    </v-layout>
    <v-layout class="my-4">
      <v-btn @click="submit" color="primary">提交</v-btn>
      <v-btn @click="clear" color="warning">重置</v-btn>
    </v-layout>
  </v-form>
</template>

3.我们的效果是这样的

把结构拆解

1.

<v-toolbar dark dense color="primary">
  <v-toolbar-title>{
 {
 isEdit ? '修改品牌' : '新增品牌'}}</v-toolbar-title>
  <v-spacer/>
  <!--这里是关闭的组件-->
  <v-btn icon @click="show = false">
    <v-icon>close</v-icon>
  </v-btn>
</v-toolbar>

最上面是一个toobar，里面又两个组件，一个标题，一个关闭按钮

2.

中间表单的内容由外部引入

<v-card-text class="px-5 py-2">
  <!-- 表单 -->
  <brand-form :oldBrand="brand" :isEdit="isEdit" @close="show = false" :reload="getDataFromApi"/>
</v-card-text>

：oldBrand = “brand” 是将此页父组件的内容赋值给子组件

子组件用props接收，

props: {
  oldBrand: {},
  isEdit: {
    type: Boolean,
    default: false
  },
  show: {
    type: Boolean,
    default: true
  }
},

通过监视，赋值给自定义的数据

data() {
  return {
    baseUrl: config.api,
    valid: false,
    brand: {
      name: "",
      image: "",
      letter: "",
      categories: []
    },
    imageDialogVisible: false
  }
},

监控的写法：

watch: {
  oldBrand: {
  //