谷粒商城实战笔记-55-商品服务-API-三级分类-修改-拖拽数据收集

已于 2024-07-24 16:38:25 修改
阅读量700 收藏 16
点赞数 18
分类专栏： 谷粒商城 文章标签： 笔记 谷粒商城
于 2024-07-24 10:29:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/epitomizelu/article/details/140654177
版权

文章目录


这一节的主要内容是收集拖拽后的要更新的节点的数据，逻辑比较复杂。

  • 1，拖拽后结点的parentCid的更新；
  • 2，拖拽后结点的父节点下所有结点的sort排序属性的变化；
  • 3，拖拽后结点及其子节点catLevel的变化；

所有这些数据都用收集到，然后发送给后台更新。

拖拽结束后，触发拖拽结束事件，所以要在el-tree上绑定这个事件。

在这里插入图片描述
事件函数nodeDrop定义如下。

在这里插入图片描述

一，拖拽后结点的parentCid的更新

	  var draggingNodeNewPId = 0;
      // 1，更新draggingNode的parentCid，根据dropPosition的不同值，分为两种情况
      if (dropPosition === "before" || dropPosition === "after") {
        draggingNodeNewPId = dropNode.data.parentCid;
      } else {
        draggingNodeNewPId = dropNode.data.cid;
      }

这段代码是在处理 el-tree 组件中拖拽结束后的逻辑，特别是更新被拖动节点的 parentCid 字段，以反映新的父节点关系。parentCid 假设是数据库中用来标识父节点的一个字段，通常在树形结构的数据模型中使用。

代码中的逻辑分为两种情况：

  1. 当拖动节点放置在目标节点之前 (prev) 或之后 (next)：

    if (dropPosition === "prev" || dropPosition === "next") {
  draggingNode.parentCid = dropNode.data.parentCid;
}

    在这种情况下，拖动的节点将变为与目标节点同级，但它们共同的父节点会成为新的父节点。因此，draggingNode 的 parentCid 被设置为 dropNode.data.parentCid，即目标节点的父节点ID。这种写法还兼容了没有父节点的情况，没有父节点时，parentCid为0。

  2. 当拖动节点放置在目标节点内部 (inner)：

    else if (dropPosition === "inner") {
  draggingNode.parentCid = dropNode.data.cid;
}

    如果拖动的节点被放置在目标节点内部，那么它将成为目标节点的子节点。因此，draggingNode 的 parentCid 被设置为 dropNode.data.cid，即目标节点自身的ID。

这段代码确保了在拖拽结束后，树形结构在逻辑上保持一致，parentCid 的更新反映了新的父子关系。这在维护树形数据结构的完整性方面非常重要，特别是在需要同步这些变化到后端数据库的场景下。

二，拖拽后结点的父节点下所有结点的sort排序属性的变化

	  // 2，更新draggingNode及其子节点的sort
      // 2.1如果draggingNode的parentCid没有更新，只需要重排draggingNode的兄弟结点的sort；
      // 2.2如果draggingNode的parentCid有更新，不仅需要重排draggingNode的原来的兄弟结点的sort，还需要重排draggingNode新的兄弟结点的sort
      // 2，更新draggingNode及其子节点的sort
      // 2.1如果draggingNode的parentCid没有更新，只需要重排draggingNode的兄弟结点的sort；
      // 2.2如果draggingNode的parentCid有更新，不仅需要重排draggingNode的原来的兄弟结点的sort，还需要重排draggingNode新的兄弟结点的sort
      var siblingNodesOld = [];
      var siblingNodesNew = [];
      // draggingNode.parent为空，所以要根据parentCid找到其parent。
      // 写一个根据cid从menus中查询结点的函数
      let draggingNodeParentNode = this.getNodeByCid(draggingNode.data.parentCid, this.menus);
      siblingNodesOld = this.getOldSiblingNodes(draggingNodeParentNode, dropNode, dropPosition);

      if (draggingNode.data.parentCid !== draggingNodeNewPId) {
        if (dropPosition === "before" || dropPosition === "after") {
          siblingNodesNew = dropNode.parent.childNodes;
        } else {
          siblingNodesNew = dropNode.childNodes;
        }
      }

      for (var i = 0; i < siblingNodesOld.length; i++) {
        siblingNodesOld[i].sort = i;
        this.nodesInfoAfterDrop.push({catId: siblingNodesOld[i].catId, sort: siblingNodesOld[i].sort});
      }


      for (var i = 0; i < siblingNodesNew.length; i++) {
        siblingNodesNew[i].sort = i;
        this.nodesInfoAfterDrop.push({catId: siblingNodesNew[i].catId, sort: siblingNodesNew[i].sort});
      }

