技术总览

1. 技术栈

   • 后端：SpringBoot、SpringCloud、Docker、MybatisPlus、MySQL、Redis、Nacos、Nginx、JSR303、Elasticsearch、Redisson、SpringCache、RabbitMQ

   • 前端：VUE、ELEMENT-UI

   • 测试：Jmeter

2. 业务逻辑：商品服务、购物车、订单、结算、库存、秒杀

3. 分布式架构：SpringCloud+Nacos【配置中心、注册中心】、Sentinel流量保护、Seata分布式事务控制、网关SpringCloud GATEWAY、Ribbon负载均衡、远程调用OpenFeign、链路追踪Slueth、缓存、session同步方案、全文商品信息检索ES、异步编排、线程池、压力测试、性能调优、redis分布式锁、MySQL主从分片集群、缓存Redis集群、RabbitMQ镜像集群队列【实现服务异步解耦和分布式数据一致性】、线上监控系统Prometheus+grafana【Prometheus对Sleuth搜集的调用链路信息进行聚合分析，由grafana进行可视化和展示，通过Prometheus提供的AlterManager实时得到服务的告警信息以邮件和手机短信的方式通知给开发和运维人员】、ELK【ES、Kibana、LogStash】日志处理【存储和文书检索、LogStash负责搜集日志并存入ES、使用Kibana从ES中检索相关的信息快速定位线上的问题】、服务熔断降级、高并发场景下的编码方式、阿里云对象存储服务存储图片和视频等

4. 集群架构：一主两从k8s集群、使用KUBESPHERE平台控制整个k8s集群、持续集成持续部署【CI/CD】【即开发人员敲完代码，以流水线的形式自动化的打包、发布、测试、运行、上线；开发人员将代码提交到远程库、运维人员通过自动化部署工具从远程库获取代码打包成Docker镜像，使用K8s集成Docker服务组成集群以Docker容器的方式进行运行】、jenkins自动化部署

5. 商业模式：B2C商家对用户【商业零售】

6. 微服务总览：

   • 前端：admin-vue【后台管理系统，码云人人开源/renren-security】、shop-vue前台界面

   • 分布式架构服务治理：Nacos注册配置中心、Seata分布式事务、Sentinel服务容错降级限流、OpenFeign服务远程调用和负载均衡、Slueth服务调用链路追踪【zipkin可视化追踪】、GATEWAY API网关【限流、鉴权、熔断降级、过滤、路由、负载均衡】，使用Prometheus+grafana对应用进行监控

   • 业务微服务群：商品、支付、优惠、用户、仓储、秒杀、订单、检索、中央认证【单点登录、社交注册】、购物车、后台管理【新增商品】

   • 第三方服务：物流信息检索、短信发送、金融支付、退款、对账、用户身份认证

   • 数据支撑层：缓存redis集群、数据持久化mysql集群【使用shardingSphere对mysql进行分库分表操作】、消息队列RabbitMQ集群、全文检索【ES集群】、图片视频存储【阿里云OSS】

7. 软件版本

   【软件环境安装事项】

   • mysql8.x的文件位置由/etc/mysql变化为/etc/mysql/conf.d，容器数据卷的挂载需要由-v /mydata/mysql/conf:/etc/mysql \改为-v /mydata/mysql/conf:/etc/mysql/conf.d \

   软件	原始版本	备注
   VirtualBox	6.0.12
   Vagrant	2.2.5
   docker	19.03.2	docker -v
   mysql	5.7.27
   redis	4.0
   maven	3.6.1
   nodejs	10.16.3 LTS
   SpringBoot	2.1.8.RELEASE
   MyBatisPlus	3.2.0
   Lombok	1.18.8
   Httpcore	4.4.12
   Commons-lang	2.6
   Mysql驱动	8.0.17
   servlet-api	2.5
   nacos-server	1.1.4
   gson	2.8.5
   nginx	1.10
   Jmeter	5.2.1
   Elasticsearch	7.4.2
   Kibana	7.4.2
   Redisson	3.12.0
   SpringCache	2.1.8.RELEASE
   SpringSession	2.1.8.RELEASE
   RabbitMQ	4.0.3
   Seata	2.1.0.RELEASE
   alipay-sdk-java	4.9.28.ALL

   【IDEA插件】

   • Lombok【简化开发】

   • MyBatisX【MP开发的，从一个Mapper方法快速定位到XML文件】

   • Gitee【提交代码到码云】

   【VSCode插件】

   • Auto Close Tag【自动开闭标签】

   • Auto Rename Tag【】

   • Chinese简体中文包【】

   • ESLint【ES语法检查】

   • HTML CSS Support【对html和css语法提示】

   • JavaScript(ES6) code snippets【JS的ES6语法提示】

   • Live Server【】

   • open in browser【在浏览器打开页面的】

   • Vetur【开发vue项目最常用的工具】

    

项目搭建流程

环境搭建

1. 下载VirtualBox7.0.41

2. 下载Vagrant2.4.1

3. 搭建虚拟机环境CentOS7

   🚁：Centos对VirtualBox和Vagrant的版本要求

   📓：VirtualBox和Vagrant必须是最新版才能通过vagrant连接VirtualBox快速安装Centos7

4. 安装Docker

5. Docker安装mysql:5.7.27

   mysql:5.7有一个文件老是拉取不下来，最后拉的5.7.27；原来的系统默认安装在C盘，重装了，你猜怎么着，又能装了，最后还是装的5.7

   mysql的默认字符编码是拉丁，需要修改配置文件将字符编码改为utf-8

   镜像拉取不了是DNS服务器的设置问题，解决方法看linux操作手册的docker常见问题

   xxxxxxxxxx
   docker run -p 3306:3306 --privileged=true --name mysql \
   -v /malldata/mysql/log:/var/log/mysql \
   -v /malldata/mysql/data:/var/lib/mysql \
   -v /malldata/mysql/conf:/etc/mysql \
   -e MYSQL_ROOT_PASSWORD=Haworthia0715 \
   -d mysql:5.7
   

   【mysql开放root用户远程连接权限】

   在mysql本地客户端输入以下两行代码，无需重启可以直接连

   xxxxxxxxxx
   grant all privileges on *.* to 'root'@'%' identified by 'Haworthia0715' with grant option;
   flush privileges;
   

6. Docker安装redis:6.0.8

   老师的太老了，自己拉了一个熟悉的

   容器数据卷一定要先创建/malldata/redis/conf/redis.conf文件再进行挂载，否则会自动创建redis.conf目录，如果强行修改为文件，redis会直接停掉；先创建了文件就会将容器数据卷识别为对应的文件，一旦没匹配上配置文件，外部任何配置都不会生效

   使用Redis Desktop Manager连接redis

   redis等其他镜像创建容器实例没指定随docker启动而自动启动可以通过命令docker update redis --restart=always追加设置

   xxxxxxxxxx
   docker run -p 6379:6379 --privileged=true --name redis -v /malldata/redis/data:/data \
   -v /malldata/redis/conf/redis.conf:/etc/redis/redis.conf \
   -d redis:6.0.8 redis-server /etc/redis/redis.conf
   

7. 创建商城数据库表

   使用数据库脚本创建的，SQLYog的脚本运行一定要点击一次性运行所有查询，否则可能涉及局部脚本操作，而且需要根据数据的位置执行查询，很容易发生各种错误

8. 引入人人开源/renren-fast后台管理系统后端项目

   使用的是老师的版本3.0.0

   使用该项目的数据库创建后台管理系统数据库mall_admin表，并修改项目直到项目成功运行

   因为后端为了尽量和老师的版本保持一致，包括SpringBoot和Cloud的版本，因为时间久了一旦出现问题很可能找不到合适的解决办法，所以项目后端直接使用的老师的renren-fast交付代码，保持后端版本的一致

   真特么服了，使用老师交付的代码因为前后台系统的版本不一致存在跨域问题，跨域类的写法发生了变化，老版本SpringBoot的跨域无法适应新的前台请求，这里renren-fast的前后台代码都使用的人人开源仓库最新克隆的，单后台管理系统SpringBoot的版本是2.6.6的

