前端标签网站：https://element.eleme.cn/#/zh-CN/component/tree
mybatisplus文档：mp.baomidou.com/guide/logic-delete.html
 
树：https://element.eleme.cn/#/zh-CN/component/tree 【在这里面找属性，可以默认展开某个节点】【内部可以加按钮，删除、编辑、追加】【可拖拽节点】

可拖拽节点： https://element.eleme.cn/#/zh-CN/component/tree#ke-tuo-zhuai-jie-dian 
switch开关： https://element.eleme.cn/#/zh-CN/component/switch#switch-kai-guan 【是否允许拖动】


对话框【可以嵌套表单】：https://element.eleme.cn/#/zh-CN/component/dialog#ji-ben-yong-fa 
表单组件： https://element.eleme.cn/#/zh-CN/component/form 【嵌入到对话框】
弹框： https://element.eleme.cn/#/zh-CN/component/message-box 【删除确认、取消】
消息提示： https://element.eleme.cn/#/zh-CN/component/message 【删除成功】


table自定义列模板-滑动按钮：https://element.eleme.cn/#/zh-CN/component/message【显示状态】
switch开关： https://element.eleme.cn/#/zh-CN/component/switch#switch-kai-guan 【放在自定义模板里面】
upload，文件上传： https://element.eleme.cn/#/zh-CN/component/upload 
springcloud文档： https://github.com/alibaba/spring-cloud-alibaba/blob/master/README-zh.md 
表单数据自定义校验： https://element.eleme.cn/#/zh-CN/component/form#zi-ding-yi-xiao-yan-gui-ze 

接口文档：https://easydoc.xyz/s/78237135/ZUqEdvA4/hKJTcbfd

1、在gateway创建配置类
CorsWebFilter是拦截器？还是过滤器？

@Configuration
public class GulimallCorsConfiguration {

    @Bean
    public CorsWebFilter corsWebFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        // 1、配置跨域
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.setAllowCredentials(true);// 否则跨域请求会丢失cookie信息

        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsWebFilter(source);
    }
}

utils -> httpRequest.js
封装了ajax请求，例如get请求可能会被缓存，默认拼一个时间戳参数，每次发新情求
所以封装一个代码片段，直接请求是调用httpRequest封装的get请求，输入httpget就行
文件->首选项->用户片段
vue.code-snippets
{
	"生成vue模板": {
		"prefix": "vue",
		"body": [
			"<template>",
			"<div></div>",
			"</template>",
			"",
			"<script>",
			"//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
			"//例如：import 《组件名称》 from '《组件路径》'",
			"",
			"export default {",
			"//import引入的组件需要注入到对象中才能使用",
			"components: {},",
			"props: {},",
			"data() {",
			"//这里存放数据",
			"return {};",
			"},",
			"//计算属性 类似于data概念",
			"computed: {},",
			"//监控data中的数据变化",
			"watch: {},",
			"//方法集合",
			"methods: {},",
			"//声明周期 - 创建完成（可以访问当前this实例）",
			"created() {},",
			"//声明周期 - 挂载完成（可以访问DOM元素）",
			"mounted() {},",
			"beforeCreate() {}, //生命周期 - 创建之前",
			"beforeMount() {}, //生命周期 - 挂载之前",
			"beforeUpdate() {}, //生命周期 - 更新之前",
			"updated() {}, //生命周期 - 更新之后",
			"beforeDestroy() {}, //生命周期 - 销毁之前",
			"destroyed() {}, //生命周期 - 销毁完成",
			"activated() {} //如果页面有keep-alive缓存功能，这个函数会触发",
			"};",
			"</script>",
			"<style scoped>",
			"</style>",
		]
	},
	"http-get请求": {
		"prefix": "httpget",
		"body": [
			"this.\\$http({",
			"url: this.\\$http.adornUrl(''),",
			"method: 'get',",
			"params: this.\\$http.adornParams({})",
			"}).then(({data}) => {",
			"})"
		],
		"description": "httpGET请求"
	},
	"http-post请求": {
		"prefix": "httppost",
		"body": [
			"this.\\$http({",
			"url: this.\\$http.adornUrl(''),",
			"method: 'post',",
			"data: this.\\$http.adornData(data, false)",
			"}).then(({ data }) => { });"
		],
		"description": "httpPOST请求"
	}
}

1、导入依赖，可以用启动器，然后注入OSSClient，这里直接自己创建OSSClient对象
    <dependency>
    	<groupId>com.aliyun.oss</groupId>
    	<artifactId>aliyun-sdk-oss</artifactId>
   	 	<version>3.10.2</version>
    </dependency>

2、直接上传
    @Test
    void testUpload() throws FileNotFoundException {
        // Endpoint以杭州为例，其它Region请按实际情况填写。
        String endpoint = "oss-cn-shanghai.aliyuncs.com";
        // 云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用RAM子账号进行API访问或日常运维，请登录 https://ram.console.aliyun.com 创建。
        String accessKeyId = "XX";
        String accessKeySecret = "XX";

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        // 上传文件流。
        InputStream inputStream = new FileInputStream("C:\\Users\\Administrator\\Desktop\\spring cloud alibaba全解2.pdf");
        ossClient.putObject("gulimall-wan", "spring cloud alibaba全解2.pdf", inputStream);

        // 关闭OSSClient。
        ossClient.shutdown();

        System.out.println("上传成功");
    }

    @RequestMapping("/save")
    // @RequiresPermissions("product:brand:save")
    public R save(@Validated({AddGroup.class}) @RequestBody BrandEntity brand, BindingResult result){
        // 使用统一的异常处理，将异常抛出
        if (result.hasErrors()) {
            Map<String, String> map = new HashMap<>();
            // 获取校验的错误结果
            result.getFieldErrors().forEach((item) -> {
                // 获取到错误提示FieldError
                String message = item.getDefaultMessage();
                // 获取错误的属性名字
                String field = item.getField();
                map.put(field, message);
            });
            return R.ok().error(400, "提交的数据不合法").put("data", map);
        }else {

        }
        brandService.save(brand);
        return R.ok();
    }

https://easydoc.xyz/s/78237135/ZUqEdvA4/hKJTcbfd

