尚硅谷后台管理系统
商品添加业务逻辑
添加品牌,是新的数据
请求url中,可以将添加品牌和编辑品牌放在同一个函数中,根据data.id判断是否是新数据
<el-uploadclass="avatar-uploader"action="/api/admin/product/fileUpload":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload":headers="getUploadHeaders()"><imgv-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()