基于商品列表的拖拽排序后端实现

目录

一:实现思路

二:实现步骤

二:实现代码

三:注意点


一:实现思路

后台实现拖拽排序通常需要与前端进行配合,对商品的列表拖拽排序,前端需要告诉后端拖拽的元素和拖动的位置。

这里我们假设商品列表有一个sort字段作为排序,有10个商品标号1到10,当移动1到6时,我们要做的操作是把1号的sort更新为6,把1到6包含6的5个元素sort减少1,这样2号变为1号,6号变为5号,sort还是连续的。同理,把6号移动到2号时,把2到6包含2的4个元素都增加1,这样2号变为3号,5号变为6号。这样我们的顺序也是连续的。

二:实现步骤

1:确定商品的数据结构,包括商品ID、排序字段。
2:当用户在前端页面上拖拽商品进行排序时,前端应发送一个请求到后端,该请求应包含以下信息:被拖拽商品的ID、新的位置(或排序权重)。
3:后端接收前端的请求,根据请求中的商品ID和新的位置信息,更新数据库中相应的商品记录。
 

二:实现代码

    $goodsId = $request['goods_id'] ?? 0;
    $sort = $request['sort'] ?? 0;
    $goodsData = (new goodsModel())->where('id', $goodsId)->field('type,sort,pid')->find();
    if (!$goodsData) {
        return true;
    }
    $cSort = $goodsData['sort'];
    if ($sort > $cSort) {//从上往下拖动
        $sortList = range($cSort+1, $sort);
        if ($sortList) {
            if ($type == "field") {
                $sortWhere = [['pid','=',$goodsData['pid']],['sort','in',$sortList]];
            } elseif ($type == "group") {
                $sortWhere = [['type','=',$goodsData['type']],['sort','in',$sortList]];
            }
            (new goodsModel())->where($sortWhere)->dec('sort')->update();
        }
    } else {
        $sortList = range($sort, $cSort);
        if ($sortList) {
            if ($type == "field") {
                $sortWhere = [['pid','=',$goodsData['pid']],['sort','in',$sortList]];
            } elseif ($type == "group") {
                $sortWhere = [['type','=',$goodsData['type']],['sort','in',$sortList]];
            }
            (new goodsModel())->where($sortWhere)->inc('sort')->update();
        }
    }

三:注意点

这里我们使用sort作为排序,要保证sort的连续性,如果增加和删除了商品,要实时的更新sort的值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/328003.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Matlab三维绘图

绘制三维图plot3 t0:pi/50:10*pi; xsin(t); ycos(t); zt; plot3(x,y,z); 产生栅格数据点meshgrid 这个接口在绘制三维图像里面相当重要,很多时候要将向量变成矩阵才能绘制三维图。 x0:0.5:5; y0:1:10; [X,Y]meshgrid(x,y); plot(X,Y,o); x和y是向量,…

RocketMQ单机部署完整学习笔记

文章目录 前言一、RocketMQ是什么?二、使用步骤1.安装MQ1.安装JDK2.安装mq3.MQ配置(核心) 2.搭建可视化dashboard1.下载源码2.修改配置3.启动 3.整合java1.生产者2.消费者3.启动生产者4.启动消费者5.dashboard添加消费组 三、总结全部的配置 前言 本文是基于4.X版本…

LeetCode 2221. 数组的三角和

文章目录 1. 题目 2. 解题 1. 题目 给你一个下标从 0 开始的整数数组 nums ,其中 nums[i] 是 0 到 9 之间(两者都包含)的一个数字。 nums 的 三角和 是执行以下操作以后最后剩下元素的值: num…

I.MX6ULL开发笔记(二)——硬件外设操作

0x01 点亮第一个RGB灯 在文章http://t.csdnimg.cn/EGWt9中有介绍Linux下文件目录,那么在Linux系统下,RGB灯也是一个设备,所以我们需要到/sys目录下去操作这个设备。 之后,我们进入到class目录,这里挂载着开发板上的外…

Mongodb删除操作中字符序对结果的影响

本文还是要从删除操作的语法说起。 db.collection.deleteMany(<filter>,{writeConcern: <document>,collation: <document>,hint: <document|string>} ) 删除语法中&#xff0c;可以指定数据写入策略&#xff0c;字符序和使用的索引字段。 字符序&a…

MySQL第四战:视图以及常见面试题(上)

目录 目录&#xff1a; 一.视图 1.介绍什么是视图 2.视图的语法 语法讲解 实例操作 二.MySQL面试题 1.SQL脚本 2.面试题实战 三.思维导图 目录&#xff1a; 随着数字化时代的飞速发展&#xff0c;数据库技术&#xff0c;特别是MySQL&#xff0c;已经成为IT领域中不可…

Mybatis简易搭建并查询数据库表内所有数据

搭建步骤 1.在mysql中创建user表&#xff0c;添加数据2.创建maven模块&#xff0c;导入坐标3.在资源文件夹中导入需要用到的logback.xml4.编写MyBatis 核心配置文件->替换连接信息 解决硬编码问题5.编写 SQL映射文件->统一管理sgl语句&#xff0c;解决硬编码问题6.编码定…

HackTheBox - Medium - Linux - Ambassador

Ambassador Ambassador 是一台中等难度的 Linux 机器&#xff0c;用于解决硬编码的明文凭据留在旧版本代码中的问题。首先&#xff0c;“Grafana”CVE &#xff08;“CVE-2021-43798”&#xff09; 用于读取目标上的任意文件。在研究了服务的常见配置方式后&#xff0c;将在其…

【管理篇 / 登录】❀ 06. macOS下使用USB配置线登录 ❀ FortiGate 防火墙

【简介】飞塔防火墙上都会配有CONSOLE接口&#xff0c;包装里都会配置一根USB配置线&#xff0c;通过这个接口和这根线&#xff0c;我们可以用命令的方式登录飞塔防火墙。随着苹果电脑的普及&#xff0c;我们来学习如何在macOS中使用USB配置线登录飞塔防火墙。 早期飞塔防火墙包…

useContext

可以跨组件传值 其实主要的就是三步 1、const xxx React.createContext();创建一个context 2、<xxx.Provider value{{ num, setNum }}>父组件设置要传递的值 3、const { num, setNum } React.useContext(xxx);子组件下使用 特点&#xff1a; 1、可以有多个xxx.Pr…

网络优化篇(一)---------TCP重传性能优化

本文通过一个TCP重传优化的实际问题,详细讲解问题的分析、定位、优化过程。 通过本文你将学到: 如何通过linux命令和/proc文件系统分析TCP性能数据如何通过linux命令和netlink api分析某个具体的TCP连接的性能数据如何通过bcc工具分析TCP性能数据如何通过调整系统参数优化TCP重…

第 121 场 LeetCode 双周赛题解

A 大于等于顺序前缀和的最小缺失整数 模拟&#xff1a;先求最长顺序前缀的和 s s s &#xff0c;然后从 s s s 开始找没有出现在 n u m s nums nums 中的最小整数 class Solution { public:int missingInteger(vector<int> &nums) {unordered_set<int> vis(…