SpringBoot简易任务栏示例-526互联

一、概述

　　现有这样一个需求：前端要求实现类似任务栏的东西（windows电脑的任务栏）。要求：可以向任务栏增加图标、删除图标、给任务栏中的图标排序以及加载任务栏图标列表

参考样例图：

规律图：

　　思路：（这里假设任务栏图标列表本身就是一个有序的集合，排序规则按照sort正向排序）

　　　　新增：

　　　　　　增加一个图标可能会在任务栏的任意位置，有可能是空任务栏第一次加入，也可能是任务栏中已经有了，从中间插入，也可能是直接将图标放到任务栏的最后。

　　　　　　此处有一个通用的做法：假如在第2个位置插入一个新的图标。1.那么此时需要把第二个位置的图标的排序值传给后台，后台拿到排序值之后，把数据库中这个用户关联的图标的sort>传递过来的sort都+1

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2.把传递过来的图标信息插入数据库，此图标的sort值=原始位置图标的sort值

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　3.update 表名 set sort=sort+1 where sort>=orgSort

　　　　删除：

　　　　　　1.删除的做法和上面是相反的，因为删除了一个图标，被删除图标的位置需要向前补一位，即需要被删除图标后面的sort值都-1

　　　　　　2.update 表名 set sort=sort-1 where sort>=orgSort

　　　　给状态栏排序

　　　　　　1.如上所示，如果第二个图标和第三个图标交换，或者第三个图标和第二个图标交换。第一个和第四个是不动的，只有二三发生了变动。所以只需要更改2,3的sort值即可。

　　　　　　2.假设用户选中的图标中的sort为startSort,要替换图标位置的sort为targetSort。下面又分两种情况 1.startSort>targetSort 2.targetSort>startSort

　　　　　　3.startSort>targetSort

List<User> users = userMapper.selectList(wrapper);
        if (startMoveSort > targetMoveSort) {//说明是从右向左拖拽（比目标位置大，需要减）
            int diff = startMoveSort - targetMoveSort;
            //startSort后面的值，都+1
            for (User user : users) {
                if (user.getSort() == startMoveSort) {
                    user.setSort(user.getSort() - diff);
                } else {
                    user.setSort(user.getSort() + 1);
                }
            }
        }

　　　　　　4.targetSort>startSort

else if (startMoveSort < targetMoveSort) {//从左向右拖拽（比目标位置小，需要加）
            int diff = targetMoveSort - startMoveSort;//相差多少
            //和目标target之间的sort，逐一往上-1
            for (User user : users) {
                if (user.getSort() == startMoveSort) {
                    user.setSort(user.getSort() + diff);
                } else {
                    user.setSort(user.getSort() - 1);
                }
            }
        }

　　　　　　5.更改sort的值以后，把变动区域的sort逐一进行update即可

 //如果没有用户id就说明是一个插入操作
        users.forEach(user -> {
            if (user.getId() != null) {
                userMapper.updateById(user);//更新
            } else {
                userMapper.insert(user);
            }
        });

二、代码示例

　　1.新增

@Transactional
    @Override
    public ResultOk addUser(UserAddSortRequest request) {
        //批量更新sort的值，往后+1
        userMapper.sortBatchPlusOne(request.getLocationOfSort());
        //把插入的值，嵌入插入位置
        int rows = userMapper.insert(request.getUser());//先把这个位置插入
        System.out.println("插入用户数据:" + (rows > 0));
        return ResultOk.ok(200, "插入成功", rows>0);
    }

　　2.删除

@Transactional
    @Override
    public ResultOk deleteUser(UserDeleteRequest request) {
        //因为要删除，需要批量更新sort的值
        userMapper.sortBatchMinusOne(request.getDeleteLocationOfSort());
        //执行删除操作
        int rows = userMapper.deleteById(request.getId());
        System.out.println("删除数据:"+(rows>0));
        return ResultOk.ok(200, "删除成功", rows>0);
    }

　　3.排序

 @Override
    public ResultOk userSort(UserSortRequest request) {
        int startMoveSort = request.getStartMoveSort();
        int targetMoveSort = request.getTargetMoveSort();
        LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
        wrapper.between(User::getSort,startMoveSort,targetMoveSort);
        List<User> users = userMapper.selectList(wrapper);
        if (startMoveSort > targetMoveSort) {//说明是从右向左拖拽（比目标位置大，需要减）
            int diff = startMoveSort - targetMoveSort;
            //startSort后面的值，都+1
            for (User user : users) {
                if (user.getSort() == startMoveSort) {
                    user.setSort(user.getSort() - diff);
                } else {
                    user.setSort(user.getSort() + 1);
                }
            }
        } else if (startMoveSort < targetMoveSort) {//从左向右拖拽（比目标位置小，需要加）
            int diff = targetMoveSort - startMoveSort;//相差多少
            //和目标target之间的sort，逐一往上-1
            for (User user : users) {
                if (user.getSort() == startMoveSort) {
                    user.setSort(user.getSort() + diff);
                } else {
                    user.setSort(user.getSort() - 1);
                }
            }
        }
        //如果没有用户id就说明是一个插入操作
        users.forEach(user -> {
            if (user.getId() != null) {
                userMapper.updateById(user);//更新
            } else {
                userMapper.insert(user);
            }
        });

        return ResultOk.ok(200, "排序成功", null);
    }

　　4.查询列表

  @Override
    public ResultOk getUsers() {
        LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
        wrapper.orderByAsc(User::getSort);
        List<User> users = userMapper.selectList(wrapper);
        return ResultOk.ok(200,"查询列表成功",users);
    }