1.PO(persistant object）持久对象
mapper查询出来的记录都用PO封装，一个对象代表一条记录，多个记录可以用PO的集合。PO中应该不包
含任何对数据库的操作。【例如Entity类】

2.DO（Domain Object）领域对象
就是从现实世界中抽象出来的有形或无形的业务实体。

3.TO(Transfer Object)，数据传输对象
不同的应用程序之间传输的对象

4.DTO(Data Transfer Object)数据传输对象
泛指于 展示层与服务层之间的数据传输对象

5.VO（value object）值对象
view object：视图对象，接收页面请求数据封装的对象， 封装返回给页面的对象
例如 @JsonInclude(JsonInclude.Include.NON_EMPTY)：如果是空就不返回

6.BO（business object）业务对象
由多个不同类型的PO组成，例如一个简历对象，由教育经历PO，工作经历PO组成

7.POJO（plain ordinary java object）简单无规则java对象
POJO是 DO/DTO/BO/BO的统称，只有基本的setter、getter方法

8.DAO（data access object）数据访问对象
是一个sun的一个标准j2ee 设计模式，这个模式中有个接口就是DAO，它负持久
层的操作。为业务层提供接口。此对象用于访问数据库。通常和PO结合使用，DAO中包
含了各种数据库的操作方法。通过它的方法，结合PO对数据库进行相关的操作。夹在业
务逻辑与数据库资源中间。配合vo，提供数据库的 CRUD 操作.

* 1、controller：处理请求，接收和校验数据【JSR303】
* 2、service接收controller传来的数据，进行业务处理
* 3、controller接收service处理完的数据，封装页面指定的vo

https://www.cnblogs.com/misscai/p/12809404.html

（一）切换淘宝镜像

　　npm install -g cnpm --registry=https://registry.npm.taobao.org

（二）设置权限(管理员打开cmd)

　　输入set-ExecutionPolicy RemoteSigned 选择A

      

（三）安装依赖

　　注意： npm 有些可能下载不下来

　　用 　　cnpm install 

（四）启动

　　npm run dev

https://blog.csdn.net/qq_26761587/article/details/73691189

两种实现：
1、发送到网关
@FeignClient("gulimall-gateway")
public interface CouponFeignService {

    @RequestMapping("/api/coupon/coupon/member/list")
    public R membercoupons();
}

2、直接发送到服务
@FeignClient("gulimall-coupon")
public interface CouponFeignService {

    @RequestMapping("/coupon/coupon/member/list")
    public R membercoupons();
}

实现步骤：
0、引入open-feign依赖
1、要把服务注册到注册中心中
2、开启远程调用功能
	@EnableFeignClients(basePackages="com.atguigu.gulimall.member.feign")

3、指定@FeignClient
@FeignClient("gulimall-coupon")
public interface CouponFeignService {

    @RequestMapping("/coupon/coupon/member/list")
    public R membercoupons();
}

     * 1、CouponFeignService.saveSpuBounds( spuBoundTo);
     * 1) 、@RequestBody将这个对象转为json。
     * 2)、找到gulimaLl-coupon服务，给/coupon/spubounds/save发送请求。
     * 将上一步转的jsor放在请求体位置，发送请求，
     * 3) 、对方服务收到请求。请求体里有json数据。
     * (@RequestBody SpuBoundsEntity spuBounds)﹔将请求体的json转为SpuBoundsEntity;
     * 只要jsor数据模型是兼容的。双方服务无需使用同—个to

找商品服务，后台管理，都有

找商品服务，后台管理，都有

1、@EnableTransactionManagement

2、@Transactional

INSERT INTO sys_menu (menu_id, parent_id, name, url, perms, type, icon, order_num) VALUES (76, 37, '规格维护', 'product/attrupdate', '', 2, 'log', 0);

1、启动renren-fast后端，启动前端项目npm run dev
2、登录localhost:8001,admin admin
新增后台管理的一级目录：商品系统
	系统管理->菜单管理->新增-> 目录

3、新增菜单：分类维护，选中商品系统【可看下图】

4、菜单的url：localhost:8008/product/category 会转换成product-category作为请求路由【会根据不同的路由加载不同的组件（这是vue的功能）】
新建category.vue文件放在目录：src->views->modules->product

输入vue根据模板生成代码

5、这个是展示属性数据用的
doc:https://element.eleme.cn/#/zh-CN/component/tree
使用<el-tree>展示三级分类

6、真实数据应该是调用商品服务的接口来的，所以可以查看项目内部sys->user.vue是怎么调接口的
问题：要将请求发送到网关，而不是8080【全局查询localhost:8080，修改为网关的地址:80】
1）修改static/config/index.js
      window.SITE_CONFIG['baseUrl'] = 'http://localhost:88/api';

7、让gulimall-fast后端项目注册到网关中
1）引入依赖
		<dependency>
			<groupId>com.atguigu.gulimall</groupId>
			<artifactId>gulimall-common</artifactId>
			<version>0.0.1-SNAPSHOT</version>
		</dependency>
		
2）添加Nacos配置
spring:
  application:
    name: renren-fast
  cloud:
    nacos:
      discovery:
        server-addr: 127.0.0.1:8848
        
3）在Application上加上注解，将该服务注册到注册中心中
@EnableDiscoveryClient

4）设置网关转发规则：带负载均衡的，路径匹配转发规则
例子：http://localhost:88/api/captcha.jpg  http://localhost:8080/api/captcha.jpg
    http://localhost:8080/renren-fast/captcha.jpg
      - id: admin_route
        uri: lb://renren-fast
        predicates:
        - Path=/api/**    
但是！正确的是还要带上项目名 server-servlet-context-path的路径，且去掉api **/
  最后版本：
      - id: admin_route
        uri: lb://renren-fast
        predicates:
        - Path=/api/**
        filters:
          - RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment}
          
5）重启renren-fast 、 gateway


6）出现问题header contains multiple values 'http://localhost:8001, http://localhost:8001', but only one is allowed.
配置了多个跨域，找到renren-fast的跨域，给注释掉
重启访问，成功进入后台管理页面
    
8、商品管理请求404
原因：所有api请求转发到了renren-fast

Request URL: http://localhost:88/api/product/category/list/tree
Request Method: GET
Status Code: 404 Not Found
Remote Address: [::1]:88
Referrer Policy: no-referrer-when-downgrade

    解决：api/product转到商品服务
在gateway 配置路由规则
      - id: product_route
        uri: lb://gulimall-product
        predicates:
        - Path=/api/product/**
        filters:
        - RewritePath=/api/(?<segment>.*),/$\{segment}


9、配置商品服务配置
1）新建bootstrap.properties
spring.application.name=gulimall-product
spring.cloud.nacos.config.server-addr=127.0.0.1:8848
spring.cloud.nacos.config.namespace=a152f0a8-3f55-4496-bc9a-c26df96bb2f9
spring.cloud.nacos.config.group=dev
#如果这个dev不放开的话，默认的gulimall-coupon不生效【会加载dev分组下的所有配置】

spring.cloud.nacos.config.extension-configs[0].data-id=datasource.yml
spring.cloud.nacos.config.extension-configs[0].group=dev
spring.cloud.nacos.config.extension-configs[0].refresh=true

spring.cloud.nacos.config.extension-configs[1].data-id=mybatis.yml
spring.cloud.nacos.config.extension-configs[1].group=dev
spring.cloud.nacos.config.extension-configs[1].refresh=true

spring.cloud.nacos.config.extension-configs[2].data-id=spring.yml
spring.cloud.nacos.config.extension-configs[2].group=dev
spring.cloud.nacos.config.extension-configs[2].refresh=true
2）在Nacos配置中心新建相关配置，服务发现、mybatis-plus、oss
    http://127.0.0.1:8848/nacos
3）开启服务注册发现功能，在Application添加注解
    @EnableDiscoveryClient
4）重启，访问：http://localhost:88/api/product/category/list/tree
错误：{"msg":"invalid token","code":401}，没有令牌。说明请求被renren-fast拦截了
原因：路由 api/product被api/** 拦截了
解决：把gateway精确的路由放在前面，防止api/**优先拦截      **/

