Mall第二天

产品功能

一.拖拽功能

  1. el-tree中添加draggable

  2.allow-drop

二.开关按钮：将拖拽设为可以关闭

 <el-switch v-model="draggable" active-text="开启拖拽" inactive-text="关闭拖拽"></el-switch>:draggable="draggable"

三批量删除

  1. 给el-tree起名字  ref="menuTree"

   2. 返回所有节点组成的数组 let checkedNodes = this.$refs.menuTree.getCheckedNodes();

品牌功能

 Ⅰ开关

  1.开关显示：将整行数据绑定@change，通过updateBrandStatus进行修改

 <el-table-column prop="showStatus" header-align="center" align="center" label="显示状态"><template slot-scope="scope"><el-switchv-model="scope.row.showStatus"active-color="#13ce66"inactive-color="#ff4949":active-value="1":inactive-value="0"@change="updateBrandStatus(scope.row)"></el-switch></template></el-table-column>

2.监听开关

updateBrandStatus(data) {console.log("最新信息", data);let { brandId, showStatus } = data;//发送请求修改状态this.$http({url: this.$http.adornUrl("/product/brand/update"),method: "post",data: this.$http.adornData({ brandId, showStatus}, false),}).then(({ data }) => {this.$message({type: "success",message: "状态更新成功",});});},

Ⅱ.文件上传：服务端签名后上传

1.开通oss:/?utm_content=se_1000301881

2.密码账号管理

添加用户

赋予权限

oss文档

3.nacosk微服务配置

alibaba:cloud:access-key: LTAI4GEpoo5rMfAPRkwyVxM6secret-key: 7Y4STnZsTP7XThzIx2L7UlsJyDzQkioss:endpoint: oss-cn-chengdu.aliyuncs

4.注册到gateWay

 - id: third_party_routeuri: lb://gulimall-third-partypredicates:- Path=/api/thirdparty/**filters:- RewritePath=/api/thirdparty/(?<segment>.*),/$\{segment}

5.前端：引入写好的单独上传和批量上传

  修改字段显示

 <el-table-column prop="logo" header-align="center" align="center" label="品牌logo地址"><template slot-scope="scope"><!-- <el-image style="width: 100px; height: 80px" :src="scope.row.logo" fit="fill"></el-image> --><img :src="scope.row.logo" style="width: 100px; height: 80px"></template></el-table-column>

 表单验证

 <el-form-item label="检索首字母" prop="firstLetter"><el-input v-model="dataForm.firstLetter" placeholder="检索首字母"></el-input></el-form-item><el-form-item label="排序" prop="sort"><el-input v-model.number="dataForm.sort" placeholder="排序"></el-input></el-form-item>firstLetter: [{validator:(rule,value,callback)=>{if(value ==''){callback(new Error("首字母必须填写"));}else if(!/^[a-zA-Z]$/.test(value)){callback("首字母必须a-z或A-Z")}else{callback();}},trigger: "blur",},],sort: [{validator:(rule,value,callback)=>{if(value ==''){callback(new Error("排序必须填写"));}else if(!Number.isInteger(value)|| value<0){callback("排序必须是一个大于0的整数")}else{callback();}},trigger: "blur",},],

6.oss配置跨域

7.后端校验

 依赖

      <dependency><groupId>javax.validation</groupId><artifactId>validation-api</artifactId><version>2.0.1.Final</version></dependency>

依赖校验

 ListValue：使我们自己写的校验规则，同时校验时又要分为添加数据和修改数据

@NotNull(groups = {AddGroup.class, UpdateStatusGroup.class})@ListValue(vals={0,1},groups = {AddGroup.class, UpdateStatusGroup.class})private Integer showStatus;/*** 检索首字母*/@NotEmpty(groups={AddGroup.class})@Pattern(regexp="^[a-zA-Z]$",message = "检索首字母必须是一个字母",groups={AddGroup.class,UpdateGroup.class})private String firstLetter;/**

Contorller添加注解

    @RequestMapping("/save")//@RequiresPermissions("product:brand:save")public R save(@Validated({AddGroup.class}) @RequestBody BrandEntity brand/*,BindingResult result*/){brandService.save(brand);return R.ok();}

