谷粒商城微服务分布式基础篇七——三级分类删除、新增、修改

最新推荐文章于 2024-04-24 18:42:31 发布
最新推荐文章于 2024-04-24 18:42:31 发布
阅读量535 收藏
点赞数
分类专栏： Gulimall
原文链接：https://blog.csdn.net/D_A_I_H_A_O/article/details/105645187
版权

文章目录

商城三级分类删除

前端代码

  <!-- data；树数据 在vue data初始化指定  -->
  <!--default-expanded-keys；默认展开的节点的 key 的数组  -->
  <!--  v-if="node.childNodes.length==0"  ；只有三级分类才能删除  -->
  <el-tree
    :data="menus"
    :props="defaultProps"
    show-checkbox
    node-key="catId"
    :default-expanded-keys="expandedKey"
    :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)">添加</el-button>
        <el-button
          type="text"
          size="mini"
          v-if="node.childNodes.length==0"  
          @click="() => remove(node, data)"
        >删除</el-button>
      </span>
    </span>
  </el-tree>

   
   

   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  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];
          });
        })
        .catch(() => {});
    }

   
   

   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

后端代码

使用Mybatis-Plus 逻辑删除
SpringBoot 配置方式：

application.yml 加入配置(如果你的默认值和mp默认的一样,该配置可无):

mybatis-plus:
  global-config:
    db-config:
      logic-delete-field: flag  #全局逻辑删除字段值 3.3.0开始支持，详情看下面。
      logic-delete-value: 1 # 逻辑已删除值(默认为 1)
      logic-not-delete-value: 0 # 逻辑未删除值(默认为 0)

   
   

   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

注册 Bean(3.1.1开始不再需要这一步)：