10、这个时候已经可以显示数据了，看图

  methods: {
    getMenus() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get",
      }).then(({ data }) => {// 解构data，有三层  解构data.data对象的data属性
        console.log("成功获取到菜单数据...", data.data);
        this.menus = data.data;// 给menus数组设置值
      });
    },  
	created() {// 生命周期也是method中的方法
   		this.getMenus();
  	}
  }

<el-tree
      :data="menus"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false">
    </el-tree>

<script>
  export default {
   data() {
    return {
      menus: []
    };
  },
  methods: {
    getMenus() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"), // 调用http.adornUrl拼接
        method: "get",
      }).then(({ data }) => {// 解构返回值对象中的data属性
        console.log("成功获取到菜单数据...", data.data);
        this.menus = data.data;// data.data获得R对象中的data属性，获得结果集数组
      });
    }
</script>

<el-tree
      :data="data"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            @click="() => append(data)">
            Append
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            Delete
          </el-button>
        </span>
      </span>
    </el-tree>

<script>
  export default {
    methods: {
      append(data) {
      },

      remove(node, data) {
      }
    }
  };
</script>

1、导入数据
	执行pms_catelog.sql【分布式基础/docs/代码/sql】
	
2、CategoryEntity添加子分类List，每个分类会保存 孩子分类集合
	@TableField(exist = false)  // 库中不存在该字段
	List<CategoryEntity> children;

3、三级分类接口
	/**
     * 查出所有分类以及子分类，以树形结构组装起来
     */
    @RequestMapping("/list/tree")
    // @RequiresPermissions("product:category:list")
    public R list(){
        List<CategoryEntity> entities = categoryService.listWithTree();
        return R.ok().put("data", entities);
    }

4、查询分类，并给分类设置子分类list【lambdas表达式】
    @Override
    public List<CategoryEntity> listWithTree() {
        // 1、查出所有分类
        List<CategoryEntity> entities = baseMapper.selectList(null);
        // 2、组装成父子的属性结构
        // 2.1)找到所有的一级分类
        List<CategoryEntity> level1Menus = entities.stream().filter(categoryEntity ->
                categoryEntity.getParentCid() == 0
        ).map(menu -> {// 给每一个元素设置 属性
            menu.setChildren(getChildrens(menu, entities));
            return menu;
        }).sorted((menu1, menu2) ->// 排序
                (menu1.getSort() == null ? 0 : menu1.getSort()) - (menu2.getSort() == null ? 0 : menu2.getSort())
        ).collect(Collectors.toList());// 结果包装成list

        return level1Menus;
    }

    // 递归给每一个menu设置 children
    private List<CategoryEntity> getChildrens(CategoryEntity root, List<CategoryEntity> all) {
        List<CategoryEntity> children = all.stream().filter(menu ->
                menu.getParentCid().equals(root.getCatId())
        ).map(menu -> {
            menu.setChildren(getChildrens(menu, all));
            return menu;
        }).sorted((menu1, menu2) ->
                (menu1.getSort() == null ? 0 : menu1.getSort()) - (menu2.getSort() == null ? 0 : menu2.getSort())
        ).collect(Collectors.toList());
        return children;
    }

1、逻辑删除
2、消息提示【是否删除】https://element.eleme.cn/#/zh-CN/component/message
	this.$confirm