9. 引入人人开源/renren-fast-vue后台管理系统前端项目

   这个是直接在Gitee上拉取的，看了版本和老师的一样都是1.2.2

   安装nodejs v10.16.3(LTS)，直接拿着对应版本到百度搜也会跳出官方下载页面，直接去官网找不一定找得到，直接下载Windows 64-bit Installer: https://nodejs.org/dist/v10.16.3/node-v10.16.3-x64.msi

   VScode调出控制台的快捷键是Ctrl+`

   renren-fast-vue和老版本变化不大，package.json中少量版本变化，且直接使用老师的交付代码会因为老师整合服务修改了前端的端口和路径问题，导致项目验证码无法正常请求到后端的接口【导致验证码不显示】和跨域设置，这里前端页面直接使用人人开源上克隆的最新版

   这里更换多个版本出现无法使用命令npm install安装的情况，经过评论区指出是node-sass4.9.0安装失败的问题【但是不需要根据评论的下载python，就是node-sass的下载和nodejs的版本适配问题】，而且nodejs的版本和node-sass的版本存在对应关系，对应关系通过网址https://www.npmjs.com/package/node-sass查看；1. 在使用nodejs10.16.3的情况下把项目文件夹下的package.json里面的node-sass4.9.0改成4.9.2；第二将原来的node_modules文件夹删除【也可以使用命令npm rebuild node-sass或者npm uninstall node-sass重装或者卸载node-sass】；第三在项目文件下打开CMD窗口执行npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/单独安装node-sass[因为使用淘宝镜像会去从github下载，但是下载并不会成功]，没报错就是下载成功了；在CMD窗口执行npm install对项目进行安装，没报错就是成功；然后就可以在VScode上使用npm run dev运行项目了

10. 使用人人开源/renren-generator逆向工程生成后端各个服务模块的结构修改端口并测试接口是否能够正常访问

    这个直接使用的老师的版本，傻逼Maven有些报红，折腾了好久，不影响执行，通过访问控制台；在控制面板选择表生成对应的实体类和前端包括端口，以浏览器下载的方式将main目录和Resources目录下的mapper文件以及vue的前端代码发送给用户，用户在对应模块下自行替换，不像mybatis的插件，这个更加强大，连接口的方法都能生成甚至前端代码都能生成

    直接拷贝替换对应main、mapper目录；vue文件不要删，后面会用到，据说这个逆向生成的代码中已经包含了前端例如三级分类的代码和前端的增删改查功能【有点逆天啊】，一般基础的功能前端后端都用逆向工程生成，只有核心的业务逻辑前后端自定义编写

    重新搞吧，克隆最新的人人开源/renren-generator，因为生成的代码中需要使用人人开源/renren-fast中的工具类PageUtils和Query工具类

    反正人人开源的就直接现场克隆就完事了，在人人开源代码生成器生成的代码中需要依赖renren-fast中的工具类，需要进行拷贝到公共工程下，并在其他模块对公共工程进行引入，同时公共模块下需要引入相关的依赖才能让生成的代码不报错

    引入的相关依赖包括mybatisPlus、Lombok、httpcore、commons-lang、mysql驱动[mysql-connector-java]、servlet-api

11. 定义统一返回类R，R继承了HashMap<String,Object>

    这个R是从renren-fast项目拷贝过来的

    ​x
    /**
     * 返回数据
     *
     * @author Mark sunlightcs@gmail.com
     */
    public class R extends HashMap<String, Object> {
        private static final long serialVersionUID = 1L;
        
        public R() {
            put("code", 0);
            put("msg", "success");
        }
        
        public static R error() {
            return error(HttpStatus.SC_INTERNAL_SERVER_ERROR, "未知异常，请联系管理员");
        }
        
        public static R error(String msg) {
            return error(HttpStatus.SC_INTERNAL_SERVER_ERROR, msg);
        }
        
        public static R error(int code, String msg) {
            R r = new R();
            r.put("code", code);
            r.put("msg", msg);
            return r;
        }
    
        public static R ok(String msg) {
            R r = new R();
            r.put("msg", msg);
            return r;
        }
        
        public static R ok(Map<String, Object> map) {
            R r = new R();
            r.putAll(map);
            return r;
        }
        
        public static R ok() {
            return new R();
        }
    
        public R put(String key, Object value) {
            super.put(key, value);
            return this;
        }
    }
    

前端基础

12. 学习前端知识

    笔记在E:\JavaStudy\project\ol_edu\vpc_ol_js目录下

商品分类管理

分类数据封装

商品分类数据的三级封装逻辑和实现、重点关注这个逻辑中一级分类和二级分类的主键值肯定会发生大于Long类型常量池范围的情况，此时子分类的parent_cid和父类的catId不能再使用==来过滤流判断是否类的子分类【因为即使值相等也会因为==判断引用地址是否相同始终返回false，导致子分类直接误判，会发生主键太大的一级分类和二级分类的子分类数据全部丢失，表现在前端的效果是子分类数据能成功添加，但是永远显示不出子分类列表】，必须使用Long类型的equals方法来对较大Long类型主键判断分类的parent_cid和父类的catId值相等

1. 商品三级分类

   三级分类是很常用的功能

   • 导入pms_category中的所有商品分类数据

   • 查询所有分类并以父子分类方式的结构组装起来方便后台管理系统维护

   • 封装逻辑

     • 查询出所有的商品分类数据，因为mybatis的缓存功能，只有第一次查询需要真正访问数据库，此后访问直接从缓存中获取商品分类数据，使用java8新特性stream流的filter对商品分类进行过滤筛出一级分类，使用map方法对每个一级分类根据当前分类和总的分类列表查询出所有子分类，对一级分类列表的流使用sorted方法按照sort字段进行排序，使用collect聚合函数转成list集合并返回，

     • 对查询某个分类的所有子分类的实现是查询出当前分类的下一级子分类，对查询出的子分类递归调用当前方法查询出二级分类的所有子分类，递归跳出的条件是当前子分类没有子分类，即过滤得到流的元素个数为0，不再执行后续的map方法继续查找所有子分类；查询完成后对每级子分类进行排序并返回每级子分类的List集合

   • 代码实现

     卧槽，这里有个数据库mybatis的查询数据缓存【据大佬说是mybatis二级缓存】，能节省超多时间，对数据的封装递归写的这么烂也只需要20ms，但是数据库查询1000条数据要170到180ms，写的烂也不存在啊，数据库查询才是耗时比较久的

     xxxxxxxxxx
     /**
      * @return {@link List }<{@link CategoryEntity }>
      * @描述 查找所有商品分类，以树形结构对商品分类数据进行封装,
      * @性能 junit显示一千条数据耗时560ms，为什么浏览器显示响应时间25ms-33ms
      * 这个可能是自带缓存啊，下面这段代码服务器重启以后第一次执行是198ms，此后每次执行都是18-20ms，
      * 但是junit执行同样的代码每次都需要560ms
      * 实际第一次这段代码执行需要200ms，此后每次执行只需要20ms左右，浏览器响应也只需要25ms左右，junit的测试结果
      * 和直接在程序中测差别很大啊
      * 这里第一次请求耗时长是因为后续数据库查询走的mybatis的缓存
      * @author Earl
      * @version 1.0.0
      * @创建日期 2024/02/23
      * @since 1.0.0
      */
     @Override
     public List<CategoryEntity> listWithTree(){
         //long initTime=System.currentTimeMillis();
         //1. 查询所有商品分类
         List<CategoryEntity> categoryList = baseMapper.selectList(null);
         //2. 组装商品分类为父子结构
         //找到所有一级商品分类并封装成list集合，一级商品分类的标志是字段parent_cid为0，使用Stream流实现
         List<CategoryEntity> firstLevelCategory = categoryList.stream().
                 filter(category -> category.getParentCid() == 0).
                 map(curCategory->{
                     //获取当前商品的子商品分类需要传递当前商品和所有商品
                     curCategory.setChildren(getChildren(curCategory,categoryList));
                     return curCategory;
                 }).
                 //排序按照升序排序，即sort字段小的排在前面
                 sorted((category1,category2)->(category1.getSort()==null?0:category1.getSort())-(category2.getSort()==null?0:category2.getSort())).
                 collect(Collectors.toList());
         //System.out.println(System.currentTimeMillis()-initTime+"ms");
         return firstLevelCategory;
     }
     
     /**
      * @param rootCategory 当前根商品分类
      * @param categoryList 所有商品分类
      * @return {@link List }<{@link CategoryEntity }>
      * @描述 获取当前商品分类的所有子分类
      * @author Earl
      * @version 1.0.0
      * @创建日期 2024/02/23
      * @since 1.0.0
      */
     private List<CategoryEntity> getChildren(CategoryEntity rootCategory, List<CategoryEntity> categoryList) {
         List<CategoryEntity> children = categoryList.stream().
                 //所有的流筛选出当前分类的子一级分类
                 //filter(category -> category.getParentCid() == rootCategory.getCatId()).
                 //子分类可能还有子分类，对当前子分类递归求出其所有子分类，跳出递归的条件是最后一级分类没有子分类自然无法执行map方法
                 //这里判断当前分类的parentCid和父分类的catId不能使用等号比较值的大小，因为数据库表初始的一级分类id都比较小，在-128-127范围内，Long类型数据以及其他的包装类都实现了常量池，主键小的时候==永远可以判断值是否相等，但是后期创建的一级分类和二级分类的主键值肯定会超过这个范围，一旦超过这个范围，即使父id和子的pid都是值相等的Long类型也是两个完全不同的对象，用==除了基本数据类型是直接判断值，引用数据类型都是比较引用的内存地址；此时使用Long等包装类的equals方法就是判断的两个Long类型对应的基本类型值是否相等
                 filter(category -> rootCategory.getCatId().equals(category.getParentCid())).
                 map(category->{
                     category.setChildren(getChildren(category,categoryList));
                     return category;
                 }).
                 //对子分类按照表category的sort字段进行升序排序
                 sorted((category1,category2)->(category1.getSort()==null?0:category1.getSort())-(category2.getSort()==null?0:category2.getSort())).
                 collect(Collectors.toList());
         return children;
     }
     

树形列表组件

使用ELEMENT-UI的树形列表控件对三级商品分类数据进行展示和管理

包括前端路由规则、分类树形列表控件、树形列表控件优化

前端路由规则

1. 启动后台管理系统前台renren-fast-vue和后台模块renren-fast对商品分类进行联调

   先启动后台系统的服务器模块在启动前端，因为需要获取验证码并对用户名和密码进行验证

   • 在后台管理系统前台的系统管理--菜单管理--新增--目录能创建出和系统管理一样的侧边栏菜单，选择菜单是创建该菜单的二级目录，也是从新增点进去选择已有目录创建菜单

     

   • 菜单数据和目录数据都会进入renren-fast的对应数据库表mall_admin的sys_menu表中，生成对应的记录

     需要在分类维护菜单的页面中对商品分类信息进行增删改

     • 页面路由的规则是http://localhost:8001/#/路由路径，路由路径对应菜单管理中每个菜单的菜单URL把/换成-

       如菜单URLproduct/category对应页面的路由路径是product-category，完整路径是http://localhost:8001/#/product-category

     • 路径和页面的匹配规则是sys-role对应文件src\views\modules\sys\role.vue，即菜单页面的根目录是src\views\modules，短横线前面的sys是目录名，短横线后面的role是文件名，文件以.vue作为后缀

       这种.vue文件就是vue中的一个单文件组件，在E:\JavaStudy\project\ol_edu\vpc_ol_js\vue_demo\vue-demo\APP.vue中有介绍，整个单文件组件的页面会展示在菜单窗口中

       • 对应这种规则，商品的菜单URL对应的文件是src\views\modules\product\category.vue，用自定义模版快捷键vue生成对应的单文件组件模板

         VSCode自定义文件模板在C:\Users\Earl\AppData\Roaming\Code\User\snippets目录下,文件--首选项--配置用户片段也能查看已有的自定义文件模板

树形列表

• 商品分类列表前端组件

  • 树形展示列表使用Element-ui的Tree属性控件

    【树形控件】

    el-tree标签的data是要展示的所有数据即json数组，props是属性设置【设置每个目录的子目录属性名和要展示的值的属性名】，@node-click是绑定的单击函数

    xxxxxxxxxx
    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    
    <script>
      export default {
        data() {
          return {
            data: json数组,
            defaultProps: {
                //children指json数组下的哪个属性的值是作为节点的子节点的
              children: 'children',
                //label是指json数组以及子节点哪个属性的值是作为要展示的文字的
              label: 'label'
            }
          };
        },
        methods: {
          handleNodeClick(data) {
            console.log(data);
          }
        }
      };
    </script>
    

    【自定义树形节点内容】

    可以使用render-content和scope-slot两种方式删除增加节点，项目使用scope-slot方式

    render-content是给el-tree组件中添加一个:render-content="renderContent"属性，这里很奇怪，明明是双向绑定的写法，但是这里的renderContent是定义在methods中的一个函数，该方法直接返回节点管理的dom元素【图层包含按钮和点击事件】

    scope-slot是直接在组件中添加节点管理组件，slot-scope是vue中的插槽机制，即把上诉方法返回的Dom元素写在树形结构组件中

    【树形节点的管理组件】

    这个@node-click="handleNodeClick"单机函数没啥用，可以删掉

    xxxxxxxxxx
    <el-tree
      :data="categoryTree"
      :props="defaultProps"
      @node-click="handleNodeClick"
    >
      <!--{ node, data }是一种解构写法，node是当前标签的节点，这个node不是从数据库获取的每个商品分类对象
        ，而是树形控件自己封装的节点对象，包含节点的额外信息，比如节点是否被选中，节点所属的层级等等，
        通过node.label可以获取到tree节点的属性值;
        data是对应树形节点对应的从数据库获取到的商品封装的数据，是完整的每个节点的原始数据-->
      <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>
    

  • 树形控件优化

    • 点击箭头展开

      此时点击整个节点都会弹出节点的子节点，点击删除或者增加节点也会展开子节点，el-tree中有一个属性expand-on-click-node，该属性值设置为true就表示点击整个节点，节点的所有子节点都会展开；设置成false表示只有点击节点前的箭头节点的子节点才会展开

      xxxxxxxxxx
      <el-tree
        :data="categoryTree"
        :props="defaultProps"
        :expand-on-click-node="false"
      >
      </el-tree>
      

    • 一级菜单和二级菜单显示append按钮，三级菜单不能增加子菜单，没有子菜单的菜单才能显示Delete按钮

      使用v-if来对按钮的显示逻辑进行实现

      node.level树形显示当前节点为几级节点，一级值为1，二级值为2，一二级节点给添加节点按钮

      node.childNodes.length是子节点数组的元素个数，为0表示没有子节点，没有子节点给删除按钮

      xxxxxxxxxx
      <el-tree
        :data="categoryTree"
        :props="defaultProps"
        :expand-on-click-node="false"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>
            <el-button v-if="node.level<=2" type="text" size="mini" @click="() => append(data)">
              Append
            </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-tree的show-checkbox属性，意思是节点是否可被选择，默认是false，只要在el-tree添加该属性或者赋值为true节点就能显示选中框，而且自带全选和全不选的功能

      xxxxxxxxxx
      <el-tree
        :data="categoryTree"
        :props="defaultProps"
        :expand-on-click-node="false"
        show-checkbox
      >
        ...
      </el-tree>
      
      补充
      <el-tree
        :data="categoryTree"
        :props="defaultProps"
        :expand-on-click-node="false"
        show-checkbox="true"
      >
        ...
      </el-tree>
      和上述写法效果是一样的
      

    • 为每个节点添加唯一表示属性

      el-tree标签的node-key属性可以用来作为树节点的唯一标识，每个节点的该属性值在整颗树中应该是唯一的，每个节点的主键是唯一的，所以可以将商品分类的主键id赋值给node-key属性，只需要写属性名catId，树形组件会自动去找每个节点原始数据的指定catId属性

      xxxxxxxxxx
      <el-tree
        :data="categoryTree"
        :props="defaultProps"
        :expand-on-click-node="false"
        show-checkbox
        node-key="catId"
      >
        ...
      </el-tree>
      

请求数据

请求后端商品分类接口获取商品分类树形列表数据

包括renren-fast-vue向api接口发送请求的方式、网关对请求的转发以及请求跨域处理

请求接口数据

renren-fast-vue前端向后端发起数据请求的方法，响应数据结构、URL配置文件

• 向后台商品系统发送获取商品树形列表请求

  • 在vue对象的created方法中【页面数据和方法已经加载，但是还没有渲染，此时可以访问this实例访问当前的vue对象】调用获取菜单分类的方法getCategoryTree()，在getCategoryTree()方法中定义发送请求获取数据

  • renren-fast前台发送请求的方式

    注意此时发送请求的ip和端口还是前台项目的ip和端口，需要改为后台管理系统的ip和端口

    【GET请求方式】

    xxxxxxxxxx
    // 获取数据列表
      getDataList () {
        this.dataListLoading = true
          //下面的代码是向服务器发送请求获取数据的脚手架代码
        this.$http({
            //括号中是请求的地址，需要带/
          url: this.$http.adornUrl('/sys/role/list'),
            //请求方式
          method: 'get',
            //请求参数，k：v键值对，没有请求参数就直接把params属性删掉即可
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'roleName': this.dataForm.roleName
          })
            //发送成功执行then方法，then是ES6的异步编排promise的用法，详细笔记见E:\JavaStudy\project\ol_edu\vpc_ol_js\es6_std\12_promise语法.html
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
    

    【POST请求方式】

    xxxxxxxxxx
    remove(node, data) {
        var ids = [data.catId]
      this.$http({
        url: this.$http.adornUrl("/product/category/delete"),
        method: "post",
        data: this.$http.adornData(ids, false),
      }).then(({ data }) => {
        console.log("删除成功")
          //这个是重新发送请求刷新列表数据，因为列表数据和树形列表是双向绑定关系，更新了数据自然会重新渲染树形列表，注意这个不是跳转路由
        this.getCategoryTree()
      });
    },
    

    【根据格式抽取出代码片段】

    在VSCode的文件--首选项--用户代码片段，在vue组件模板中追加下列发送请求的模板

    下面是完整模板，该文件包含3个模板，通过在需要的地方输入prefix指定的字符串生成模板，其中的http-get 请求和http-post 请求是追加的renren-fast-vue发送请求的模板，分别通过httpget和httppost在指定地方快速生成模板

    xxxxxxxxxx
    //{
    // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
    // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
    // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
    // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
    // Placeholders with the same ids are connected.
    // Example:
    // "Print to console": {
    //  "scope": "javascript,typescript",
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }
    {"生成 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 lang='scss' scoped>",
                "//@import url($3); 引入公共 css 类",
                "$4",
                "</style>"
            ],
            "description": "生成 vue 模板"
        },
        "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 请求"
        }
    }
    

    • $http

      $http是项目定义的工具类，定义在utils/httpRequest.js

      xxxxxxxxxx
      import Vue from 'vue'
      import axios from 'axios'
      import router from '@/router'
      import qs from 'qs'
      import merge from 'lodash/merge'
      import { clearLoginInfo } from '@/utils'
      
      const http = axios.create({
        timeout: 1000 * 30,
        withCredentials: true,
        headers: {
          'Content-Type': 'application/json; charset=utf-8'
        }
      })
      
      /**
       * 请求拦截,每次发请求都会拦截请求从cookie中获取到后台服务器存入cookie的token放到请求的头信息中供后端服务器校验并进行权限控制
       */
      http.interceptors.request.use(config => {
        config.headers['token'] = Vue.cookie.get('token') // 请求头带上token
        return config
      }, error => {
        return Promise.reject(error)
      })
      
      /**
       * 响应拦截，发生401错误说明token失效，用户没有登录，router.push跳转登录页面
       */
      http.interceptors.response.use(response => {
        if (response.data && response.data.code === 401) { // 401, token失效
          clearLoginInfo()
          router.push({ name: 'login' })
        }
        return response
      }, error => {
        return Promise.reject(error)
      })
      
      /**
       * 请求地址处理,请求地址拼接
       * @param {*} actionName action方法名称，actionName就是用户指定的接口uri，和index.js中定义的协议、IP和端口号等一起拼接成完整url
       */
      http.adornUrl = (actionName) => {
        // 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!非生产环境和生产环境的拼串方式不同
        return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl) + actionName
      }
      
      /**
       * get请求参数处理，上面的示例中已经用了params参数，会通过该参数调用http.adornParams方法，这里就是get请求拼接请求参数的方法，传递的参数写在params对象中
       * @param {*} params 参数对象
       * @param {*} openDefaultParams 是否开启默认参数?默认参数是时间戳，这里的开启默认参数的意思是如果开启默认参数，每次发送请求就会在get请求后拼接时间戳，避免浏览器的ajax的get请求结果被浏览器缓存
       */
      http.adornParams = (params = {}, openDefaultParams = true) => {
        var defaults = {
          't': new Date().getTime()
        }
        return openDefaultParams ? merge(defaults, params) : params
      }
      
      /**
       * post请求数据处理
       * @param {*} data 数据对象
       * @param {*} openDefaultData 是否开启默认数据?开启还是拼接时间戳
       * @param {*} contentType 数据格式，不指定默认发送的是json格式的请求参数，参数类型有两种方式，一种是json，参数类型是'application/json; charset=utf-8'，还有一种参数类型是form表单，完整类型是'application/x-www-form-urlencoded; charset=utf-8'
       *  json: 'application/json; charset=utf-8'
       *  form: 'application/x-www-form-urlencoded; charset=utf-8'
       */
      http.adornData = (data = {}, openDefaultData = true, contentType = 'json') => {
        var defaults = {
          't': new Date().getTime()
        }
        data = openDefaultData ? merge(defaults, data) : data
        return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
      }
      
      export default http
      

       

    • 响应数据展示

      【前端代码】

      xxxxxxxxxx
      getCategoryTree() {
        this.$http({
          url: this.$http.adornUrl("/product/category/list/tree"),
          method: "get",
        }).then((data) => {
          console.log("获取数据:...",data);
        });
      },
      

      【数据响应结构】

      data.data是响应内容，我对响应做了封装，返回一个R对象，R继承了HashMap<String,Object>

      

      【解构data方式写法】

      {data}的意思是用结构表达式{data}=data，即then参数列表中的data参数去获取响应数据中data对象的data属性，此时then参数列表的data实际上是data.data

      • 不使用解构表达式获取数据的写法

        xxxxxxxxxx
        getCategoryTree() {
          this.$http({
            url: this.$http.adornUrl("/product/category/list/tree"),
            method: "get",
          }).then((data) => {
            console.log("获取数据:...",data.data)
            this.categoryTree=data.data.categoryTree
          });
        },
        

      • 使用解构表达式获取数据的写法

        xxxxxxxxxx
        getCategoryTree() {
          this.$http({
            url: this.$http.adornUrl("/product/category/list/tree"),
            method: "get",
          }).then(({data}) => {
            console.log("获取数据:...",data)
            this.categoryTree=data.categoryTree
          });
        },
        

  • 在static\config\index.js中定义了请求的ip和端口号

    如果每个服务都单独指定ip和端口号会显得很复杂也不好实现，直接配置给网关发送请求，由网关进行路由转发，网关端口是88，正确的请求ip和端口是http://localhost:88

    xxxxxxxxxx
    /**
     * 开发环境
     */
    ;(function () {
      window.SITE_CONFIG = {};
    
      // api接口请求地址
      window.SITE_CONFIG['baseUrl'] = 'http://localhost:8080/renren-fast';
    
      // cdn地址 = 域名 + 版本号
      window.SITE_CONFIG['domain']  = './'; // 域名
      window.SITE_CONFIG['version'] = '';   // 版本号(年月日时分)
      window.SITE_CONFIG['cdnUrl']  = window.SITE_CONFIG.domain + window.SITE_CONFIG.version;
    })();
    

网关路由转发

• 网关对请求转发

  • 网关对验证码的请求进行转发

    转发需要将被转发的服务注册到注册中心

    【renren-fast后台服务注册】

    引入common模块和com.google.code.gson.gson2.8.5，common里面服务注册的依赖，引入注册中心的过程看笔记Java生态，这里只做一次演示

    renren-fast后台服务的Springboot版本过高，多方权衡，决定把renren-fast的版本降成和Springboot一致2.1.8.RELEASE

    【application.yml配置注册中心和服务名】

    xxxxxxxxxx
    spring:
      application:
        name: renren-fast
      cloud:
        nacos:
          discovery:
            server-addr:127.0.0.1:8848
    

    【启动类添加注解@EnableDiscoveryClient】

    xxxxxxxxxx
    @EnableDiscoveryClient
    @SpringBootApplication
    public class RenrenApplication {
    
        public static void main(String[] args) {
            SpringApplication.run(RenrenApplication.class, args);
        }
    
    }
    

    【配置网关路由转发】

    后台登录验证码的访问格式是http://localhost:8080/renren-fast/captcha.jpg?uuid=e9ffdca7-538c-41eb-898a-b6c35a45f261

    但是目前前端的路径统一更改为访问网关http://localhost:88/api/captcha.jpg?uuid=e9ffdca7-538c-41eb-898a-b6c35a45f261，需要在网关用过滤器对请求路径进行重写

    路由精确匹配的需要放在模糊匹配的前面才能被匹配上，这点和nginx不一样，nginx是优先精确匹配，如果精确匹配在模糊匹配后面，相应的请求会报401错误

    xxxxxxxxxx
    spring:
      cloud:
        gateway:
          routes:
          #配置网关对第三方网站的路由功能，如果请求的参数中含有url=baidu就路由到百度
            - id: baidu_route
              uri: https://www.baidu.com
              predicates:
                - Query=url,baidu
    
            - id: qq_route
              uri: https://www.qq.com
              predicates:
                - Query=url,qq
    
            - id: product_route
            #lb意思是负载均衡，后面只需要写服务名
              uri: lb://mall-product
              predicates:
                #Path断言意思是uri为指定路径就路由到该路由上来,这个表示请求路径的uri以/api开始都路由到renren-fast中
                #路由精确匹配的需要放在模糊匹配的前面才能被匹配上，这点和nginx不一样，nginx是优先精确匹配，如果精确匹配在模糊匹配后面，相应的请求会报401错误
                - Path=/api/product/**
              filters:
                - RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment}
    
            - id: admin_route
              uri: lb://renren-fast
              predicates:
                - Path=/api/**
              filters:
              #filters过滤器对请求uri进行重写，RewritePath=/api/(?<segment>.*),/renren-fast/$\{egment}表示将api换成renren-fast
                - RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment}
    

请求跨域问题

• 跨域问题

  浏览器从一个网段localhost:8001访问另一个网段localhost:88，浏览器会对请求做出跨域限制，跨域值浏览器不能执行其他网站的脚本，是浏览器同源策略造成的，是浏览器对JavaScript施加的安全限制，同源策略指协议、域名、端口号都要相同，其中一个不同就会产生跨域问题【就是当前服务器地址是localhost:8001;但是想要发送ajax请求给localhost:88是不允许的，http发给https也是不允许的】

  同时请求会被403禁止，且会显示请求方式是OPTIONS，表示该请求是一个预检请求，真正的请求还没有发送出去，非简单请求【PUT、DELETE】需要先发送预检请求，详细说明见文档https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS，GET、HEAD、POST请求同时满足Content-Type的值为text/plain、multipart/from-data或者application/x-www-form-urlencoded都是简单请求，只要不是简单请求发送正式请求前就需要发送预检请求，预检请求会先访问服务器是否允许跨域请求，服务器响应允许跨域请求就会发起真实请求，这里的验证码的Content-Type是图片为啥就不会被限制跨域【难道这个接受图片也是文本类型？】，登录请求发送的是post请求，是非简单请求，所以被同源策略限制

  

  【跨域流程】

  

  • 跨域问题的几种解决方案

    根本原因是当前页面网站和想要请求的网站不在同一个域【协议、域名、端口号】

    • 方案1：将前端项目和网关部署到同一台nginx服务器上，这样前端项目和网关就在同一个域，网关再将请求路由到其他的上游服务器上，从头到尾都是访问nginx，这种方式在开发期间很麻烦，因为前端项目和网关在开发中，不可能提前打包部署到nginx上

    • 方案2：服务器给预检请求的响应中添加响应头信息，告诉浏览器服务器允许跨域，可配置的响应头信息如下所示

      在网关中统一写一个filter，在请求处理完成后返回前用过滤器给响应头添加上以下字段

      • Access-Control-Allow-Origin：服务器配置支持哪些来源的跨域请求，如果配置成*表示支持任何来源的跨域请求

      • Access-Control-Allow-Methods：配置支持哪些请求方式跨域访问

      • Access-Control-Allow-Credentials：跨域请求默认不能包含cookie，设置为true可以包含cookie

      • Access-Control-Expose-Headers：指定XMLHttpRequest对象想从跨域请求中拿到的额外字段，跨域请求XMLHttpRequest.getResponseHeader()【这是浏览器的对象还是服务器的对象】默认只允许拿到六个基本字段：Cache-Control、Content-Language、Content-Type、Expire、Last-Modified、Pragma

      • Access-Control-Max-Age：指定预检请求响应后多长时间内无需为同一请求发起预检请求，浏览器自身也维护着一个最大有效时间，如果该字段指定的时间大于浏览器默认的最大有效时间，配置将不会生效

    • 网关对跨域问题的实现

      添加一个过滤器，对每个请求的响应都添加跨域相关的响应头信息

      在网关的目录下创建config包，并通过以下代码配置跨域，SpringBoot已经为用户提供了一个CorsWebFilter

      新版renren-fast配置了跨域，这也是之前降级SpringBoot报错的原因，哪个跨域可以直接删了，直接在网关设置跨域，使用这个配置一定要将renren-fast的跨域配置删了，否则会在响应头追加一次跨域配置，即Access-Control-Allow-Credentials:true,true，其他响应头参数也会被重复设置，会导致浏览器报错响应头不符合配置规范从而仍然跨域失败

      xxxxxxxxxx
      /**
       * @author Earl
       * @version 1.0.0
       * @描述 商城的统一跨域配置，Cors是跨域的意思
       * @创建日期 2024/02/23
       * @since 1.0.0
       */
      @Configuration
      public class MallCorsConfiguration {
          @Bean
          public CorsWebFilter corsWebFilter(){
              //2. 创建跨域配置信息对象,注意是cors.reactive.CorsConfigurationSource，
              //但是创建的时候发现CorsConfigurationSource是一个接口，需要对抽象方法进行实现
              //双击CorsConfigurationSource快捷键ctrl+h就能显示该接口的实现类，发现有一个基于URL路径的跨域配置信息实现UrlBasedCorsConfigurationSource
              //仍然是选择cors.reactive.UrlBasedCorsConfigurationSource包下的，因为网关使用的是webflux实现的响应式编程
              //相关的类都使用cors.reactive.包下的
              //CorsConfigurationSource source = new CorsConfigurationSource();
              UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
      
              //4. 创建CorsConfiguration,跨域相关的配置都写在该对象中
              CorsConfiguration corsConfiguration = new CorsConfiguration();
      
              //5. 配置跨域，就是配置预检请求允许跨域的响应头参数了
              //允许哪些请求头进行跨域，*表示允许所有请求头跨域
              corsConfiguration.addAllowedHeader("*");
              //允许哪些请求方式进行跨域，*表示允许所有请求方式跨域
              corsConfiguration.addAllowedMethod("*");
              //允许哪个请求来源进行跨域，*表示允许所有请求来源跨域
              corsConfiguration.addAllowedOrigin("*");
              //是否允许携带cookie进行跨域，true表示允许携带cookie跨域，不配置跨域请求就会丢失相关的cookie信息
              corsConfiguration.setAllowCredentials(true);
      
      
              //3. 对跨域配置信息对象的实现类进行配置
              //source.registerCorsConfiguration(path,config);//path表示对哪些uri进行跨域配置,"/**"表示任意路径
              //config的类型是CorsConfiguration，需要创建一个CorsConfiguration
              source.registerCorsConfiguration("/**",corsConfiguration);
      
              //1. 创建CorsWebFilter对象，需要CorsConfigurationSource跨域配置信息对象
              return new CorsWebFilter(source);
          }
      }
      

      【预检请求的跨域配置响应效果】

      

       

• 对商品模块进行注册中心注册，对商品列表树形查询的api在网关配置路由断言规则和url重写，并指定商品服务的配置中心配置

  • 目的是为了网关对商品服务的路由

    【配置中心注册】

    xxxxxxxxxx
    spring.application.name=mall-product
    spring.cloud.nacos.config.server-addr=127.0.0.1:8848
    spring.cloud.nacos.config.namespace=6c0c487b-206b-41fb-8cd2-e4b2c19e0477
    

逻辑删除

分类数据逻辑删除

后端实现

1. 商品分类的逻辑删除功能后端

   • mybatisplus逻辑删除实现

     mybatisplus的逻辑删除是更新操作，根据id和对应的逻辑删除字段将逻辑存在的指定id的记录的逻辑删除字段改成逻辑删除

     配置了逻辑删除查询操作也会自动变成查询满足条件且逻辑删除字段为逻辑未删除的记录

     • 在对应模块的application.yml文件中配置逻辑删除字段值

       和默认配置相同可省略

       xxxxxxxxxx
       #mybatisplus逻辑删除配置，这是统一的全局配置，该配置就默认配置，如果配置和默认配置相同可以不写
       #从mybatisPlus3.3.0以后要配置logic-delete-field属性了，这里是3.2.0不需要配置
       #logic-delete-field: flag # 全局逻辑删除的实体字段名(since 3.3.0,配置后可以忽略不配置步骤2)
       logic-delete-value: 1 # 逻辑已删除值(默认为 1)
       logic-not-delete-value: 0 # 逻辑未删除值(默认为 0)
       

     • 配置逻辑删除组件ISqlInjector并注入IOC容器

       从MybatisPlus3.1.1开始不再需要配置该ISqlInjector组件，即高版本可省略

       xxxxxxxxxx
       @Configuration
       public class MyBatisPlusConfiguration{
           @Bean
           public ISqlInjector sqlInjector(){
               return new LogicSqlInjector();
           }
       }
       

     • 在实体类的逻辑删除标识字段上添加@Tablelogic注解

       @Tablelogic注解内部有两个属性value和delval，分别表示代表逻辑未删除的字面值和逻辑删除的字面值，该属性值的默认值都为空字符串，为空字符串会自动获取全局配置，全局配置没有使用默认配置，如果不为空字符串就会优先使用该注解的配置来确定哪些值表示逻辑删除和逻辑未删除

       【@Tablelogic注解】

       xxxxxxxxxx
       @Documented
       @Retention(RetentionPolicy.RUNTIME)
       @Target(ElementType.FIELD)
       public @interface TableLogic {
       
           /**
            * 默认逻辑未删除值（该值可无、会自动获取全局配置）
            */
           String value() default "";
       
           /**
            * 默认逻辑删除值（该值可无、会自动获取全局配置）
            */
           String delval() default "";
       }
       

       【配置实例】

       xxxxxxxxxx
       @TableLogic(value = "1",delval = "0")
       private Integer showStatus;
       

       【执行的SQL语句】

       xxxxxxxxxx
       ==> Preparing: UPDATE pms_category SET show_status=0 WHERE cat_id IN ( ? ) AND show_status=1 
       ==> Parameters: 1432(Long)
       <== Updates: 1
       

   • SpringBoot调整日志级别配置打印MyBatisPlus的SQL语句

     • 在应用的application.yml中配置MyBatisPlus日志级别

       这样就能打印dao包下的MyBatisPlus的SQL执行语句

       xxxxxxxxxx
       #将SpringBoot应用的com.earl.mall包下所有类的日志级别调整成DEBUG级别
       logging:
         level:
           com.earl.mall: debug
       

前端实现

1. 商品分类逻辑删除前端

   • 业务逻辑

     • 删除前弹出提示框是否删除目标节点

       • 弹框使用Element-ui的MessageBox 弹框组件

         • this.$confirm("弹框提示内容"，"弹框标题",用于弹框设置的对象)

           弹框设置对象中前两个是取消和确认按钮的文本，type是弹框类型，点了确定按钮调用then方法，点了取消按钮调用catch方法，then方法和catch方法无论是否有代码都必须写，否则控制台会报错

         • this.$message(弹窗消息设置对象)

           这是消息弹窗组件，可以单独使用，也可以在其他方法中使用，效果就是弹出提示框

           type设置弹窗的颜色，success表示绿色，info表示灰色，message是提示文字

         xxxxxxxxxx
         <template>
           <el-button type="text" @click="open">点击打开 Message Box</el-button>
         </template>
         <script>
           export default {
             methods: {
               open() {
                 this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                   confirmButtonText: '确定',
                   cancelButtonText: '取消',
                   type: 'warning'
                 }).then(() => {
                   this.$message({
                     type: 'success',
                     message: '删除成功!'
                   });
                 }).catch(() => {
                   this.$message({
                     type: 'info',
                     message: '已取消删除'
                   });          
                 });
               }
             }
           }
         </script>
         

     • 前端发送Post请求携带json格式的商品分类id【id通过树形组件的移除按钮的自动传参原始节点数据的catId获取】，

     • 删除请求响应成功后弹窗删除成功消息提示

     • 再次请求刷新树形列表数据，通过双向绑定更新树形列表

     • 同时删除以后列表的展开状态应该维持原样

       • el-tree组件有一个属性值default-expanded-keys，属性值双向绑定一个数组，作用是数组中的元素作为唯一节点标识，该节点会被默认展开，一个节点的父节点的catId可以通过树形组件的node.parent.data.catId获取

   • 代码实现

     xxxxxxxxxx
     remove(node, data) {
       console.log(data.catId)
       this.$confirm("将删除该商品分类, 是否继续?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
       })
       .then(() => {
         var ids = [data.catId];
         this.$http({
           url: this.$http.adornUrl("/product/category/delete"),
           method: "post",
           data: this.$http.adornData(ids, false),
         }).then(({ data }) => {
           this.$message({
             type: "success",
             message: "删除成功!",
           });
           this.getCategoryTree();
           //设置删除节点的父节点为展开状态，expandKey双向绑定了el-tree组件的default-expanded-keys属性
           //但是现在这个优化不够完美，应该把此前展开的节点设置为默认展开，这样可能需要对节点进行遍历
           //最好的实现方法是点击展开按钮，默认展开就将当前节点的catId追加到数组中，点击关闭按钮，
           //就将对应的节点id从数组中移除,这个以后实现
           //暂时使用追加的方式将删除的节点的父节点追加到默认展开节点列表中，等实现了上一个逻辑这一步就不需要了
           this.expandKey=[...this.expandKey,node.parent.data.catId]
         });
       })
       .catch(() => {
         this.$message({
           type: "info",
           message: "已取消删除",
         });
       });
     },
     

树形控件展开优化

el-tree组件有节点展开关闭的事件，分别是node-expand和node-collapse，可以使用这两个事件来在默认展开节点中记录下来被展开的节点唯一标识即节点商品分类的id

这是独立翻阅文档做出的前端用户体验优化，面试可以吹

1. 背景

   • 对树形列表中的节点进行逻辑删除，最初的策略是删除单个节点以后直接再次请求被双向绑定的树形列表数据

     这种方式出现一个问题，子节点很可能是三级子节点，页面刷新以后展开的节点全部折叠，用户观察不到删除商品分类的效果

   • 针对上述问题进一步优化，使用el-tree组件的属性default-expanded-keys双向绑定一个数组expandKey，该属性的作用是能够配置在vue对象的生命周期中，数组中存在的节点对应的唯一标识【这里是此前设置的商品分类catId】的对应树形组件的节点将会始终被展开，在每次删除一个节点后将其父节点的唯一主键标识添加到expandKey数组中就能实现删除节点的父节点在节点删除前后都处于展开状态

     这一方式解决了删除节点刷新数据父节点自动关闭的问题，但是仍然存在其他展开节点，展开节点的子节点在某个节点增删以后自动关闭的问题

2. 需求

   • 对树形控件进行进一步优化，默认请款下所有展开的节点总是处于展开状态，不会因为增删节点重新请求刷新分类数据，任何已经展开的节点都不会被关闭

3. 实现原理

   • 通过翻阅文档，发现树形组件有一个展开事件和关闭事件，通过在展开事件中将被展开节点的唯一主键标识追加到数组expandKey中设置始终默认展开，在关闭事件发生时从数组expandKey中移除掉对应的节点主键标识和该节点所有已经展开的子节点主键标识【不移除子节点的主键标识即便移除节点的主键标识节点也无法关闭】，关闭事件的函数自动传参第一个参数data是当前节点的原始商品分类对象，第二个参数node是当前节点的Node对象，Node对象中的childNodes是子节点数组，每个子节点对象中有一个expanded属性，为true表示该节点被展开，子节点的data属性中的catId为当前子节点的主键唯一标识，对所有子节点进行遍历，如果子节点是展开状态就从数组expandKey中移除对应的主键标识，最后再从数组中移除当前节点的主键标识，从而实现了只要页面不刷新不重新初始化，树形组件列表的展开关闭状态始终只由节点的展开关闭事件控制，其他任何操作都不会影响节点的展开状态与否，所以原来删除节点后将父节点加入数组expandKey的操作也不在需要了，实现了展开节点始终展开，关闭节点始终关闭；用户可以实时看到节点增删的效果同时也能随心所欲地控制节点展开状态，且后续处理新增节点无需再考虑节点展开与否的问题

4. 代码完整实现

   xxxxxxxxxx
   <template>
     <div>
       <el-tree
         :data="categoryTree"
         :props="defaultProps"
         :expand-on-click-node="false"
         show-checkbox
         node-key="catId"
         :default-expanded-keys="expandKey"
         @node-expand="handleNodeExpand"
         @node-collapse="handleNodeCollapse"
       >
         <span class="custom-tree-node" slot-scope="{ node, data }">
           <span>{{ node.label }}</span>
           <span>
             <el-button
               v-if="node.level <= 2"
               type="text"
               size="mini"
               @click="() => append(data)"
             >
               Append
             </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>
     </div>
   </template>
   
   <script>
   export default {
     components: {},
     props: {},
     data() {
       return {
         categoryTree: [],
         expandKey: [],
         defaultProps: {
           children: "children",
           label: "name",
         },
       };
     },
     computed: {},
     watch: {},
     methods: {
       getCategoryTree() {
         this.$http({
           url: this.$http.adornUrl("/product/category/list/tree"),
           method: "get",
         }).then(({ data }) => {
           this.categoryTree = data.categoryTree;
         });
       },
       append(data) {},
       remove(node, data) {
         console.log(data.catId);
         this.$confirm("将删除该商品分类, 是否继续?", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning",
         })
           .then(() => {
             var ids = [data.catId];
             this.$http({
               url: this.$http.adornUrl("/product/category/delete"),
               method: "post",
               data: this.$http.adornData(ids, false),
             }).then(({ data }) => {
               this.$message({
                 type: "success",
                 message: "删除成功!",
               });
               this.getCategoryTree();
               //设置删除节点的父节点为展开状态，expandKey双向绑定了el-tree组件的default-expanded-keys属性
               //但是现在这个优化不够完美，应该把此前展开的节点设置为默认展开，这样可能需要对节点进行遍历
               //最好的实现方法是点击展开按钮，默认展开就将当前节点的catId追加到数组中，点击关闭按钮，
               //就将对应的节点id从数组中移除,这个以后实现
               //暂时使用追加的方式将删除的节点的父节点追加到默认展开节点列表中，等实现了上一个逻辑这一步就不需要了
               //this.expandKey=[...this.expandKey,node.parent.data.catId]
             });
           })
           .catch(() => {
             this.$message({
               type: "info",
               message: "已取消删除",
             });
           });
       },
       //当节点被展开记录节点被默认展开
       handleNodeExpand(data) {
         console.log(data.catId);
         this.expandKey = [...this.expandKey, data.catId];
       },
       //当节点被关闭时从数组中移除掉对应的节点和子节点id
       handleNodeCollapse(data, node) {
         //获取子节点对象数组，不从默认展开节点数组this.expandKey中移除调用子节点父节点即便移除也无法关闭展开状态
         //所以需要先从this.expandKey移除所有的展开子节点id
         var childNodes = node.childNodes;
         //对子节点对象数组进行遍历，判断节点对象的expanded属性是否为true，为true表示该子节点展开
         for (var i in childNodes) {
           if (childNodes[i].expanded == true) {
             //展开的子节点从默认展开节点列表数组中移除
             this.expandKey = this.expandKey.filter(function (item) {
               return item !== childNodes[i].data.catId;
             });
           }
         }
         this.expandKey = this.expandKey.filter(function (item) {
           return item !== data.catId;
         });
       },
     },
     created() {
       this.getCategoryTree();
     },
     mounted() {},
     beforeCreate() {},
     beforeMount() {},
     beforeUpdate() {},
     updated() {},
     beforeDestroy() {},
     destroyed() {},
     activated() {},
   };
   </script>
   <style lang='scss' scoped>
   </style>
   

新增分类记录

前端

使用Element-Ui对话框组件作为点击新增弹出的对话框

1. 对话框组件

   • 对话框的打开由按钮的visible.sync属性控制，双向绑定dialogVisible属性值，该属性值变成true对话框就会自动弹出，变成false就会自动关闭，直接把这个组件el-dialog放在template标签中，但是该元素要求template标签中必须有一个根元素div标签，该组件需要放在该div中；

   • 对话框绑定了一个:before-close事件，在对话框关闭前会调用handleClose方法

   • 弹出框需要填写表单的使用嵌套表单的对话框组件

   • el-form组件是在对话框组件中添加的一个表单组件

   • 一般对话框的自动关闭功能和表单的提交都放在确定按钮的点击事件完成

   xxxxxxxxxx
   <!-- Form -->
   <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
   
   <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
     <el-form :model="form">
       <el-form-item label="活动名称" :label-width="formLabelWidth">
         <el-input v-model="form.name" autocomplete="off"></el-input>
       </el-form-item>
       <el-form-item label="活动区域" :label-width="formLabelWidth">
         <el-select v-model="form.region" placeholder="请选择活动区域">
           <el-option label="区域一" value="shanghai"></el-option>
           <el-option label="区域二" value="beijing"></el-option>
         </el-select>
       </el-form-item>
     </el-form>
     <div slot="footer" class="dialog-footer">
       <el-button @click="dialogFormVisible = false">取 消</el-button>
       <el-button type="primary" @click="">确 定</el-button>
     </div>
   </el-dialog>
   
   <script>
     export default {
       data() {
         return {
           dialogFormVisible: false,
           form: {
             name: '',
             region: '',
             date1: '',
             date2: '',
             delivery: false,
             type: [],
             resource: '',
             desc: ''
           },
           formLabelWidth: '120px'
         };
       }
     };
   </script>
   

2. 表单组件

   • 表单组件el-form的单向绑定属性model绑定的是表单内容对应参数目标封装对象，比如商品分类对象category

   • el-form-item标签是每个表单元素，里面可以填充各种表单类型，label属性是该项表单的名字，label-width属性是表单的宽度

     • el-input标签是文本输入框，v-model是双向绑定，绑定的是表单对象category的某个属性，比如category.name绑定的是对象category的name属性，默认值一般给空串

     • el-button标签是按钮，表单有默认的提交按钮，但是可以不用，一般是用对话框的确定按钮来提交表单

   xxxxxxxxxx
   <el-form ref="form" :model="category" label-width="80px">
     <el-form-item label="分类名称">
       <el-input v-model="category.name"></el-input>
     </el-form-item>
     <el-form-item label="活动区域">
       <el-select v-model="form.region" placeholder="请选择活动区域">
         <el-option label="区域一" value="shanghai"></el-option>
         <el-option label="区域二" value="beijing"></el-option>
       </el-select>
     </el-form-item>
     <el-form-item label="活动时间">
       <el-col :span="11">
         <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
       </el-col>
       <el-col class="line" :span="2">-</el-col>
       <el-col :span="11">
         <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
       </el-col>
     </el-form-item>
     <el-form-item label="即时配送">
       <el-switch v-model="form.delivery"></el-switch>
     </el-form-item>
     <el-form-item label="活动性质">
       <el-checkbox-group v-model="form.type">
         <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
         <el-checkbox label="地推活动" name="type"></el-checkbox>
         <el-checkbox label="线下主题活动" name="type"></el-checkbox>
         <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
       </el-checkbox-group>
     </el-form-item>
     <el-form-item label="特殊资源">
       <el-radio-group v-model="form.resource">
         <el-radio label="线上品牌商赞助"></el-radio>
         <el-radio label="线下场地免费"></el-radio>
       </el-radio-group>
     </el-form-item>
     <el-form-item label="活动形式">
       <el-input type="textarea" v-model="form.desc"></el-input>
     </el-form-item>
     <el-form-item>
       <el-button type="primary" @click="onSubmit">立即创建</el-button>
       <el-button>取消</el-button>
     </el-form-item>
   </el-form>
   <script>
     export default {
       data() {
         return {
           category: {
             name: '',
             region: '',
             date1: '',
             date2: '',
             delivery: false,
             type: [],
             resource: '',
             desc: ''
           }
         }
       },
       methods: {
         onSubmit() {
           console.log('submit!');
         }
       }
     }
   </script>
   

3. 业务逻辑

   • 点击树形组件的Append按钮触发append方法调出对话框并为商品类赋值除了分类名字的其他所有属性，添加一个商品分类需要添加的字段信息有名字、父分类id、分类级别、排序、图标、商品计量单位【product_unit】、商品数量

     商品数量通过其他方式进行累计添加，这里不管

     注意前端的封装对象的属性名要和后端实体类的属性名相同

     • 商品分类的父分类id通过树形组件的节点append按钮自动传参的data的catId属性获得

       注意append点击调用的append方法自动传参的data中已经包含了服务器父分类对象的完整对应数据

     • 分类层级可以通过父分类的层级自加1获得

       后端传过来的数据被解析成对象，属性值是字符串，如果需要做数学运算可以使用字符串*1转换成数字再做数学运算

     • 排序使用默认值0、逻辑删除标识使用默认值1表示存在、

     • 图标和商品计量单位和名字一样都通过对话框添加

   • 对话框的确定按钮绑定单机事件触发saveCategory函数发送post请求提交表单参数保存记录

   • 响应成功弹框提示信息并关闭对话框，将分类对象category恢复成初始配置，刷新属性列表数据，同时注意用户点击Append按钮一般是不会展开子目录的，为了观察到节点添加效果，这里需要自动将父节点展开

     category恢复成初始配置的方式如下：抽取初始设置作为常量，对话框每次关闭或者新增时进行初始化，通过js方法this.category = Object.assign({}, INITCATEGORY);将两个对象合并成一个新对象赋值给category

     由于每次打开对话框都会重新初始化category，不会存在对话框回显混乱的问题

     xxxxxxxxxx
     <script>
     //定义一个常量作为category对象的初始化配置
     const INITCATEGORY = {
       catId: null,
       name: "",
       parentCid: 0,
       catLevel: 1,
       showStatus: 1,
       sort: 0,
       icon: "",
       productUnit: "",
     };
     export default {
       components: {},
       props: {},
       data() {
         return {
           isAdd: true,
           dialogFormVisible: false,
           //category设置为一个空对象，等待处理赋值默认值
           category: {},
         };
       },
       methods: {
         //点击新增节点弹出对话框，给部分属性值赋值
         append(data) {
           this.isAdd = true
           //弹出新增分类对分类数据进行初始化
           this.category = Object.assign({}, INITCATEGORY)
           this.dialogFormVisible = true
           this.category.parentCid = data.catId
           this.category.catLevel = data.catLevel * 1 + 1
         },
         //保存新增商品分类记录
         saveCategory() {
           this.$http({
             url: this.$http.adornUrl("/product/category/save"),
             method: "post",
             data: this.$http.adornData(this.category, false),
           }).then(({ data }) => {
             this.getCategoryTree();
             this.dialogFormVisible = false;
             //自动展开父目录
             this.expandKey = [...this.expandKey, this.category.parentCid];
             //新增商品分类成功后再次对商品分类数据进行初始化
             this.category = Object.assign({}, INITCATEGORY);
             this.$message({
               type: "success",
               message: "新增商品分类成功！",
             });
           });
         },
       },
     };
     </script>
     

      

后端接口

1. 业务逻辑

   • 使用renren-generator逆向工程生成的save方法使用@RequestBody注解将json数据自动转成商品实体类，根据实体类使用自增主键保存新增商品记录

     注意前端提交对象的属性名要和后端实体类的属性名一一对应

修改分类记录

前端

1. 业务逻辑

   • 修改分类记录的对话框复用添加分类数据的对话框，根据新增按钮或者修改按钮设置isAdd值为true或者false，由此判断对话框标题并以此确定点击确认后是修改分类还是新增分类，且要对数据实时进行回显

     回显过程中为了避免用户在列表界面停留很久，其他用户已经在该期间对数据进行了修改而重复修改的问题，回显的数据专门请求根据catId查询单个分类记录的接口获取最新数据进行回显

   • 确定按钮要增加判断条件，如果是修改就调用修改分类的方法发起修改请求，如果是新增就调用新增分类的方法发起修改请求，这里可以用当前分类记录是否含有catId字段作为修改还是新增的判据【判断策略经过考虑后换成根据isAdd判断执行新增分类还是执行修改分类比较简洁和优雅】

     修改分类的数据只会修改部分分类的名字，图标和计量单位，可以使用category的解构表达式只获取这三个外加一个catId解构以后构建新的只包含这四个参数的对象

     根据主键修改记录，如果属性值为null就会跳过修改

   • 请求成功响应弹窗提示信息，重新请求树形列表数据，关闭对话框，

   • 在修改过程中鼠标稍微往外一滑一点，对话框就会自动消失，对话框的属性中有个close-on-click-modal属性，表示是否可以通过点击modal来关闭对话框，默认值为true，需要设置成false来禁止对话框的随意点击消失，属性值需要布尔值，如果非要写字符串使用单向绑定即可

后端

1. 业务逻辑

   • renren-generator逆向工程生成了对单个分类记录的查询方法info，直接调用接口即可

   • renren-generator的逆向工程生成了对单个分类记录的修改方法update，直接调用接口即可

节点拖拽

树形组件的节点拖拽后要满足三次商品分类结构，树形节点拖拽上下移动并和排序字段进行绑定

前端拖拽效果

1. 业务逻辑

   • element-ui的树形列表控件中有一个draggable属性，意思是是否开启节点拖拽功能，属性值是布尔类型，默认值为false，将其设置为true就能开启节点的拖拽功能【不能写成单向绑定会报错，直接单加一个draggable属性即可】

     但是原始的节点拖拽功能很自由，同级节点之间可以更换先后顺序，也可以让其中一个节点变成另一个节点的子节点，演变成超过三层分类，所以需要对拖拽功能进行限制

     树形控件的另一个属性allow-drop，作用是拖拽时触发allowDrop函数判断目标节点能否被放置，allow-drop是一个函数Function(draggingNode, dropNode, type)【这个函数就是allowDrop】，函数有三个参数，draggingNode是当前正在被拖拽的节点，type是当前节点可以放在哪些位置，dropNode是目标节点；返回布尔类型，该函数返回false时，任意节点的拖拽效果都是被禁止的

     type的值可以取三个，prev指可以放在目标节点前面、inner指可以放在目标节点里面、next指可以放在目标节点后面，这个参数是根据被拖拽节点的位置和目标节点的位置关系判断的，目标节点是鼠标滑动时最后一次经过的哪个节点，type就是相对于最后划过的哪个节点判断的

   • allowDrop函数的拉拽判断逻辑

     • allowDrop函数会传参三个参数，意义分别是

       • draggingNode是当前正在被拖拽的节点，以后统称当前节点；

         当前节点参数中的level属性会随着层级变化而持续变化，对应的父节点的childNodes数组中也会实时更新新增的节点，而且保持节点顺序，就是树形组件中所有的节点数据都是实时的，数据库原始数据不会变化

       • dropNode是拖拽过程中鼠标最后划过的节点，以后统称目标节点

       • type是当前节点的最终位置与目标节点的关系，inner表示最终位置在目标节点里面，prev表示在目标节点前一个，next表示在目标节点后一个

     • allowDrop函数通过逻辑判断返回布尔类型的值，true表示可以拖拽，false表示不能拖拽

       • 判断当前节点能否拖拽到目标位置的逻辑是，以当前节点为根的子树的深度加上目标位置父节点的层级要小于等于三级分类的最大层级深度即3，即拖拽后的节点层级仍然要满足三层分类效果

       • 实现是定义一个变量maxLevel，对当前节点进行的所有子节点进行递归遍历，取出所有子节点中的最大层级存入变量maxLevel，最大层级减去当前节点的层级加1就是当前节点为根的子树的深度；因为在拖拽过程中，allowDrop函数会被频繁调用，会不停地执行对当前节点子树的遍历，因此在对子树遍历以前，用一个变量将当前节点缓存起来，只要变量没有被更新，maxLevel中的最大层级数就是当前节点的子树最大层级，由此减少大量的重复无效计算【减少重复计算是本人独立优化】

       • 拿到当前节点的子树深度根据type是否inner类型进行判断，

         • 如果是inner类型说明目标节点就是目标位置的父节点，子树深度加目标节点的层级之和小于等于3目标位置就合法

         • 如果不是inner类型说明目标节点的父节点才是目标位置当前节点的父节点，子树深度加上目标节点的父节点的层级之和小于等于3目标位置就合法

   • 代码实现

     xxxxxxxxxx
     <!--树形组件部分，和拖拽相关的属性为draggable和:allow-drop="allowDrop"；draggable默认是关闭的，写上就表示开始，给其赋值true反而报错-->
     <el-tree
           :data="categoryTree"
           :props="defaultProps"
           :expand-on-click-node="false"
           show-checkbox
           node-key="catId"
           :default-expanded-keys="expandKey"
           @node-expand="handleNodeExpand"
           @node-collapse="handleNodeCollapse"
           draggable
           :allow-drop="allowDrop"
         >
     methods：{  
         //判断一个节点是否能被拖拽到指定指定位置，draggingNode是被拖拽节点、dropNode是目标节点，即鼠标最后经过的节点
         //type是当前正在被拖拽的节点与目标节点间的关系
         allowDrop(draggingNode, dropNode, type){
             //一、整体逻辑当前节点拖拽后于其父节点构成的节点总层数必须小于等于3
             //判断当前节点的深度是否已经保存到isDraggingNode对象中了，如果保存了就不要再求当前节点的深度了，
             //this.nodeMaxLevel保存的就是当前节点的最大层级,节省拖拽过程重复调用子树遍历浪费系统性能
             if(this.isDraggingNode!=draggingNode){
                 this.isDraggingNode=draggingNode
                 //1--求当前节点的子树深度
                 //初始化当前节点层级
                 this.nodeMaxLevel=draggingNode.level
                 //计算当前节点子树的最大levle值，结果保存在this.nodeMaxLevel中
                 this.countCurNodeMaxLevel(draggingNode)
             }
             //当前节点子树深度
             let draggingNodeTreeDeep=this.nodeMaxLevel-draggingNode.level+1
             //如果type类型是inner，当前节点深度和目标节点深度之和要小于等于3，
             //否则说明当前节点是平移或者平移到其他目录，这种情况计算当前节点深度和目标节点的父节点层级之和小于等于3
             //这两种情况都可以总结为目标节点和移动后的父节点构成的树的最大深度小于等于3
             if(type=='inner'){
                 return draggingNodeTreeDeep+dropNode.level <= 3
             }else{
                 return draggingNodeTreeDeep+dropNode.level-1 <= 3
             }
         },
         //求一个节点的最大目录层级，相当于遍历所有的子节点获取子节点的最大level
         countCurNodeMaxLevel(node){
             //判断一个节点是否有子节点，当前节点没有子节点就使用当前节点的层级作为返回值
             if(node.childNodes!=null && node.childNodes.length>0){
                 for(let i=0;i<node.childNodes.length;i++){
                     if(node.childNodes[i].level>this.nodeMaxLevel){
                         this.nodeMaxLevel=node.childNodes[i].level
                     }
                     //对每个子节点递归求最大目录层级
                     this.countCurNodeMaxLevel(node.childNodes[i])
                 }
             }
         }
     }
     

分类数据拖拽关联

拖拽效果会引起商品分类的parent_cid【父ID】、level【层级】、sort【排序】三个字段变化，进行一次拖拽效果就要给后台发送一次对当前节点和同级节点【同级节点的sort字段发生了变化】的更新请求修改对应的字段，子节点只需要处理层级变化，当前节点在什么位置和子节点没什么关系，但是当前子节点的层级发生变化，所有子节点的层级也会相应的发生变化，也需要对所有子节点的层级进行更新，所有的节点记录可以一次性提交，数组中的对象只需要设置需要修改的字段，SpringBoot在处理的时候会自动把不需要修改的字段全部置为null，相应的数据库表的数据也也会修改不为null的字段

1. element-ui的树形控件中有一个拖拽结束事件node-drag-end【拖拽结束不管是否成功都会触发】和一个拖拽成功事件node-drop【拖拽成功完成触发事件】，拖拽成功完成触发事件的回调函数handleDrop一共有四个参数，分别是被拖拽的当前节点、目标节点、type【目标位置相对于目标节点的相对位置before、after、inner、最后一个参数是整个事件对象】

   • 目标节点的parent保存了中的children保存了目标节点的全部数据，即便目标节点是一级节点其父不是节点而是所有一级节点的数组也同样在parent中保存了全部一级节点的信息，但是当前节点是一级节点或者变成了一级节点parent字段是不会有值的

2. 树形列表一级节点的父是一个数组，不再是某个分类了，父id此时会变成undefined【这里可以用更优雅的断路写法 pCid = dropNode.parent.data.catId || 0;】

3. 业务逻辑

   • 分插入到目标节点内部还是目标节点前后获取到当前节点的父节点，父节点是通过目标节点获取的，如果当前节点是一级节点，当前节点的parent属性是undefined，但是目标节点即使是一级节点，parent属性仍然是包含所有兄弟节点的数组

   • 创建数组this.updateNodesAfterDrop用于封装要修改的商品记录，使用this.updateNodesAfterDrop.push(追加对象)来向数组中追加要修改的记录

   • 对拖拽后的当前节点的兄弟节点进行遍历，对非当前节点的兄弟节点，统一修改排序字段为数组索引；对当前节点修改父节点id，排序，层级【层级使用当前节点实时变化的level属性】；如果当前节点的层级发生变化，对当前节点为根的子树所有节点的层级字段以节点的level属性为标准递归修改；修改了的记录全部追加到数组中等待向后端接口发起请求

     注意所有对象都追加catId属性获取分类记录的主键作为修改数据库数据的查找条件【注意节点的id和分类记录的原始catId是不一样的，不要写错了】

     当前节点拖拽到一级节点获取父节点的id为undefined，在js中和0做短路或运算将undefined处理成0即可【js中的短路或运算见附录】

   • 向后端接口发送post请求更新数据库字段，响应成功以后将更新数组清空

   • 刷新页面【不刷新其实也可以】，向默认展开的数组中添加当前节点的父节点

4. 代码实现

   xxxxxxxxxx
   树形组件
   <el-tree
     :data="categoryTree"
     :props="defaultProps"
     :expand-on-click-node="false"
     show-checkbox
     node-key="catId"
     :default-expanded-keys="expandKey"
     @node-expand="handleNodeExpand"
     @node-collapse="handleNodeCollapse"
     draggable
     :allow-drop="allowDrop"
     @node-drop="handleDrop"
   >
   
   handleDrop(draggingNode, dropNode, dropType, ev) {
     /* 
     一、整体思路：
       1. 获取当前节点的父节点,通过父节点的获取到拖拽结束后的所有子节点
       2. 对子节点进行遍历,目标是凡是涉及到数据字段变化的节点记录全部更新，
             目标节点的父节点下的同级子节点的排序字段全部更新【获取子节点的id和更新排序】
             目标节点的更新内容包括排序、父节点id、层级【获取节点的id和更新排序、父节点id、层级】
             目标节点层级发生变化，目标节点为根的子树上所有节点有且仅有层级都会发生变化【子节点的id和更新层级】
             [这里不考虑目标节点的父节点的子节点sort字段变化，因为不影响排序，后续该节点下发生节点移入会自动更新]
       3. 更新方式为一次传参整个数组，每个对象根据属性名自动封装，没有的属性值设置为null，更新时自动忽略
     */
     //1. 获取当前节点拖拽后父节点下的所有子节点
     //定义当前节点的父节点下的所有子节点
     let brosOfDraggingNode=null;
     let pCidOfDraggingNode=0;
     //如果当前节点的父节点是目标节点的父节点
     if(dropType == "before" || dropType=="after"){
       //目标节点即使是一级节点dropNode.parent.childNodes也是所有一级节点
       brosOfDraggingNode=dropNode.parent.childNodes
       pCidOfDraggingNode=(dropNode.parent.data.catId || 0)
     }else{
       //当前节点的父节点是目标节点
       brosOfDraggingNode=dropNode.childNodes
       pCidOfDraggingNode=dropNode.data.catId
     }
     console.log("同级数据：",brosOfDraggingNode,pCidOfDraggingNode)
     //2. 对所有兄弟节点进行遍历，至少有一个子节点，直接遍历即可
     for(let i=0;i<brosOfDraggingNode.length;i++){
       //如果子节点是当前节点，将要修改的数据封装成对象封装到this.updateNodesAfterDro中等待发起更新请求
       //注意节点的id不一定是分类数据的catId，一定要看好了
       let curNode=brosOfDraggingNode[i]
       let curNodeData=brosOfDraggingNode[i].data
       if(curNodeData.catId==draggingNode.data.catId){
         let catLevelOfDraggingNode = draggingNode.data.catLevel
         //如果当前节点的层级发生变化
         if(curNode.level!=catLevelOfDraggingNode){
           //当前节点的层级需要更新
           catLevelOfDraggingNode=curNode.level
           //对当前节点的所有子节点递归更改层级
           this.updateChildNodesLevel(curNode)
         }
         this.updateNodesAfterDrop.push({catId: curNodeData.catId,sort: i,parentCid: pCidOfDraggingNode,catLevel: catLevelOfDraggingNode})
       }else{
         this.updateNodesAfterDrop.push({catId: curNodeData.catId,sort: i})
       }
     }
     //console.log("tree drop: ", draggingNode,dropNode, dropType);
     console.log(this.updateNodesAfterDrop)
   },
   //更新一个节点下所有节点的层级
   updateChildNodesLevel(node){
     if(node.childNodes.length>0){
       for(let i=0;i<node.childNodes.length;i++){
         let curNode=node.childNodes[i]
         this.updateNodesAfterDrop.push({catId: curNode.data.catId,catLevel: curNode.level})
         this.updateChildNodesLevel(curNode)
       }
     }
   },
   

5. 优化

   • 为了避免点击添加不小心拖动节点导致拖动逻辑执行，在界面添加一个拖动开关，只有开启拖动开关的时候才能进行拖动

     • 开关组件

       用开关组件双向绑定变量draggable，树形组件单向绑定draggable

       xxxxxxxxxx
       <el-switch
         v-model="value"
         active-color="#13ce66"
         inactive-color="#ff4949"
         active-text="按月付费"
         inactive-text="按年付费">
       </el-switch>
       
       <script>
         export default {
           data() {
             return {
               value: true
             }
           }
         };
       </script>
       

     • 配置实例

       xxxxxxxxxx
       开关组件
       <el-header height="30px">
           <div el-row>
             <el-col :span="24" :offset="11">
               <div class="grid-content bg-purple-dark">
                 &emsp;&emsp;&emsp;
                 <el-switch
                   v-model="draggable"
                   active-icon-class="el-icon-d-caret"
                   width="30"
                 >
                 </el-switch>
               </div>
             </el-col>
           </div>
       </el-header>
       树形组件
       <el-tree
           :data="categoryTree"
           :props="defaultProps"
           :expand-on-click-node="false"
           show-checkbox
           node-key="catId"
           :default-expanded-keys="expandKey"
           @node-expand="handleNodeExpand"
           @node-collapse="handleNodeCollapse"
           :draggable="draggable"
           :allow-drop="allowDrop"
           @node-drop="handleDrop"
         >
       

   • 多次批量拖拽一次提交同步雷神的实现有大问题

     根本没有考虑对同一个当前节点的多次拖拽导致的单次提交数据重复修改的问题，前端学的不太全，这里以后看有没有类似HashMap的前端数据结构，只保留同一个节点最后的更新数据，避免重复修改问题；同时还有锁的问题，可能存在多用户同时修改的情况都没有考虑

     拖拽一次更新一次数据库确实不合理，以后看有没有什么优化手段

     • 尝试了一下，添加了批次拖拽的功能，就是添加一个保存更改的按钮，将所有节点包括重复更改的节点数据一次性点击保存更改进行提交，把提交代码放到了保存更改的按钮点击事件中去了；额外增加了关闭拖拽的数据保存提醒功能

       现在功能一切正常，有bug遇到再说，仍然存在同一个当前节点和兄弟节点重复更新的情况，只是目前看起来没啥bug，功能仍然正常