这段代码涉及到了在 el-tree 拖拽操作后更新节点排序（sort 属性）的逻辑，以便反映节点在树结构中的新位置。这里主要关注两个方面：更新拖动节点 draggingNode 及其子节点的排序，以及根据 draggingNode 的父节点是否改变来决定哪些节点的排序需要被更新。

更新排序的逻辑

  1. 确定旧的和新的兄弟节点集合:

    • siblingNodesOld 是拖动前 draggingNode 的兄弟节点集合，即它原本的同级节点。
    • siblingNodesNew 是拖动后 draggingNode 的兄弟节点集合，这取决于拖动的目标位置（放置在目标节点之前、之后还是内部）。

  2. 判断是否需要更新新的兄弟节点集合:

    • 如果 draggingNode 的父节点ID（parentCid）没有改变，意味着拖动只改变了顺序而没有改变层级，此时只需要更新旧的兄弟节点集合的排序。
    • 如果 draggingNode 的父节点ID改变了，意味着节点的层级发生了变化，此时需要更新旧的和新的兄弟节点集合的排序。

  3. 更新兄弟节点的排序:

    • 遍历 siblingNodesOld 和 siblingNodesNew 集合，将每个节点的 sort 属性设置为其在集合中的索引。这是因为索引反映了节点在数组中的位置，可以作为排序的依据。

代码分析

  • 在 siblingNodesNew 的赋值中，对于放置在目标节点之前或之后的情况，代码似乎直接将 dropNode.data.parentCid 赋值给了 siblingNodesNew，但实际上 dropNode.data.parentCid 不应直接作为节点集合，这看起来像是一个错误或代码片段的不完整展示。正确的做法应该是获取 dropNode 的父节点的子节点集合。

  • 对于放置在目标节点内部的情况，代码正确地从 dropNode 的父节点获取了子节点集合。

三，拖拽后结点及其子节点catLevel的变化

// 3，更新draggingNode及其子节点的catLevel
      var catLevelNeedUpdate = true;
      if (draggingNode.data.catLevel === dropNode.data.catLevel && (dropPosition === "before" || dropPosition === "after")) {
        catLevelNeedUpdate = false;
      }

      var draggingNodeAfterDrop = {};
      if (catLevelNeedUpdate) {
        var draggingParentNodeAfterDrop = {};
        if (dropPosition === "before" || dropPosition === "after") {
          draggingParentNodeAfterDrop = dropNode.parent;
        } else {
          draggingParentNodeAfterDrop = dropNode;
        }
        

        draggingParentNodeAfterDrop.childNodes.forEach((child) => {
            if (child.cid === draggingNode.data.cid) {
              draggingNodeAfterDrop = child;
            }
        })

        
        // 递归变量draggingNodeAfterDrop及其childNodes，将其data属性的cateLevel置为level属性值
        this.updateCatLevel(draggingNodeAfterDrop);
      }

updateCatLevel的定义如下：

// 递归更新draggingNode及其子节点的catLevel
updateCatLevel(node) {
  node.catLevel = node.level;
  if (node.childNodes && node.childNodes.length > 0) {
    node.childNodes.forEach((child) => {
      this.updateCatLevel(child);
    });
  }
},