3、弹框【删除成功】https://element.eleme.cn/#/zh-CN/component/message-box
	this.$message

    remove(node, data) {
      var ids = [data.catId];
      this.$confirm(`是否删除【${data.name}】菜单?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/product/category/delete"),
            method: "post",
            data: this.$http.adornData(ids, false),
          }).then(({ data }) => {
            this.$message({
              message: "菜单删除成功",
              type: "success",
            });
            this.getMenus();// 删除后页面需要同步刷新，不显示已删除的分类
            this.expandedKey = [node.parent.data.catId];//设置需要默认展开的父节点id【跟删除前保持一致】
          });
        })
        .catch(() => {});

      console.log("remove", node, data);
    },
  },

1、@RequestBody，使用postman测试

2、使用逻辑删除：并且如果被引用了则不能删除该分类 doc：mp.baomidou.com/guide/logic-delete.html
在product配置里加入以下配置
mybatis-plus:
  mapper-locations: classpath:/mapper/**/*.xml
  global-config:
    db-config:
      id-type: auto
     -- logic-delete-field: showStatus  # 全局逻辑删除的实体字段名(since 3.3.0,配置后可以忽略不配置步骤2)【注：这个不要配置，否则整个服务都配置上了】
      logic-delete-value: 1 # 逻辑已删除值(默认为 1)
      logic-not-delete-value: 0 # 逻辑未删除值(默认为 0)
          
	/**
	 * 如果与全局的配置不一样，在字段上配置逻辑值
	 */
	@TableLogic(value = "1", delval = "0")// 可以修改1和0的含义
	private Integer showStatus;

3、添加dao的debug日志
logging:
  level:
    com.atguigu.gulimall: debug
        
4、CategoryController.java
    /**
     * 删除
     */
    @RequestMapping("/delete")
    // @RequiresPermissions("product:category:delete")
    public R delete(@RequestBody Long[] catIds){
		// categoryService.removeByIds(Arrays.asList(catIds));
        //1、检查当前册除的菜单，是否被别的地方引用
        categoryService.removeMenuByIds(Arrays.asList(catIds));

        return R.ok();
    }
5、CategoryServiceImpl.java  //TODO 逻辑删除
    @Override
    public void removeMenuByIds(List<Long> asList) {
        //TODO 1、检查当前副除的菜单，是否被别的地方引用

        //逻辑删除
        baseMapper.deleteBatchIds(asList);
    }

6、拖拽后保存分类数据 CategoryController.java
    /**
     * 拖拽后保存分类数据[parentId、sort、catLevel]
     * 条件[catId]
     * @param category parentId、sort、catLevel、catId
     * @return
     */
    @RequestMapping("/update/sort")
    // @RequiresPermissions("product:category:update")
    public R updateSort(@RequestBody CategoryEntity[] category){
        categoryService.updateBatchById(Arrays.asList(category));

        return R.ok();
    }

1、v-if="node.level <=2" // 只有1级和2级结点可以追加
2、点击append按钮，dialogVisible=true，显示对话框<el-dialog>
3、<el-dialog>

    <el-tree
      :data="menus" // v-bind:data 绑定menus
      :props="defaultProps" // 1、children子树是哪个字段；2、label页面默认显示的是哪个字段
      :expand-on-click-node="false"  // 只有点击三角形才打开
      node-key="catId" 	// 每个结点都有一个data属性值是唯一的，设置后默认展开的菜单就可以指定node.catId，因为每个结点都可以找到其node.parent.data.catId
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">//append + delete删除分类
        <span>{{ node.label }}</span>
        <span>
          <el-button
            v-if="node.level <=2" // 只有1级和2级结点可以追加
            type="text"
            size="mini"
            @click="() => append(data)" // append按钮，点击后会显示对话框【dialogVisible=true】
          >Append</el-button>
        </span>
      </span>
    </el-tree>

    <el-dialog // append点击后弹出 对话框，内部可以包含表单
      :title="title"
      :visible.sync="dialogVisible" // false默认关闭
      width="30%"
      :close-on-click-modal="false" // 点击对话框外面不关闭对话框【这里需要boolean值，所以加:绑定】
    >
      <el-form :model="category"> // 绑定了一个category
        <el-form-item label="分类名称">
          <el-input v-model="category.name" autocomplete="off"></el-input>// 双向绑定
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="category.icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="计量单位">
          <el-input v-model="category.productUnit" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitData">确 定</el-button>// 确定调用方法
      </span>
    </el-dialog>

1、draggable：通过一个按钮控制是否可以拖拽，以免误操作
	这里后面加了一个开启拖拽按钮，绑定了draggable的值，点击后才为true
2、allowDrop：此次拖拽是否合法？
	拖拽后不能改变树的高度【以当前节点为根的这棵树的高度+父节点层数<=3，否则新树的高度会改变】
3、handleDrop：拖拽合法触发的事件【存库】
	1、新的parentId
	2、兄弟节点的sort
	3、level层级【以自己为根的那棵树层级是否需要修改】
	
4、发送请求后，要刷新maxlevel 、updateNodes的数据

<el-button v-if="draggable" @click="batchSave">批量保存</el-button>
<el-button type="danger" @click="batchDelete">批量删除</el-button>

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

<template>
  <div>
    <el-switch v-model="draggable" active-text="开启拖拽" inactive-text="关闭拖拽"></el-switch>
    // 只有点击了批量保存，拖拽的数据才会存库，绑定时间batchSave
    <el-button v-if="draggable" @click="batchSave">批量保存</el-button>
    <el-button type="danger" @click="batchDelete">批量删除</el-button>
    <el-tree
      :data="menus" // v-bind:data 绑定menus
      :props="defaultProps" // 1、children子树是哪个字段；2、label页面默认显示的是哪个字段
      :expand-on-click-node="false"  // 只有点击三角形才打开
      show-checkbox // 结点可以被选择【批量选择，批量删除】
      node-key="catId" 	// 每个结点都有一个data属性值是唯一的，设置后默认展开的菜单就可以指定node.catId，因为每个结点都可以找到其node.parent.data.catId
      :default-expanded-keys="expandedKey" // 默认展开的菜单，删除的时候这个值会更新
      :draggable="draggable"	// 可拖拽节点
      :allow-drop="allowDrop"	// 是否可以拖到指定位置，方法有三个参数【拖动、目标、类型(内部，同级)】
      @node-drop="handleDrop"	// 节点拖拽成功处触发的事件
      ref="menuTree" // 当前树 this.$refs.menuTree.getCheckedNodes();可以获得选中节点
    >
        // 下面这个标签是参考的自定义dialog，给树的每一个Node都增添按钮slot
      <span class="custom-tree-node" slot-scope="{ node, data }">//append + delete删除分类
        <span>{{ node.label }}</span>
        <span>
          <el-button
            v-if="node.level <=2" // 只有1级和2级结点可以追加
            type="text"
            size="mini"
            @click="() => append(data)" // append按钮，点击后会显示对话框【dialogVisible=true】
          >Append</el-button>
          <el-button 
            type="text" 
            size="mini" 
            @click="edit(data)"
          >edit</el-button>
          <el-button
            v-if="node.childNodes.length==0" // 没有子节点才可以删除
            type="text"
            size="mini"
            @click="() => remove(node, data)"
          >Delete</el-button>
        </span>
      </span>
    </el-tree>

    <el-dialog // append点击后弹出 对话框，内部可以包含表单
      :title="title"
      :visible.sync="dialogVisible" // false默认关闭
      width="30%"
      :close-on-click-modal="false" // 点击对话框外面不关闭对话框【这里需要boolean值，所以加:绑定】
    >
      <el-form :model="category"> // 绑定了一个category
        <el-form-item label="分类名称">
          <el-input v-model="category.name" autocomplete="off"></el-input>// 双向绑定
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="category.icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="计量单位">
          <el-input v-model="category.productUnit" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitData">确 定</el-button>// 确定调用方法
      </span>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    return {
      pCid: [],// 当拖拽存库代码移动到batchSave时，需要用到pCid默认展开parentId，所以在handleDrop要给pCid存入parentId值
      draggable: false,
      updateNodes: [],
      maxLevel: 0,
      title: "",
      dialogType: "", //edit,add
      category: {// 分类数据，给上默认值
        name: "",
        parentCid: 0,
        catLevel: 0,
        showStatus: 1,
        sort: 0,
        productUnit: "",
        icon: "",
        catId: null,
      },
      dialogVisible: false,
      menus: [],
      expandedKey: [],// 默认需要展开的catId
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },

  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getMenus() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"), // 调用http.adornUrl拼接
        method: "get",
      }).then(({ data }) => {// 解构返回值对象中的data属性
        console.log("成功获取到菜单数据...", data.data);
        this.menus = data.data;// data.data获得R对象中的data属性，获得结果集数组
      });
    },
    batchDelete() {
      let catIds = [];
      // this当前vue实例，this.$refs获得当前vue所有组件，this.$refs.menuTree：获得menuTree组件
      // 获取menuTree组件所有选中的data【注意这里是data而不是treeNode】
      // 该方法有两个参数：1、只包含叶子节点  	默认false【永远不包含父节点，我觉得这个应该是true】
      //			    2、默认包含半选节点   默认false【当全选后才包含父节点】
      let checkedNodes = this.$refs.menuTree.getCheckedNodes();
      console.log("被选中的元素", checkedNodes);
      for (let i = 0; i < checkedNodes.length; i++) {
        catIds.push(checkedNodes[i].catId);
      }
      this.$confirm(`是否批量删除【${catIds}】菜单?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {// 点击确定执行
          this.$http({
            url: this.$http.adornUrl("/product/category/delete"),
            method: "post",
            data: this.$http.adornData(catIds, false),
          }).then(({ data }) => {
            this.$message({
              message: "菜单批量删除成功",
              type: "success",
            });
            this.getMenus();
          });
        })
        .catch(() => {});// 点击取消执行
    },
    // 批量保存拖拽功能的更新值
    batchSave() {
      this.$http({
        url: this.$http.adornUrl("/product/category/update/sort"),
        method: "post",
        data: this.$http.adornData(this.updateNodes, false),
      }).then(({ data }) => {
        this.$message({
          message: "菜单顺序等修改成功",
          type: "success",
        });
        //刷新出新的菜单
        this.getMenus();
        //设置需要默认展开的菜单
        this.expandedKey = this.pCid;
        this.updateNodes = [];// 重置
        // this.pCid = 0;
      });
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {// 拖拽允许触发的事件
      // draggingNode, dropNode, dropType【三个参数，跟拖拽条件的三个参数一样】
      // draggingNode：该参数值不会改变，dropNode会动态修改level层级与el-tree保持一致
      // 要修改三个数据：1、draggingNode的父id
      //			  2、最新顺序sort，获取节点拖动后的所有兄弟节点的集合【通过dropNode获得】
      // 如果是inner，则是dropNode.childNodes,else：dropNode.parent.childNodes
      //			  3、还要递归修改层级【自己的层级+所有子节点的层级】
      //				修改条件：draggingNode.level与修改后的level不相等
      console.log("handleDrop: ", draggingNode, dropNode, dropType);
      let pCid = 0;//1、当前节点最新的父节点id【更新draggingNode的parentCid】
      let siblings = null;
      if (dropType == "before" || dropType == "after") {
        // 如果是同级，父节点修改为dropNode.parent.data.catId
        pCid = dropNode.parent.data.catId == undefined ? 0 : dropNode.parent.data.catId;
       //获得兄弟节点，包含了level更新后的draggingNode，但是data.catLevle是数据库字段没更新【需更新】
        siblings = dropNode.parent.childNodes;
      } else {
        // 内部，父节点修改为dropNode.data.catId
        pCid = dropNode.data.catId;
       //获得兄弟节点，包含了level更新后的draggingNode，但是data.catLevle是数据库字段没更新【需更新】
        siblings = dropNode.childNodes;
      }
      // 需要自动展开的tree
      this.pCid.push(pCid);

      //2、当前拖拽节点的最新顺序【更新sort】
      for (let i = 0; i < siblings.length; i++) {
        //如果遍历的是当前正在拖拽的节点【需要修改parentId、catLevel】
        if (siblings[i].data.catId == draggingNode.data.catId) {
          // 记录当前level
          let catLevel = draggingNode.level;
          // 如果当前level与修改后的level不同，则要修改catLevle字段的值【存库】【并且children的catLevel字段也需要更新，否则就都不用更新】
          if (siblings[i].level != draggingNode.level) {
            // 将catLevel字段修改为正确的level
            catLevel = siblings[i].level;
            // 如果层级需要修改，则所有children的层级都需要修改
            // 参数是：从dropNode获得的当前节点【dropNode中的level是更新过后的正确层级值】
            this.updateChildNodeLevel(siblings[i]);
          }
          // 将当前节点的sort、parentCid、catLevel更新【catLevel字段已经修改为正确的level】
          this.updateNodes.push({
            catId: siblings[i].data.catId,
            sort: i,
            parentCid: pCid,
            catLevel: catLevel,
          });
        } else {// 更新其他兄弟节点的sort，条件是catId【parentId、catLevel不用改】
          this.updateNodes.push({ catId: siblings[i].data.catId, sort: i });
        }
      }

      //3、当前拖拽节点的最新层级
      console.log("updateNodes", this.updateNodes);
      // 存库逻辑放到批量保存了
      this.maxLevel = 0;// 每次一拖拽完都应该重置
    },
    updateChildNodeLevel(node) {
      if (node.childNodes.length > 0) {
        for (let i = 0; i < node.childNodes.length; i++) {
          var cNode = node.childNodes[i].data;
          // 修改catLevel为正确的level
          this.updateNodes.push({catId: cNode.catId, catLevel: node.childNodes[i].level,
          });
          // 递归遍历每一个Node的childNodes集合
          this.updateChildNodeLevel(node.childNodes[i]);
        }
      }
    },
    // 允许拖拽条件
    allowDrop(draggingNode, dropNode, type) {
      // 先记住两点：1、层数与高度是相反的【层数为3，高度为1】【这里层数看做深度，顶层层数是1】
      //		   2、被拖动的当前节点的高度+目标父节点的层数<=3【高度+层数=整颗树高度（高度不能改变）】
      // 		   3、高度计算：查找所有的子节点找到最深节点的层数【就是深度】深度-当前节点层数+1=高度
      //		   4、目标父节点【如果是inner，dropNode就是父节点；否则dropNode.parent是父节点】

      console.log("allowDrop:", draggingNode, dropNode, type);
      // 找到当前节点的最深子节点的深度maxLevel
      this.maxLevel = draggingNode.level;
      // 注意：这里不是传的不是draggingNode.data，而是draggingNode，然后递归使用draggingNode.childNodes，而不使用draggingNode.data.children
      // 原因：children是数据库字段，没有及时更新，多次拖拽后数据会混乱
      this.countNodeLevel(draggingNode);
      // maxLevel-当前节点的深度+1=以当前节点作为根节点的树的高度
      let high = Math.abs(this.maxLevel - draggingNode.level) + 1;
      console.log("高度：", high);

      // 整棵树的高度不能改变，所以 父节点层数+拖拽树高度=新树高度【不能大于3】
      if (type == "inner") {
        // console.log(
        //   `this.maxLevel：${this.maxLevel}；draggingNode.data.catLevel：${draggingNode.data.catLevel}；dropNode.level：${dropNode.level}`
        // );
        return high + dropNode.level <= 3;
      } else {
        return high + dropNode.parent.level <= 3;
      }
    },
    countNodeLevel(node) {
      // 找到所有子节点，求出最大深度
      // 这里使用node.childNodes和level，不使用数据库的children和catLevel
      // childNodes和level是随tree改变而实时更新
      if (node.childNodes != null && node.childNodes.length > 0) {
        for (let i = 0; i < node.childNodes.length; i++) {
          if (node.childNodes[i].level > this.maxLevel) {
            this.maxLevel = node.childNodes[i].level;
          }
          this.countNodeLevel(node.childNodes[i]);
        }
      }
    },
    edit(data) {
      console.log("要修改的数据", data);
      this.dialogType = "edit";
      this.title = "修改分类";
      this.dialogVisible = true;
      //发送请求获取当前节点最新的数据，查询需要修改的这条数据的最新数据
      this.$http({
        url: this.$http.adornUrl(`/product/category/info/${data.catId}`),
        method: "get",
      }).then(({ data }) => {// 解构将值赋给data
        //请求成功
        console.log("要回显的数据", data);
        this.category.name = data.data.name;
        this.category.catId = data.data.catId;
        this.category.icon = data.data.icon;
        this.category.productUnit = data.data.productUnit;
        this.category.parentCid = data.data.parentCid;// 父菜单也要设置，edit提交后默认展开
        this.category.catLevel = data.data.catLevel;
        this.category.sort = data.data.sort;
        this.category.showStatus = data.data.showStatus;
        /**
         *         parentCid: 0,
        catLevel: 0,
        showStatus: 1,
        sort: 0,
         */
      });
    },
    append(data) {// 给category对象设置默认值，并且data是当前选中的node，所以append的node就是其子层
      console.log("append", data);
      this.dialogType = "add";// 设置为添加
      this.title = "添加分类";
      this.dialogVisible = true;// 展示对话框
      this.category.parentCid = data.catId;// 父id=父层id
      this.category.catLevel = data.catLevel * 1 + 1; // 子层=父层+1
      this.category.catId = null;// 数据库默认生成
      this.category.name = "";// 清空回显值
      this.category.icon = "";// 清空回显值
      this.category.productUnit = "";// 清空回显值
      this.category.sort = 0;// 清空回显值
      this.category.showStatus = 1;// 清空回显值
    },

    submitData() {// 修改和添加 统一调用这个方法
      if (this.dialogType == "add") {
        this.addCategory();
      }
      if (this.dialogType == "edit") {
        this.editCategory();
      }
    },
    //修改三级分类数据
    editCategory() {
      var { catId, name, icon, productUnit } = this.category;// 1、因为对话框dialog使用的是双向绑定，页面修改会修改对象值； 2、使用解构，不修改的字段是null；
      this.$http({
        url: this.$http.adornUrl("/product/category/update"),
        method: "post",
        data: this.$http.adornData({ catId, name, icon, productUnit }, false),// 解构成data对象然后调用this.$http.adornData包装参数【包装成json格式】
      }).then(({ data }) => {// 处理
        this.$message({
          message: "菜单修改成功",
          type: "success",
        });
        //关闭对话框
        this.dialogVisible = false;
        //刷新出新的菜单
        this.getMenus();
        //设置需要默认展开的菜单
        this.expandedKey = [this.category.parentCid];
      });
    },
    //append post提交 添加分类 操作
    addCategory() {// 双向绑定的，所以方法不需要参数
      console.log("提交的三级分类数据", this.category);// 需要this.
      this.$http({
        url: this.$http.adornUrl("/product/category/save"),
        method: "post",
        data: this.$http.adornData(this.category, false),// 封装
      }).then(({ data }) => {
        this.$message({
          message: "菜单保存成功",
          type: "success",
        });
        //关闭对话框
        this.dialogVisible = false;
        //刷新出新的菜单
        this.getMenus();
        //设置需要默认展开的菜单
        this.expandedKey = [this.category.parentCid];
      });
    },

    remove(node, data) {
      var ids = [data.catId];
      this.$confirm(`是否删除【${data.name}】菜单?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {// 点击确定后会执行then
          this.$http({
            url: this.$http.adornUrl("/product/category/delete"),
            method: "post",
            data: this.$http.adornData(ids, false),
          }).then(({ data }) => {// 发起ajax请求成功后调用then
            this.$message({
              message: "菜单删除成功",
              type: "success",
            });
            this.getMenus();// 删除后页面需要同步刷新，不显示已删除的分类
            this.expandedKey = [node.parent.data.catId];//设置需要默认展开的菜单【跟删除前保持一致】
          });
        }) 
        .catch(() => {});// 点击取消后调用catch

      console.log("remove", node, data);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getMenus();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>

1、新增品牌管理

2、复制逆向生成的前端代码到renren-fast-vue的product文件夹下
逆向生成代码目录：gulimall-product\main\resources\src\views\modules\product

3、品牌管理中是存在新建、删除的，但是因为前端有权限管理，所以未显示
全局搜索isAuth，在index.js中修改为return true;取消权限
然后新增、删除就可以用了

1、el-table自定义列<template slot-scope="scope">
	然后内部放一个switch开关
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
 <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>
</el-form>

1、为什么需要文件服务器？
	1）不能放在本地，例如集群时将文件保存在本地，集群其他服务找不到文件
	2）不适合存储在数据库服务中

2、有哪些选择？
	1）FastDFS、vsftpd【搭建复杂、维护成本高、前期费用高】
	2）云存储：阿里云对象存储、七牛云存储【即开即用、无需维护、按量收费】

3、使用oss对象上传的两种方式
	1）统一上传到应用服务器，服务器上传oss
	2）客户端使用签名后直传
		账号密码存在应用服务器上
		客户端上传时向应用服务器发送policy请求，服务器利用OSS账号密码生成一个防伪令牌，有上传地址、授权令牌
		客户端上传文件到服务器，并且带上令牌

1、创建gulimall-third-party模块作为第三方服务模块
policy请求为什么不放在common模块中？如果放在common请求中，则每个服务都要配置相应的属性配置，否则启动报错【不过也可以通过在pom中exclusion该启动器就可以了】
选择spring web 、 OpenFeign

2、添加依赖 oos启动器+common、和版本管理
<!--cloud管理oos-->
<dependency>
    <groupId>com.alibaba.cloud</groupId>
    <artifactId>spring-cloud-starter-alicloud-oss</artifactId>
</dependency>
<dependency>
    <groupId>com.atguigu.gulimall</groupId>
    <artifactId>gulimall-common</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <exclusions>
        <exclusion>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
        </exclusion>
    </exclusions>
</dependency>
<!-- 版本管理 -->
<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-dependencies</artifactId>
            <version>${spring-cloud.version}</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
        <dependency>
            <groupId>com.alibaba.cloud</groupId>
            <artifactId>spring-cloud-alibaba-dependencies</artifactId>
            <version>2.2.0.RELEASE</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>

3、在Application添加注解
@@EnableDiscoveryClient

4、登录阿里云
跟着这个文档走就可以了：
https://help.aliyun.com/document_detail/91868.html?spm=a2c4g.11186623.2.16.1d2f7eaeOSyN4O#concept-ahk-rfz-2fb 
	1）开通OSS，开通oss服务，开启一个bucket
		记录外网 endpoint：oss-cn-shanghai.aliyuncs.com
				bucket: gulimall-wan
	2）开通AccessKey->开始使用子用户AccessKey
	登录名称：gulimall-wan	显示名称：gulimall
	访问方式：编程访问
	记录	access-key: XX
      	 secret-key: XX
	
	3）为AccessKey添加权限：oss-all所有权限
	
	4）修改CORS
		打开bucket -> 权限管理 -> 跨域设置 -> 设置 -> 创建规则
		来源：* 
		允许Headers：* 
		允许Methods：POST

3、bootstrap.properties 和 oss.yml
spring.application.name=gulimall-third-party
spring.cloud.nacos.config.server-addr=127.0.0.1:8848
spring.cloud.nacos.config.namespace=93331e33-77bb-4ea0-958f-216afa8b9fb0
spring.cloud.nacos.config.group=dev
#如果这个dev不放开的话，默认的gulimall-third-party不生效【会加载dev分组下的所有配置】

spring.cloud.nacos.config.extension-configs[0].data-id=oss.yml
spring.cloud.nacos.config.extension-configs[0].group=dev
spring.cloud.nacos.config.extension-configs[0].refresh=true

oss.yml【如果在common导入启动器依赖，没有alicloud下面的配置，就会启动报错】
spring:
  cloud:
    alicloud:
      access-key: xx
      secret-key: xx
      oss:
        endpoint: oss-cn-shanghai.aliyuncs.com
        bucket: gulimall-wan
        
4、创建OssController，返回policy凭证
@RestController
public class OssController {

    @Autowired
    OSS ossClient;

    @Value("${spring.cloud.alicloud.oss.endpoint}")
    private String endpoint;
    @Value("${spring.cloud.alicloud.oss.bucket}")
    private String bucket;
    @Value("${spring.cloud.alicloud.access-key}")
    private String accessId;

    @RequestMapping("/oss/policy")
    public R policy() {
        String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint
        String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
        String dir = format + "/"; // 用户上传文件时指定的前缀。在bucket创建一个以日期为文件夹的目录里
        Map<String, String> respMap = null;
        try {
            long expireTime = 30;
            long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
            Date expiration = new Date(expireEndTime);
            // PostObject请求最大可支持的文件大小为5 GB，即CONTENT_LENGTH_RANGE为5*1024*1024*1024。
            PolicyConditions policyConds = new PolicyConditions();
            policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
            policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);

            String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
            byte[] binaryData = postPolicy.getBytes("utf-8");
            String encodedPolicy = BinaryUtil.toBase64String(binaryData);
            String postSignature = ossClient.calculatePostSignature(postPolicy);

            respMap = new LinkedHashMap<String, String>();
            respMap.put("accessid", accessId);
            respMap.put("policy", encodedPolicy);
            respMap.put("signature", postSignature);
            respMap.put("dir", dir);
            respMap.put("host", host);
            respMap.put("expire", String.valueOf(expireEndTime / 1000));
            // respMap.put("expire", formatISO8601Date(expiration));

            // 下面是跨域设置，在网关统一解决跨域
        } catch (Exception e) {
            // Assert.fail(e.getMessage());
            System.out.println(e.getMessage());
        } finally {
            ossClient.shutdown();
        }
        return R.ok().put("data", respMap);
    }
}

1、在el-form表单中添加<single-upload>组件
2、双向绑定dataForm.logo值
	<el-form
      :model="dataForm"// v-model 双向绑定dataForm对象，
      :rules="dataRule"	// 每一个dataForm字段绑定一个dataRule中指定的规则
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="140px"	// 调整lable宽度
    >
      <el-form-item label="品牌logo地址" prop="logo">
        <!-- <el-input v-model="dataForm.logo" placeholder="品牌logo地址"></el-input> -->
        <single-upload v-model="dataForm.logo"></single-upload> // 文件上传
      </el-form-item>
    </el-form>

1、三个文件复制到renren-fast-ves的src/components/upload文件夹里面

2、修改multiUpload.vue和singleUpload.vue文件
	修改成自己的外网Bucket域名
	action="http://gulimall-wan.oss-cn-shanghai.aliyuncs.com"
	
3、在brand-add-or-update.vue中导入
	1)import SingleUpload from "@/componets/upload/singleUpload"
	2)在data 的components:{SingleUpload}
	3)在</template>中就可以使用了 <single-upload>来代替之前的<el-input>标签【自定义节点】

4、设置跨域，允许bucket跨域请求
	在oss里面修改管理控制台修改：
	https://oss.console.aliyun.com/bucket/oss-cn-shanghai/gulimall-wan/permission/cors

问题：<el-image>组件默认没有导入，无法使用，自定义列模板显示组件：
        <template slot-scope="scope">// 添加一个自定义列模板，自定义显示图片
          <!-- <el-image
              style="width: 100px; height: 80px"
              :src="scope.row.logo"
          fit="fill"></el-image>--> // fit填充是填满
            // 这里根据src显示图片【从oss加载】，原始img
          <img :src="scope.row.logo" style="width: 100px; height: 80px" />	
        </template>
1、拷贝完整组件到element-ui/index.js中【element-ui是renren-fast-vue导入的，并没有导入所有组件】
https://element.eleme.cn/#/zh-CN/component/quickstart

2、不知道啥原因用不了<el-image>，最后改成了原生的<img>

1、model绑定了dataForm
2、rules绑定了dataRule
3、dataRule声明了每一个dataForm属性的校验规则
4、默认规则+自定义校验规则
	1）默认规则：由3个属性组成的对象
		规则：必须不为空；错误提示消息：message；blur：鼠标移开触发
		name: [{ required: true, message: "品牌名不能为空", trigger: "blur" }],
	2）自定义规则：2个属性组成的对象
		validator：匿名方法，3个参数
		
		firstLetter: [
          {
            validator: (rule, value, callback) => {
              if (value == "") {
                callback(new Error("首字母必须填写"));
              } else if (!/^[a-zA-Z]$/.test(value)) {// 正则表达式，必须是a-zA-Z
                callback(new Error("首字母必须a-z或者A-Z之间"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
		

    <el-form
      :model="dataForm"// v-model 绑定dataForm对象，
      :rules="dataRule"	// 每一个dataForm字段绑定一个dataRule中指定的规则
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="140px"	// 调整lable宽度
    >
      <el-form-item label="品牌名" prop="name">
        <el-input v-model="dataForm.name" placeholder="品牌名"></el-input>
      </el-form-item>
      <el-form-item label="品牌logo地址" prop="logo">
        <!-- <el-input v-model="dataForm.logo" placeholder="品牌logo地址"></el-input> -->
        <single-upload v-model="dataForm.logo"></single-upload> // 文件上传
      </el-form-item>
      <el-form-item label="介绍" prop="descript">
        <el-input v-model="dataForm.descript" placeholder="介绍"></el-input>
      </el-form-item>
      <el-form-item label="显示状态" prop="showStatus">
        <el-switch // 新增里面也使用switch选择框
          v-model="dataForm.showStatus"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"		// 激活状态修改为1：双向绑定showStatus
          :inactive-value="0"	// 不激活状态修改为0：双向绑定showStatus
        ></el-switch>
      </el-form-item>
      <el-form-item label="检索首字母" prop="firstLetter">
        <el-input v-model="dataForm.firstLetter" placeholder="检索首字母"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
          // 绑定一个number值
        <el-input v-model.number="dataForm.sort" placeholder="排序"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dataForm: {
        brandId: 0,
        name: "",
        logo: "",
        descript: "",
        showStatus: 1,
        firstLetter: "",
        sort: 0
      },
      dataRule: {// 指定的规则
          // blur：鼠标失去焦点
        name: [{ required: true, message: "品牌名不能为空", trigger: "blur" }],
        logo: [
          { required: true, message: "品牌logo地址不能为空", trigger: "blur" }
        ],
        descript: [
          { required: true, message: "介绍不能为空", trigger: "blur" }
        ],
        showStatus: [
          {
            required: true,
            message: "显示状态[0-不显示；1-显示]不能为空",
            trigger: "blur"
          }
        ],
          firstLetter: [
          {
            validator: (rule, value, callback) => {
              if (value == "") {
                callback(new Error("首字母必须填写"));
              } else if (!/^[a-zA-Z]$/.test(value)) {// 正则表达式，必须是a-zA-Z
                callback(new Error("首字母必须a-z或者A-Z之间"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      }
    }
  }
</script>

后端也要对所有提交的数据进行校验，因为可能会使用postman提交

JSR303：java 数据校验的标准 
​	1、给Bean类属性上添加校验注解@NotBlank
​	2、开启校验注解：@Valid，告诉springmvc 请求参数需要校验【spring使用@Validated代替】
​	3、在controller接口中绑定参数bean后紧跟一个BindResult获得校验结果
​	4、分组校验
​		1）@NotBlank(message="品牌名必须提交", groups={AddGroups.class})给校验注解标注什么情况需要进行校验【在common新建valid.AddGroups接口】
​		2）将@Valid换成!@Validated({AddGroups.class})注解
​		3）没有分组的在标注分组情况时不会生效，如果@Validated没有指定分组，则分过组的属性反而不会生效
​	5、自定义校验
​		1）编写一个自定义校验注解
​		2）编写一个自定义的校验器
​		3）关联自定义的校验器和自定义的校验注解
扩展：
校验未通过默认显示的message来自：ValidationMessages_zh_CN.properties
message默认值"{com.atguigu.common.valid.ListValue.message}"

统一异常处理：
​	1、编写异常处理类@ControllerAdvice
​	2、@ExceptionHandler标注处理异常的方法【可多个，指定不同的异常类】
​	3、默认没有指定分组的校验注解，在分组校验情况下不生效

统一异常处理：
1、在common中引入依赖
springboot2.3.2需要引入，放在common中
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-validation</artifactId>
	<version>2.3.2.RELEASE</version>
</dependency>

2、在Entity类上加上校验注解【参照product->BrandEntity类的注解使用】
@NotBlank(groups = {AddGroup.class})
@URL(message = "logo必须是一个合法的url地址",groups={AddGroup.class,UpdateGroup.class})
private String logo;

3、在common助攻创建分组接口
com.atguigu.common.valid;
public interface AddGroup {}

4、在controller类上开启校验		+	【分组校验】
@Valid或@Validated【属于spring注解，可以分组】
@RequestMapping("/update/status")
public R save(@Validated({AddGroup.class}) @RequestBody BrandEntity brand)

@RequestMapping("/update/status")
public R updateStatus(@Validated({UpdateStatusGroup.class}) @RequestBody BrandEntity brand)

5、在common微服务新建枚举类
com.atguigu.common.exception.BizCodeEnume
exception.BizCodeEnume
/**
 * 错误码和错误信息定义类
 * 1.错误码定义规则为5为数字
 * 2.前两位表示业务场景，最后三位表示错误码。例如:100001。10:通用001:系统未知
 * 异常
 * 3.维护错误码后需要维护错误描述，将他们定义为枚举形式
 * 错误码列表:
 * 10:通用
 *      001:参数格式校验
 * 11:商品
 * 12:订单
 * 13:购物车
 * 14:物流
 */
public enum BizCodeEnume {
    UNKNOW_EXCEPTION(10000, "系统未知异常"),
    VALID_EXCEPTION(10001, "参数格式验证失败");

    private int code;
    private String msg;

    BizCodeEnume(int code, String msg) {
        this.code = code;
        this.msg = msg;
    }

    public int getCode() {
        return code;
    }

    public String getMsg() {
        return msg;
    }
}

6、创建统一异常处理类
在product微服务下创建exception.GulimallExceptionControllerAdvice.java
方法返回值可以是ModelAndView
@Slf4j
@RestControllerAdvice(basePackages = app)
public class GulimallExceptionControllerAdvice {
    // 处理MethodArgumentNotValidException异常
    // 可以使用Exception.class先打印一下异常类型来确定具体异常
    @ExceptionHandler(value = MethodArgumentNotValidException.class)
    public R handleValidException(MethodArgumentNotValidException e) {
        log.error("数据校验出现问题{}, 异常类型:{}", e.getMessage(), e.getClass());
        // 获取异常绑定结果
        BindingResult result = e.getBindingResult();
        Map<String, String> errorMap = new HashMap<>();
        // 获取校验的错误结果
        result.getFieldErrors().forEach((item) -> {
            // 获取错误的属性名字 + 获取到错误提示FieldError
            errorMap.put(item.getField(), item.getDefaultMessage());
        });
        return R.ok().error(BizCodeEnume.VALID_EXCEPTION.getCode(),BizCodeEnume.VALID_EXCEPTION.getMsg()).put("data", errorMap);
    }
	// 处理所有异常
    @ExceptionHandler(value = Throwable.class)
    public R handleValidException(Throwable throwable) {

        return R.ok().error(BizCodeEnume.UNKNOW_EXCEPTION.getCode(), BizCodeEnume.UNKNOW_EXCEPTION.getMsg());
    }
}
    
7、可以postman测试了
返回400则是校验不通过
{
    "timestamp": "2020-08-08T08:45:40.081+00:00",
    "status": 400,
    "error": "Bad Request",
    "message": "",
    "path": "/product/brand/save"
}

自定义校验：
1、在common中创建校验注解 @ListValue 
@Target({ METHOD, FIELD, ANNOTATION_TYPE, CONSTRUCTOR, PARAMETER, TYPE_USE })// 可以标注在哪些位置 方法、参数、构造器
@Retention(RUNTIME)// 可以在什么时候获取到
@Documented//
@Constraint(validatedBy = {ListValueConstraintValidator.class})// 使用哪个校验器进行校验的（这里不指定，在初始化的时候指定）
public @interface ListValue {
    // 默认会找ValidationMessages.properties
    String message() default "{com.atguigu.common.valid.ListValue.message}";
    Class<?>[] groups() default { };
    Class<? extends Payload>[] payload() default { };
    // 可以指定数据只能是vals数组指定的值
    int[] vals() default { };
}


2、编写自定义的校验器类，指定泛型<校验注解,数据类型>
在common中创建ListVaLueConstraintVaLidator实现ConstraintVaLidator接口【实现方法，实现校验规则】
public class ListValueConstraintValidator implements ConstraintValidator<ListValue, Integer> {
    private Set<Integer> set = new HashSet<>();
    /**
     * 初始化方法
     * @param constraintAnnotation
     */
    @Override
    public void initialize(ListValue constraintAnnotation) {
        int[] vals = constraintAnnotation.vals();
        if (vals != null && vals.length != 0) {
            for (int val : vals) {
                set.add(val);
            }
        }
    }
    /**
     * 校验逻辑：是否是指定的值{0, 1}
     * @param value 需要校验的值
     * @param context 上下文
     * @return
     */
    @Override
    public boolean isValid(Integer value, ConstraintValidatorContext context) {
        return set.contains(value);// 如果set length==0，会返回false
    }
}

3、关联 自定义校验器 和 自定义校验注解
【同一个注解可以指定多个不同的校验器，完成校验功能，】
    @Constraint(validatedy = { ListVaLueConstraintVaLidator.class})【可以指定多个不同的校验器】
	所以
        
4、创建ValidationMessages.properties配置错误信息
在common中创建属性文件
		com.atguigu.common.valid.ListValue.message=必须提交指定的值

5、postman测试