import com.baomidou.mybatisplus.core.injector.ISqlInjector;
import com.baomidou.mybatisplus.extension.injector.LogicSqlInjector;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class MyBatisPlusConfiguration {

@Bean
<span class="token keyword">public</span> ISqlInjector <span class="token function">sqlInjector</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">LogicSqlInjector</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

实体类字段上加上@TableLogic注解

/**
 * 是否显示[0-不显示，1显示]
 */
@TableLogic(value = "1",delval = "0")
private Integer showStatus;

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5

TableLogic 接口

/**
     * 默认逻辑未删除值（该值可无、会自动获取全局配置）
     */
    String value() default "";

<span class="token comment">/**
 * 默认逻辑删除值（该值可无、会自动获取全局配置）
 */</span>
String <span class="token function">delval</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">default</span> <span class="token string">""</span><span class="token punctuation">;</span>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

CategoryServiceImpl实现类

    /**
     * 删除菜单
     *
     * @param asList
     */
    @Override
    public void removeMenusByIds(List<Long> asList) {

    <span class="token comment">//TODO 检查当前要删除菜单是否被别的地方引用</span>
    baseMapper<span class="token punctuation">.</span><span class="token function">deleteBatchIds</span><span class="token punctuation">(</span>asList<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

商城三级分类新增

前端代码

<template>
  <div>
    <!-- data；树数据 在vue data初始化指定  -->
    <!--default-expanded-keys；默认展开的节点的 key 的数组  -->
    <!--  v-if="node.childNodes.length==0"  ；只有三级分类才能删除  -->
    <!--  v-if="node.level <=2"  ；只有一级和二级分类可以添加-->
    <el-tree
      :data="menus"
      :props="defaultProps"
      show-checkbox
      node-key="catId"
      :default-expanded-keys="expandedKey"
      :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" v-if="node.level <=2" @click="() => append(data)">添加</el-button>
          <el-button
            type="text"
            size="mini"
            v-if="node.childNodes.length==0"
            @click="() => remove(node, data)"
          >删除</el-button>
        </span>
      </span>
    </el-tree>

<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 添加修改窗口 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>el<span class="token operator">-</span>dialog
  <span class="token punctuation">:</span>title<span class="token operator">=</span><span class="token string">"title"</span>
  <span class="token punctuation">:</span>visible<span class="token punctuation">.</span>sync<span class="token operator">=</span><span class="token string">"dialogVisible"</span>
  width<span class="token operator">=</span><span class="token string">"30%"</span>
  <span class="token punctuation">:</span>close<span class="token operator">-</span>on<span class="token operator">-</span>click<span class="token operator">-</span>modal<span class="token operator">=</span><span class="token string">"false"</span>
<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>el<span class="token operator">-</span>form <span class="token punctuation">:</span>model<span class="token operator">=</span><span class="token string">"category"</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>el<span class="token operator">-</span>form<span class="token operator">-</span>item label<span class="token operator">=</span><span class="token string">"分类名称"</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>el<span class="token operator">-</span>input v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"category.name"</span> autocomplete<span class="token operator">=</span><span class="token string">"off"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>input<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>form<span class="token operator">-</span>item<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>el<span class="token operator">-</span>form<span class="token operator">-</span>item label<span class="token operator">=</span><span class="token string">"图标"</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>el<span class="token operator">-</span>input v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"category.icon"</span> autocomplete<span class="token operator">=</span><span class="token string">"off"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>input<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>form<span class="token operator">-</span>item<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>el<span class="token operator">-</span>form<span class="token operator">-</span>item label<span class="token operator">=</span><span class="token string">"计量单位"</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>el<span class="token operator">-</span>input v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"category.productUnit"</span> autocomplete<span class="token operator">=</span><span class="token string">"off"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>input<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>form<span class="token operator">-</span>item<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>form<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>span slot<span class="token operator">=</span><span class="token string">"footer"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"dialog-footer"</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>el<span class="token operator">-</span>button @click<span class="token operator">=</span><span class="token string">"dialogVisible = false"</span><span class="token operator">&gt;</span>取 消<span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>button<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>el<span class="token operator">-</span>button type<span class="token operator">=</span><span class="token string">"primary"</span> @click<span class="token operator">=</span><span class="token string">"submitData"</span><span class="token operator">&gt;</span>确 定<span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>button<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>dialog<span class="token operator">&gt;</span>

</div>

</template>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54

data

  data() {
    return {
      //树形数据
      menus: [],
      //默认树形
      defaultProps: {
        children: "children",
        label: "name"
      },
      //默认展开数组
      expandedKey: [],
      //菜单对象
      category: {
        name: "",
        parentCid: 0,
        catLevel: 0,
        showStatus: 1,
        sort: 0,
        productUnit: "",
        icon: "",
        catId: null
      },
      //动态窗口 默认关闭
      dialogVisible: false,
      //提交方式 edit,add
      dialogType: "",
      //动态窗口标题
      title: ""
    };
  },

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

method

 append(data) {
      console.log("append", data);
      this.dialogType = "add";
      this.title = "添加分类";
      this.dialogVisible = true;
      this.category.parentCid = data.catId;
      this.category.catLevel = data.catLevel * 1 + 1;
      this.category.catId = null;
      this.category.name = "";
      this.category.icon = "";
      this.category.productUnit = "";
      this.category.sort = 0;
      this.category.showStatus = 1;
    },

<span class="token comment">//添加三级分类</span>
<span class="token function">addCategory</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"提交的三级分类数据"</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>category<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$http</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    url<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">adornUrl</span><span class="token punctuation">(</span><span class="token string">"/product/category/save"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    method<span class="token punctuation">:</span> <span class="token string">"post"</span><span class="token punctuation">,</span>
    data<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">adornData</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>category<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">{</span> data <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$message</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      message<span class="token punctuation">:</span> <span class="token string">"菜单保存成功"</span><span class="token punctuation">,</span>
      type<span class="token punctuation">:</span> <span class="token string">"success"</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">//关闭对话框</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>dialogVisible <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
    <span class="token comment">//刷新出新的菜单</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getMenus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">//设置需要默认展开的菜单</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>expandedKey <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>category<span class="token punctuation">.</span>parentCid<span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">//提交数据</span>
<span class="token function">submitData</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>dialogType <span class="token operator">==</span> <span class="token string">"add"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">addCategory</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>dialogType <span class="token operator">==</span> <span class="token string">"edit"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">editCategory</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44

后端代码

    /**
     * 保存
     */
    @RequestMapping("/save")
    public R save(@RequestBody CategoryEntity category) {
        categoryService.save(category);

    <span class="token keyword">return</span> R<span class="token punctuation">.</span><span class="token function">ok</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

这里插入时mysql乱码，排除数据库编码无问题，mysql连接配置问题，需在配置文件数据源配置中添加？serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=UTF-8
例如：

url: jdbc:mysql://localhost/数据库名?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=UTF-8

 
 

 
 
  • 1

商城三级分类修改

前端代码

修改按钮

   <el-button type="text" size="mini" @click="edit(data)">修改</el-button>

 
 

 
 
  • 1

动态窗口还是新增的动态窗口，但需要回显。当点击修改按钮，打开弹窗，同时发送请求回显数据

method

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 }) => {
        //请求成功 回显
        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;
        this.category.catLevel = data.data.catLevel;
        this.category.sort = data.data.sort;
        this.category.showStatus = data.data.showStatus;
      });
    },

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

修改，点击确认，判断dialogType

  //确认 提交数据
    submitData() {
      if (this.dialogType == "add") {
        this.addCategory();
      }
      if (this.dialogType == "edit") {
        this.editCategory();
      }
    }

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

修改

  //修改三级分类数据
    editCategory() {
      var { catId, name, icon, productUnit } = this.category;
      this.$http({
        url: this.$http.adornUrl("/product/category/update"),
        method: "post",
        data: this.$http.adornData({ catId, name, icon, productUnit }, false)
      }).then(({ data }) => {
        this.$message({
          message: "菜单修改成功",
          type: "success"
        });
        //关闭对话框
        this.dialogVisible = false;
        //刷新出新的菜单
        this.getMenus();
        //设置需要默认展开的菜单
        this.expandedKey = [this.category.parentCid];
      });
    },

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

后端代码

    /**
     * 信息
     */
    @RequestMapping("/info/{catId}")
    public R info(@PathVariable("catId") Long catId) {
        CategoryEntity category = categoryService.getById(catId);

    <span class="token keyword">return</span> R<span class="token punctuation">.</span><span class="token function">ok</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">"data"</span><span class="token punctuation">,</span> category<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

/**
* 修改
*/
@RequestMapping("/update")
public R update(@RequestBody CategoryEntity category) {
categoryService.updateById(category);

    <span class="token keyword">return</span> R<span class="token punctuation">.</span><span class="token function">ok</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

商城三级分类拖拽修改

前端代码

树形结构添加 draggable 属性和添加选择是否拖拽功能和node-drop 拖拽成功完成时触发的事件

 <el-switch v-model="draggable" active-text="开启拖拽" inactive-text="关闭拖拽"></el-switch>
     <el-tree
      :data="menus"
      :props="defaultProps"
      show-checkbox
      node-key="catId"
      :default-expanded-keys="expandedKey"
      :expand-on-click-node="false"
      :draggable="draggable"
      :allow-drop="allowDrop"
      @node-drop="handleDrop"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button type="text" size="mini" v-if="node.level <=2" @click="() => append(data)">添加</el-button>
          <el-button type="text" size="mini" @click="edit(data)">修改</el-button>
          <el-button
            type="text"
            size="mini"
            v-if="node.childNodes.length==0"
            @click="() => remove(node, data)"
          >删除</el-button>
        </span>
      </span>
    </el-tree>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

data添加

	  //拖拽节点功能
      draggable: false,
      //初始化节点层级深度
      maxLevel: 0,
      //当前节点的夫节点
      pCid: [],
      //拖拽要修改的节点
      updateNodes: []

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

method

    //拖拽节点判断目标节点能否被放置
    //draggingNode：当前节点,dropNode；目标节点
    //type：三种情况，“prev”目标节点前，”inner“插入至目标节点，”next“放置在目标节点后
    allowDrop(draggingNode, dropNode, type) {
      //1、被拖动的当前节点以及所在的父节点总层数不能大于3
      //1）、被拖动的当前节点总层数
      console.log("allowDrop:", draggingNode, dropNode, type);
      //计算当前节点所在层级深度
      this.countNodeLevel(draggingNode);
      //当前正在拖动的节点+父节点所在的深度不大于3即可
      let deep = Math.abs(this.maxLevel - draggingNode.level) + 1;
      console.log("深度：", deep);

  <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">==</span> <span class="token string">"inner"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> deep <span class="token operator">+</span> dropNode<span class="token punctuation">.</span>level <span class="token operator">&lt;=</span> <span class="token number">3</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> deep <span class="token operator">+</span> dropNode<span class="token punctuation">.</span>parent<span class="token punctuation">.</span>level <span class="token operator">&lt;=</span> <span class="token number">3</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">//计算当前节点所在层级深度</span>
<span class="token function">countNodeLevel</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">//找到所有子节点，求出最大深度</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">.</span>childNodes <span class="token operator">!=</span> <span class="token keyword">null</span> <span class="token operator">&amp;&amp;</span> node<span class="token punctuation">.</span>childNodes<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> node<span class="token punctuation">.</span>childNodes<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">.</span>childNodes<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>level <span class="token operator">&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>maxLevel<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">//当前节点层级深度等于子节点数据库中层级</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>maxLevel <span class="token operator">=</span> node<span class="token punctuation">.</span>childNodes<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>level<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token comment">//递归</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">countNodeLevel</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>childNodes<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">//node-drop	拖拽成功完成时触发的事件</span>
<span class="token comment">//共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event事件</span>
<span class="token function">handleDrop</span><span class="token punctuation">(</span>draggingNode<span class="token punctuation">,</span> dropNode<span class="token punctuation">,</span> dropType<span class="token punctuation">,</span> ev<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"handleDrop: "</span><span class="token punctuation">,</span> draggingNode<span class="token punctuation">,</span> dropNode<span class="token punctuation">,</span> dropType<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">//1、当前节点最新的父节点id</span>
  <span class="token keyword">let</span> pCid <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token comment">//子节点</span>
  <span class="token keyword">let</span> siblings <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>dropType <span class="token operator">==</span> <span class="token string">"before"</span> <span class="token operator">||</span> dropType <span class="token operator">==</span> <span class="token string">"after"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    pCid <span class="token operator">=</span>
      dropNode<span class="token punctuation">.</span>parent<span class="token punctuation">.</span>data<span class="token punctuation">.</span>catId <span class="token operator">==</span> undefined
        <span class="token operator">?</span> <span class="token number">0</span>
        <span class="token punctuation">:</span> dropNode<span class="token punctuation">.</span>parent<span class="token punctuation">.</span>data<span class="token punctuation">.</span>catId<span class="token punctuation">;</span>
    siblings <span class="token operator">=</span> dropNode<span class="token punctuation">.</span>parent<span class="token punctuation">.</span>childNodes<span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    pCid <span class="token operator">=</span> dropNode<span class="token punctuation">.</span>data<span class="token punctuation">.</span>catId<span class="token punctuation">;</span>
    siblings <span class="token operator">=</span> dropNode<span class="token punctuation">.</span>childNodes<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token comment">//push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>pCid<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>pCid<span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">//2、当前拖拽节点的最新顺序，</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> siblings<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>siblings<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>catId <span class="token operator">==</span> draggingNode<span class="token punctuation">.</span>data<span class="token punctuation">.</span>catId<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">//如果遍历的是当前正在拖拽的节点</span>
      <span class="token keyword">let</span> catLevel <span class="token operator">=</span> draggingNode<span class="token punctuation">.</span>level<span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>siblings<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>level <span class="token operator">!=</span> draggingNode<span class="token punctuation">.</span>level<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">//当前节点的层级发生变化</span>
        catLevel <span class="token operator">=</span> siblings<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>level<span class="token punctuation">;</span>
        <span class="token comment">//修改他子节点的层级</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">updateChildNodeLevel</span><span class="token punctuation">(</span>siblings<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>updateNodes<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        catId<span class="token punctuation">:</span> siblings<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>catId<span class="token punctuation">,</span>
        sort<span class="token punctuation">:</span> i<span class="token punctuation">,</span>
        parentCid<span class="token punctuation">:</span> pCid<span class="token punctuation">,</span>
        catLevel<span class="token punctuation">:</span> catLevel
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>updateNodes<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> catId<span class="token punctuation">:</span> siblings<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>catId<span class="token punctuation">,</span> sort<span class="token punctuation">:</span> i <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token comment">//3、当前拖拽节点的最新层级</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"updateNodes"</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>updateNodes<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">//修改数据</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$http</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    url<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">adornUrl</span><span class="token punctuation">(</span><span class="token string">"/product/category/update/sort"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    method<span class="token punctuation">:</span> <span class="token string">"post"</span><span class="token punctuation">,</span>
    data<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">adornData</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>updateNodes<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">{</span> data <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$message</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      message<span class="token punctuation">:</span> <span class="token string">"菜单顺序修改成功"</span><span class="token punctuation">,</span>
      type<span class="token punctuation">:</span> <span class="token string">"success"</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">//刷新出新的菜单</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getMenus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">//设置需要默认展开的菜单</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>expandedKey <span class="token operator">=</span> <span class="token punctuation">[</span>pCid<span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token comment">//修改完顺序应清空数据 层级和修改数据</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>maxLevel <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span>
    <span class="token comment">//拖拽要修改的节点</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>updateNodes <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">updateChildNodeLevel</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">.</span>childNodes<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> node<span class="token punctuation">.</span>childNodes<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">var</span> cNode <span class="token operator">=</span> node<span class="token punctuation">.</span>childNodes<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>data<span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>updateNodes<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        catId<span class="token punctuation">:</span> cNode<span class="token punctuation">.</span>catId<span class="token punctuation">,</span>
        catLevel<span class="token punctuation">:</span> node<span class="token punctuation">.</span>childNodes<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>level
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">updateChildNodeLevel</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>childNodes<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109

后端代码

  /**
     * 批量修改
     */
    @RequestMapping("/update/sort")
    public R updateSort(@RequestBody CategoryEntity[] category) {
        categoryService.updateBatchById(Arrays.asList(category));
        return R.ok();
    }

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

商城三级分类批量保存

前端代码

 <el-button v-if="draggable" @click="batchSave">批量保存</el-button>

 
 

 
 
  • 1

method
将开始拖拽成功修改请求删除，只有当点击保存按钮才进行修改请求

 //批量保存
    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.maxLevel = 0;
        // this.pCid = 0;
      });
    }

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

后端代码

  /**
     * 批量修改
     */
    @RequestMapping("/update/sort")
    public R updateSort(@RequestBody CategoryEntity[] category) {
        categoryService.updateBatchById(Arrays.asList(category));
        return R.ok();
    }

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

商城三级分类批量删除

前端代码

删除按钮

 <el-button type="danger" @click="batchDelete">批量删除</el-button>

 
 

 
 
  • 1

数组件添加唯一标识 ref

   <el-tree
      :data="menus"
      :props="defaultProps"
      show-checkbox
      node-key="catId"
      :default-expanded-keys="expandedKey"
      :expand-on-click-node="false"
      :draggable="draggable"
      :allow-drop="allowDrop"
      @node-drop="handleDrop"
      ref="menuTree"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button type="text" size="mini" v-if="node.level <=2" @click="() => append(data)">添加</el-button>
          <el-button type="text" size="mini" @click="edit(data)">修改</el-button>
          <el-button
            type="text"
            size="mini"
            v-if="node.childNodes.length==0"
            @click="() => remove(node, data)"
          >删除</el-button>
        </span>
      </span>
    </el-tree>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

method

    batchDelete() {
      let catIds = [];
      let names = [];
      //getCheckedNodes()返回目前被选中的节点所组成的数组
      let checkedNodes = this.$refs.menuTree.getCheckedNodes();
      console.log("被选中的元素", checkedNodes);
      for (let i = 0; i < checkedNodes.length; i++) {
        catIds.push(checkedNodes[i].catId);
        names.push(checkedNodes[i].name);
      }
      this.$confirm(`是否批量删除【${names}】菜单?`, "提示", {
        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(() => {});
    }

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

后端代码

    /**
     * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] catIds) {

    categoryService<span class="token punctuation">.</span><span class="token function">removeMenusByIds</span><span class="token punctuation">(</span>Arrays<span class="token punctuation">.</span><span class="token function">asList</span><span class="token punctuation">(</span>catIds<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token constant">R</span><span class="token punctuation">.</span><span class="token function">ok</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
                                </div>
            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-60ecaf1f42.css" rel="stylesheet">
                            </div>
hi163hello
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
谷粒商城三级分类实现
亚索@哈塞给
04-21 357
数据库表设计 pms_category
谷粒商城 微服务分布式 电商项目 2020 完整代码
09-01
【谷粒商城】是一个以微服务架构为基础的分布式电商系统，该项目在2020年进行了全面更新，提供了完整的源代码，旨在帮助开发者理解和实践微服务在实际业务场景中的应用。下面将详细介绍该项目中涉及的主要知识点。 ...
谷粒商城day38 -商品服务-API-三级分类-新增-新增效果完成
JavaCoder_juejue的博客
10-10 172
1.添加对话框 2.添加方法数据对象 3.添加方法 append(node, data) { this.dialogVisible = true; this.category.parentCid = data.catId; this.category.catLevel = data.catLevel + 1; }, saveCategory() { this.$http({ url: this.$http..
【VUE】Vue中实现树状表格结构编辑与版本对比的详细技术实现
最新发布
九日的博客
04-24 1107
在data函数中定义的tableData数组，包含了表格数据和结构信息。此外，我们会备份原始数据以供版本对比之用。data() {return {},// 模拟加载物料信息},methods: {...item,level,parent,}));},// 示例方法：模拟加载物料信息this.materials = [{ materialsTypeId: 1, materialsTypeName: '物料1' }];
谷粒商城之商品服务-三级分类(新增与修改)
weixin_56674682的博客
12-10 989
三级类目新增效果完成 需求：点击append按键弹出一个对话框 visible.sync：双向绑定，如果为true则显示对话框否则不显示 思路：当我们调用append方法时，就要将visible.sync修改为true，并且为category对象属性赋值，当我们点击确定按钮时就要调用新增函数请求调用后台处理 出现问题： 新增成功但是有些字段没有值 控制台打印category对象，发现有值 问题原因：发现自动绑定过程失败，前端发送的category对象属性...
谷粒商城-基础篇-商品服务1-三级分类（P45-P58）
ljn1046016768的博客
04-21 2146
谷粒商城-基础篇 商品服务-API 三级分类
谷粒商城笔记+踩坑（3）——商品服务-三级分类、网关跨域
vincewm的博客
09-26 9361
商品服务-三级分类增删改查、跨域问题、逻辑删除
2-分布式高级篇 _SpringCloud系统_spring_谷粒商城_分布式_分布式高级篇_
10-03
开发整个商城系统，掌握微服务的全套方案。使用SpringBoot+SpringCloud并配套SpringCloud Alibaba系列，引入全套微服务治理方案：Nacos注册中心/配置中心、Sentinel流量保护系统、Seata分布式事务&RabbitMQ柔性...
谷粒商城电商项目 （ 大型分布式基础+高级、高可用集群部署）（全栈开发篇）
05-22
《谷粒商城电商项目：大型分布式基础与高可用集群部署》 在当今互联网时代，电商平台的构建已经成为企业不可或缺的一部分。谷粒商城电商项目以其大型分布式基础和高可用集群部署为特色，展现了现代电商系统的先进性...
2020谷粒商城分布式基础篇课件资料.rar
11-18
谷粒商城分为三个部分：分布式基础、分布式高级、高可用集群部署 分布式基础篇：使用SpringBoot+Vue+逆向工程搭建全套后台管理系统，使用前后分离方式，以商品系统为例，手把手教大家进行全栈开发。 分布式高级篇...
《谷粒商城2020》高级篇完整代码包括java代码和html
11-30
20210827更新删除了无用的会引起误会的文件夹，基础篇和高级篇分开为两个压缩包，增加了基础篇资料和高级篇资料，以及需要的相关软件，sql文件（在基础篇资料源码中）包含初级篇和高级篇完整代码，纯手工打造，都已...
后台添加三级产品菜单分类添加
01-18
asp+access自动化网站源码，后台自带三级产品分类的添加、删除、修改！
谷粒商城day34 -商品服务-API-三级分类-查询-树形展示三级分类数据
JavaCoder_juejue的博客
09-22 429
1.网关中进行路由配置 因为之前写的路由到renrenfast的/api/** 包含了我们配的路径，而路由是从上到下，所以把我们的配置放到之前配置上面, 不然会被/api/**拦截而无法正确路由,配置如下，菜单分类显示功能是在商品服务中 - id: product_route uri: lb://gulimall-product predicates: - Path=/api/product/** filte...
谷粒商城项目实战——02商品服务之三级分类管理
bingque6535的博客
05-02 621
一. 三级分类 1. 分类树形显示 1. 后端代码 1. Enerty层 在实体类CategoryEntity中添加一个children字段, 用于表示子分类 // @TableField(exist = false) 注解表示该属性不是数据库中的字段 @TableField(exist = false) private List<CategoryEntity> children; 2. Controller层 查询所有分类及其子分类, 并以树形结构组装起来 @RequestMap
【谷粒商城基础篇】商品服务开发：基础概念、三级分类
知识输出、记录学习
01-03 883
商品服务开发：基础概念、三级分类
谷粒商城day37 -商品服务-API-三级分类- 分类删除细化
JavaCoder_juejue的博客
09-30 160
上一节简单实现了商品分类的逻辑删除,这一节，进行细节完善，内容包括如下 1.删除提示框 2.删除后刷新分类列表 3.删除后展示当前层级分类列表，以让直观看到分类被删除 1.按钮绑定删除方法 2.删除方法具体如下 remove(node, data) { var ids = [data.catId]; this.$confirm("是否确认删除?", "提示", { confirmButtonText: "确定", can..
谷粒商城46 - 前端-商品服务-API-三级分类-基本修改效果完成
Java持续实践
08-08 393
文章目录需求新增修改的案例对弹框进行修改测试完整代码 需求 树形结构上新增update 链接, 点击后, 弹窗回显分类信息 , 输入相关信息, 点击确定进行修改, 页面显示修改的数据. 新增修改的案例 新增update修改的按钮, 用update方法接收数据 update方法中, 获取点击的修改的分类信息, 并且打开 分类修改的弹窗. 向后端发送请求, 获取数据. 进行回显. 对弹框进行修改 弹框的表单新增图标和计量单位 输入框. 用category.icon 和 category.produc
52、商品服务-API-三级分类-新增-新增效果完成
pyd1040201698的博客
08-10 222
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%"> <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> ...
2020谷粒商城 分布式基础&环境搭建 word
08-14
谷粒商城是一个以分布式基础架构为核心的电商平台。分布式基础是指将系统的不同部分分散在不同的计算机或服务器上进行处理和管理，以提高系统的负载能力、可靠性和可扩展性。 2020谷粒商城采用分布式基础的好处在于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值