尚硅谷后台管理系统

商品添加业务逻辑

添加品牌，是新的数据
请求url中，可以将添加品牌和编辑品牌放在同一个函数中，根据data.id判断是否是新数据

 <el-upload
            class="avatar-uploader"
            action="/api/admin/product/fileUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :headers="getUploadHeaders()"
          >
            <img
              v-if="trademarkParams.logoUrl"
              :src="'http://127.0.0.1:10086' + trademarkParams.logoUrl"
              class="avatar"
            />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>

getUploadHeaders()必须要有这个括号，没有括号就会显示需要登录

• 因为没有括号的是传递函数引用，把 getUploadHeaders 这个函数本身传给 el-upload
  el-upload 组件会在需要的时候调用这个函数
  但是 el-upload 调用时可能不会保持正确的 this 上下文
  导致函数内部的 localStorage.getItem("TOKEN") 可能获取不到正确的值
• 有括号的，立即执行函数，函数直接返回一个对象（比如带token的..）el-upload收到的就是一个具体的对象

注意：再重新点击“添加品牌”按钮时，清除form中的数据

不能用 trademarkParams = { tmName: '', logoUrl: '' }，不然会破坏响应式连接

每次点击confirm，需要重新获取服务器品牌信息进行呈现。

v-model双向绑定

所有添加和修改的区分：id很重要！！

一般用到表单都需要表单校验
logoURL的校验不会触发，所以再点击confirm时去进行触发校验，Form有validate API可以进行所有表单的校验。先获取组件实例 ref="formRef"

• 有表单时的提示信息：调用校验validate
• 没有表单时的提示信息：用nextTick()