Mall第二天

产品功能

一.拖拽功能

  1. el-tree中添加draggable

  2.allow-drop

二.开关按钮：将拖拽设为可以关闭

 <el-switch v-model="draggable" active-text="开启拖拽" inactive-text="关闭拖拽"></el-switch>:draggable="draggable"

三批量删除

  1. 给el-tree起名字  ref="menuTree"

   2. 返回所有节点组成的数组 let checkedNodes = this.$refs.menuTree.getCheckedNodes();

品牌功能

 Ⅰ开关

  1.开关显示：将整行数据绑定@change，通过updateBrandStatus进行修改

 <el-table-column prop="showStatus" header-align="center" align="center" label="显示状态"><template slot-scope="scope"><el-switchv-model="scope.row.showStatus"active-color="#13ce66"inactive-color="#ff4949":active-value="1":inactive-value="0"@change="updateBrandStatus(scope.row)"></el-switch></template></el-table-column>

2.监听开关

updateBrandStatus(data) {console.log("最新信息", data);let { brandId, showStatus } = data;//发送请求修改状态this.$http({url: this.$http.adornUrl("/product/brand/update"),method: "post",data: this.$http.adornData({ brandId, showStatus}, false),}).then(({ data }) => {this.$message({type: "success",message: "状态更新成功",});});},

Ⅱ.文件上传：服务端签名后上传

1.开通oss:/?utm_content=se_1000301881

2.密码账号管理

添加用户

赋予权限

oss文档

3.nacosk微服务配置

alibaba:cloud:access-key: LTAI4GEpoo5rMfAPRkwyVxM6secret-key: 7Y4STnZsTP7XThzIx2L7UlsJyDzQkioss:endpoint: oss-cn-chengdu.aliyuncs

4.注册到gateWay

 - id: third_party_routeuri: lb://gulimall-third-partypredicates:- Path=/api/thirdparty/**filters:- RewritePath=/api/thirdparty/(?<segment>.*),/$\{segment}

5.前端：引入写好的单独上传和批量上传

  修改字段显示

 <el-table-column prop="logo" header-align="center" align="center" label="品牌logo地址"><template slot-scope="scope"><!-- <el-image style="width: 100px; height: 80px" :src="scope.row.logo" fit="fill"></el-image> --><img :src="scope.row.logo" style="width: 100px; height: 80px"></template></el-table-column>

 表单验证

 <el-form-item label="检索首字母" prop="firstLetter"><el-input v-model="dataForm.firstLetter" placeholder="检索首字母"></el-input></el-form-item><el-form-item label="排序" prop="sort"><el-input v-model.number="dataForm.sort" placeholder="排序"></el-input></el-form-item>firstLetter: [{validator:(rule,value,callback)=>{if(value ==''){callback(new Error("首字母必须填写"));}else if(!/^[a-zA-Z]$/.test(value)){callback("首字母必须a-z或A-Z")}else{callback();}},trigger: "blur",},],sort: [{validator:(rule,value,callback)=>{if(value ==''){callback(new Error("排序必须填写"));}else if(!Number.isInteger(value)|| value<0){callback("排序必须是一个大于0的整数")}else{callback();}},trigger: "blur",},],

6.oss配置跨域

7.后端校验

 依赖

      <dependency><groupId>javax.validation</groupId><artifactId>validation-api</artifactId><version>2.0.1.Final</version></dependency>

依赖校验

 ListValue：使我们自己写的校验规则，同时校验时又要分为添加数据和修改数据

@NotNull(groups = {AddGroup.class, UpdateStatusGroup.class})@ListValue(vals={0,1},groups = {AddGroup.class, UpdateStatusGroup.class})private Integer showStatus;/*** 检索首字母*/@NotEmpty(groups={AddGroup.class})@Pattern(regexp="^[a-zA-Z]$",message = "检索首字母必须是一个字母",groups={AddGroup.class,UpdateGroup.class})private String firstLetter;/**

Contorller添加注解

    @RequestMapping("/save")//@RequiresPermissions("product:brand:save")public R save(@Validated({AddGroup.class}) @RequestBody BrandEntity brand/*,BindingResult result*/){brandService.save(brand);return R.ok();}