这段代码的主要作用是，在 el-tree 组件的拖拽操作完成后，更新拖动节点 draggingNode 及其所有子节点的 catLevel 属性，以反映新的层级关系。catLevel 通常用于表示节点在树结构中的层级深度，这对于保持树结构的一致性和完整性是非常重要的。

判断是否需要更新 catLevel

首先，代码检查是否需要更新 catLevel：

var catLevelNeedUpdate = true;
if (draggingNode.data.catLevel === dropNode.data.catLevel && (dropPosition === "prev" || dropPosition === "next")) {
  catLevelNeedUpdate = false;
}

如果拖动节点和目标节点的层级相同，并且拖动位置是目标节点的前后，那么 catLevel 不需要更新，因为拖动操作不会改变节点的层级深度。

获取拖动后的新节点

接下来，代码尝试获取拖动操作完成后的拖动节点 draggingNodeAfterDrop，这通常是通过查找父节点的子节点列表来完成的：

var draggingNodeAfterDrop = {};
if (catLevelNeedUpdate) {
  var draggingParentNodeAfterDrop = {};
  if (dropPosition === "prev" || dropPosition === "next") {
    draggingParentNodeAfterDrop = dropNode.parent;
  } else {
    draggingParentNodeAfterDrop = dropNode;
  }
  draggingParentNodeAfterDrop.childNodes.forEach((child) => {
    if (child.cid === draggingNode.data.cid) {
      draggingNodeAfterDrop = child;
    }
  })
}

这里，draggingParentNodeAfterDrop 根据拖动位置确定，然后遍历其子节点找到具有相同 cid 的节点，即拖动后的拖动节点。

更新 catLevel

最后，如果需要更新 catLevel，调用 updateCatLevel 方法来递归更新拖动节点及其所有子节点的 catLevel：

this.updateCatLevel(draggingNodeAfterDrop, dropNode.data.catLevel + deep);

updateCatLevel 方法如下：

updateCatLevel(node) {
  node.catLevel = node.level;
  if (node.childNodes && node.childNodes.length > 0) {
    node.childNodes.forEach((child) => {
      this.updateCatLevel(child);
    });
  }
}

在这个方法中，node.catLevel 被设置为 node.level，后者通常反映了节点的实际层级深度。如果节点有子节点，递归地调用 updateCatLevel 方法来更新所有子节点的 catLevel。

完整代码

