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-switch
            v-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:https://www.aliyun.com/?utm_content=se_1000301881

 

2.密码账号管理

添加用户

 

赋予权限

 

oss文档

  https://github.com/alibaba/aliyun-spring-boot/tree/master/aliyun-spring-boot-samples/aliyun-oss-spring-boot-sample

 

3.nacosk微服务配置

alibaba:
   cloud:
      access-key: LTAI4GEpoo5rMfAPRkwyVxM6
      secret-key: 7Y4STnZsTP7XThzIx2L7UlsJyDzQki
      oss:
       endpoint: oss-cn-chengdu.aliyuncs.com

4.注册到gateWay

 - id: third_party_route
          uri: lb://gulimall-third-party
          predicates:
            - 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();
    }