<template>
  <div>
    <el-tree
      node-key="catId"
      :data="menus"
      :props="defaultProps"
      :expand-on-click-node="false"
      show-checkbox
      :default-expanded-keys="expandedKeys"
      :allow-drop="allowDrag"
      @node-drop="nodeDrop"
      draggable
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            v-if="node.level <= 2"
            size="mini"
            @click="() => append(data)"
          >
            Append
          </el-button>
          <el-button 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
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="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>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitCategory">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      nodesInfoAfterDrop: [],
      dialogTitle: "", // 编辑窗口标题，新增分类，修改分类
      dialogType: "", // 编辑窗口类型，create表示append，edit表示edit
      dialogFormVisible: false,
      menus: [],
      category: {
        name: "",
        parentCid: 0,
        catLevel: 0,
        sort: 0,
        showStatus: 1,
        icon: "",
        productUnit: "",
        catId: null,
      },
      expandedKeys: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },

  methods: {
    nodeDrop(draggingNode, dropNode, dropPosition) {
      console.log("draggingNode:", draggingNode, dropNode, dropPosition);
      var draggingNodeNewPId = 0;
      // 1，更新draggingNode的parentCid，根据dropPosition的不同值，分为两种情况
      if (dropPosition === "before" || dropPosition === "after") {
        draggingNodeNewPId = dropNode.data.parentCid;
      } else {
        draggingNodeNewPId = dropNode.data.cid;
      }


      // 2，更新draggingNode及其子节点的sort
      // 2.1如果draggingNode的parentCid没有更新，只需要重排draggingNode的兄弟结点的sort；
      // 2.2如果draggingNode的parentCid有更新，不仅需要重排draggingNode的原来的兄弟结点的sort，还需要重排draggingNode新的兄弟结点的sort
      var siblingNodesOld = [];
      var siblingNodesNew = [];
      // draggingNode.parent为空，所以要根据parentCid找到其parent。
      // 写一个根据cid从menus中查询结点的函数
      let draggingNodeParentNode = this.getNodeByCid(draggingNode.data.parentCid, this.menus);
      siblingNodesOld = this.getOldSiblingNodes(draggingNodeParentNode, dropNode, dropPosition);

      if (draggingNode.data.parentCid !== draggingNodeNewPId) {
        if (dropPosition === "before" || dropPosition === "after") {
          siblingNodesNew = dropNode.parent.childNodes;
        } else {
          siblingNodesNew = dropNode.childNodes;
        }
      }

      for (var i = 0; i < siblingNodesOld.length; i++) {
        siblingNodesOld[i].sort = i;
        this.nodesInfoAfterDrop.push({catId: siblingNodesOld[i].catId, sort: siblingNodesOld[i].sort});
      }


      for (var i = 0; i < siblingNodesNew.length; i++) {
        siblingNodesNew[i].sort = i;
        this.nodesInfoAfterDrop.push({catId: siblingNodesNew[i].catId, sort: siblingNodesNew[i].sort});
      }

      console.log("update sort....", siblingNodesNew, siblingNodesOld, dropNode, dropPosition);
      // 3，更新draggingNode及其子节点的catLevel
      var catLevelNeedUpdate = true;
      if (draggingNode.data.catLevel === dropNode.data.catLevel && (dropPosition === "before" || dropPosition === "after")) {
        catLevelNeedUpdate = false;
      }

      var draggingNodeAfterDrop = {};
      if (catLevelNeedUpdate) {
        var draggingParentNodeAfterDrop = {};
        if (dropPosition === "before" || dropPosition === "after") {
          draggingParentNodeAfterDrop = dropNode.parent;
        } else {
          draggingParentNodeAfterDrop = dropNode;
        }
        

        draggingParentNodeAfterDrop.childNodes.forEach((child) => {
            if (child.cid === draggingNode.data.cid) {
              draggingNodeAfterDrop = child;
            }
        })

        
        // 递归变量draggingNodeAfterDrop及其childNodes，将其data属性的cateLevel置为level属性值
        this.updateCatLevel(draggingNodeAfterDrop);
      }

      console.log(this.nodesInfoAfterDrop);

    },

    // 获取draggingNode的parent
    getOldSiblingNodes(parentNode, dropNode, dropPosition) {
      var siblingNodes = [];
      if (!parentNode) {
        if (dropPosition === "before" || dropPosition === "after") {
          siblingNodes = dropNode.parent.childNodes;
        } else {
          siblingNodes = drop.childNodes;
        }
      } else {
        siblingNodes = parentNode.childNodes;
      }

      return siblingNodes;


    },

    // 写一个根据cid从menus中查询结点的函数
    getNodeByCid(cid, nodes) {
      if (cid == 0) {
        return null;
      }
      // 递归查询
      for (var i = 0; i < this.nodes.length; i++) {
        if (this.nodes[i].catId === cid) {
          return this.nodes[i];
        }

        if (this.nodes[i].children && this.nodes[i].children.length > 0) {
          var node = this.getNodeByCid(cid, this.nodes[i].children);
          if (node) {
            return node;
          }
        }
      }
      return null;
    },

    // 递归更新draggingNode及其子节点的catLevel
    updateCatLevel(node) {
      node.catLevel = node.level;
      this.nodesInfoAfterDrop.push({catId: node.catId, catLevel: node.catLevel});
      if (node.childNodes && node.childNodes.length > 0) {
        node.childNodes.forEach((child) => {
          this.updateCatLevel(child);
        });
      }
    },
    allowDrag(draggingNode, dropNode, dropPosition) {
      var deep = this.countDraggingNodeDeep(draggingNode);

      // 根据dropPosition结合dropNode.catLevel来判断draggingNode新位置的位置是否合法
      if (dropPosition === "prev" || dropPosition === "next") {
        return dropNode.data.catLevel + deep - 1 <= 3;
      } else if (dropPosition === "inner") {
        return dropNode.data.catLevel + deep <= 3;
      }
    },

    // 递归计算draggingNode子树的深度
    countDraggingNodeDeep(draggingNode) {
      var deep = 0;
      if (draggingNode.childNodes && draggingNode.childNodes.length > 0) {
        debugger;
        draggingNode.childNodes.forEach((child) => {
          deep = Math.max(deep, this.countDraggingNodeDeep(child));
        });
      }
      return deep + 1;
    },
    append(data) {
      console.log(data);
      this.dialogType = "create";
      this.dialogTitle = "新增分类";
      this.dialogFormVisible = true;
      this.category = {
        name: "",
        parentCid: data.catId,
        catLevel: data.level + 1,
        sort: 0,
        showStatus: 1,
      };
    },
    edit(data) {
      console.log(data);
      this.dialogType = "edit";
      this.dialogTitle = "修改分类";
      this.dialogFormVisible = true;

      // 根据catId查询最新数据
      this.$http({
        url: this.$http.adornUrl(`/product/category/info/${data.catId}`),
        method: "get",
        data: this.$http.adornData({ catId: data.catId }, false),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.category = { ...data.data };
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    submitCategory() {
      if (this.dialogType === "create") {
        this.addCategory();
      } else if (this.dialogType === "edit") {
        this.updateCategory();
      }
    },
    updateCategory() {
      var { catId, name, icon, productUnit } = this.category;
      console.log(this.category);
      this.$http({
        url: this.$http.adornUrl("/product/category/update"),
        method: "post",
        data: this.$http.adornData({ catId, name, icon, productUnit }, false),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "修改成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              console.log("修改成功，关闭消息提示");
              this.dialogFormVisible = false;
              this.getMenus(); // 重新获取数据
              this.expandedKeys = [
                this.category.parentCid == 0
                  ? this.category.catId
                  : this.category.parentCid,
              ]; // 重置展开节点
              console.log(this.expandedKeys);
            },
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    addCategory() {
      this.$http({
        url: this.$http.adornUrl("/product/category/save"),
        method: "post",
        data: this.$http.adornData(this.category, false),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "添加成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              console.log("添加成功，关闭消息提示");
              this.dialogFormVisible = false;
              this.getMenus(); // 重新获取数据
              this.expandedKeys = [this.category.parentCid]; // 重置展开节点
            },
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    remove(node, data) {
      console.log(node, data);
      var ids = [node.data.catId];

      this.$confirm(
        `确定对[id=${ids.join(",")}]进行[${
          ids.length == 1 ? "删除" : "批量删除"
        }]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/product/category/delete"),
            method: "post",
            data: this.$http.adornData(ids, false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  console.log("删除成功，关闭消息提示");
                  this.getMenus(); // 重新获取数据
                  this.expandedKeys = [node.parent.data.catId]; // 重置展开节点
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 获取分类数据
    getMenus() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get",
      }).then(({ data }) => {
        console.log(data);
        this.dataListLoading = false;
        this.menus = data.data;
      });
    },
  },
  created() {
    this.getMenus(); // 获取分类数据
  },
};
</script>
<style scoped>
</style>
小手追梦
关注
  • 18
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
全网最全-谷粒商城项目-面试总结-简历优化
成功最快的秘诀: 抱团取暖 。
09-20 28万+
该系用采用SpringCloud架构，利用SpringBoot构建应用，利用Nacos作为服务的注册、配置中心，利用OpenFeign实现与其他模块进行交互，利用Sentinel实现熔断降级和错误处理，利用Gateway作为服务网关，利用RabbitMQ实现延迟队列，利用Redis作为缓存解决读多写少的场景，利用MySQL进行持久化，利用MyBatisPlus作为持久化框架。
guli-mall:尚硅谷-谷粒商城
04-28
member会员模块会员服务mall-order订单模块订单服务mall-product商品模块商品服务mall-search搜索服务Elasticsearch 操作服务mall-third-party第三方整合服务第三方服务、阿里云OSS等mall-ware库存模块仓储服务...
谷粒商城实战笔记-54-商品服务-API-三级分类-拖拽效果
最新发布
epitomizelu的专栏
07-24 314
这个函数接受三个参数，分别代表正在拖动的节点、可能的放置目标节点以及放置位置。el-tree控件加上允许拖拽的属性draggable，此外还需要根据层级判断是否能拖动，通过给allow-drop绑定事件allowDrag实现这个需求。类型的对象，表示当前正在被拖动的节点。它包含了关于拖动节点的所有信息，如节点的数据、状态等。如果拖动过程中没有特定的放置目标（例如，拖动到树的空白区域），这个参数可能是。，分别表示拖动的节点将放置在目标节点之前、之后或内部。类型的对象，表示潜在的放置目标节点。
谷粒商城实战笔记-45-商品服务-API-三级分类-查询-递归树形结构数据获取
epitomizelu的专栏
07-22 748
从这一节开始，开始接触与到实际工作非常相似的内容，前面学习到的都是基础知识，现在开始学习和积累工作经验。这里要慎重提醒，请逐行敲代码，逐行敲代码，逐行敲代码。在敲代码之前，先理解三级分类。。做不到这点，工作效率一定非常低。本节的主要内容是开发产品模块的的接口。
谷粒商城实战笔记-46-商品服务-API-三级分类-配置网关路由与路径重写
epitomizelu的专栏
07-22 439
要用原生的js和html开发一个树形展示界面是非常有挑战性的，但使用Vue和ElementUI，可以大大加速，在几分钟内完成开发。在左侧菜单栏创建商品系统菜单，这是renren-fast自带的功能，我们在页面上操作即可。点击确定后，刷新页面，可以看到左侧多了一个一级菜单。注意，上级菜单一定要选择上一步创建的“商品系统”。在ElementUI文档中找到树形控件，复制代码。使用我们之前配置vue模板快速插入代码。在商品系统下新增商品分类二级菜单。下新建文件夹product，然后在。，就可以看到三级菜单了。
谷粒商城实战笔记-52~53-商品服务-API-三级分类-新增-修改
epitomizelu的专栏
07-23 347
点击Append，输入一个名为电子书222的分类，点击确定保存，保存成功后，界面刷新如下，说明前端操作成功。这一节实现点击Append按钮，打开弹窗填写内容，点击确定，调用后台接口保存分类信息。确定按钮绑定click事件函数addCategory，代码如下。弹窗使用el-dialog组件，基于参考文档copy代码。showStatus：默认为1，表示未被逻辑删除。catLevel：分类级别，等于父分类级别加1。查询后台数据库，有如下数据，说明后台保存成功。按钮的点击事件中讲这个变量的值置为。
谷粒商城实战笔记-47-商品服务-API-三级分类-网关统一配置跨域
epitomizelu的专栏
07-22 741
上图图描述了非简单请求（如PUT、DELETE等）的跨域过程，具体来说，这是一个典型的CORS（Cross-Origin Resource Sharing）预检请求的过程。如果不同源，浏览器先发送一个轻量级的预检请求，询问服务器是否允许跨域访问，如果允许跨域访问，才会真正的发出请求。原因是同源策略是浏览器的安全策略，在不同源的情况下，服务器端如果允许跨域的话，浏览器仍然可以发出跨域请求。服务器收到预检请求后，检查请求头，如果满足条件（如允许的源、方法、请求头等），则返回一个成功的响应，包含。
谷粒商城day34 -商品服务-API-三级分类-查询-树形展示三级分类数据
JavaCoder_juejue的博客
09-22 430
1.网关中进行路由配置 因为之前写的路由到renrenfast的/api/** 包含了我们配的路径，而路由是从上到下，所以把我们的配置放到之前配置上面, 不然会被/api/**拦截而无法正确路由,配置如下，菜单分类显示功能是在商品服务中 - id: product_route uri: lb://gulimall-product predicates: - Path=/api/product/** filte...
谷粒商城实战笔记-48~49-商品服务-API-三级分类-查询-树形展示三级分类数据-前端优化
epitomizelu的专栏
07-23 230
本节的主要内容是前后端联调，解决网关到商品服务的路由配置、前端的树形展示。
谷粒商城day40 -商品服务-API-三级分类-删除-批量删除
JavaCoder_juejue的博客
10-13 229
思路：选中想要删除的菜单，点击批量删除按钮，提示是否删除，获取选中菜单的ID封装到数组，调用后台批量删除方法 1.添加按钮 2.添加引用 3.添加方法 使用getCheckNodes获取选中项 batchDelete() { this.$confirm("是否确认批量删除?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning"
谷粒商城第十二天-基本属性&销售属性管理功能的实现（api）
08-11
通过这些API，开发者可以方便地管理谷粒商城中的商品属性，从而提供更丰富、更精准的商品展示，提升用户体验，同时也有助于后台进行高效的数据管理和库存控制。在实际开发中，还需结合前端界面和数据库设计，确保...
谷粒商城-电商项目--gulimall.zip
11-01
谷粒商城-电商项目--gulimall
最新谷粒商城2020高级-文档和部分前端代码
10-13
谷粒商城-2020-Spring Cloud 高级篇完结 1、使用Spring Cloud (Alibaba) H版技术栈支持的微服务架构商城项目、 2、所有三方组件都使用 linux/docker 容器技术提供环境支持 3、只发布后端代码、使用swagger2提供...
谷粒商城第二天-项目环境搭建
06-15
在构建像“谷粒商城”这样的电子商务平台时，项目环境的搭建是开发过程中的第一步，也是至关重要的一步。本文将详细讲解如何进行“谷粒商城第二天-项目环境搭建”，主要涉及的技术点包括模块化管理、源代码组织结构...
OpenGL笔记十四之GLM数学库的配置与使用
小勇博客
07-20 365
— 2024-07-20 中午。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 948
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
【Blockly图形化积木编程二次开发学习笔记】5.自动保存与恢复
乙酸氧铍的博客
07-21 173
/ 用户离开页面时自动将块备份到本地存储中。关闭后再次打开，工作区仍存在。// 从本地存储中恢复块。
linux学习笔记整理: 关于linux:Shell脚本 2024/7/20；
gzx233的博客
07-20 877
Shell脚本的使用
从前慢-谷粒商城篇章6
08-17
根据引用中提供的信息，谷粒商城是一个B2C模式的电商平台，主要销售自营商品给客户。B2C模式指的是商对客的模式，即商家直接向消费者销售商品和服务。谷粒商城使用微服务架构，这是一种将应用程序拆分成独立且可独立开发、部署和扩展的小型服务的架构。引用还提到谷粒商城的技术涵盖微服务架构、分布式、全栈、集群、部署和自动化运维等方面。 因此，从前慢-谷粒商城篇章6主要讨论的可能是谷粒商城的技术方面，包括微服务架构、分布式、全栈、集群、部署和自动化运维等内容。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [从前慢-谷粒商城篇章1](https://blog.csdn.net/m0_67391121/article/details/125383572)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [2020年谷粒商城md笔记](https://download.csdn.net/download/ZHUXIUQINGIT/12543161)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小手追梦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值