day4 谷粒商城

最新推荐文章于 2024-04-17 16:21:59 发布

学习吧黑黑

最新推荐文章于 2024-04-17 16:21:59 发布

阅读量376

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_43960586/article/details/126211527

版权

该博客详细介绍了如何在谷粒商城项目中利用Vue实现前端功能。通过插槽机制添加和删除按钮，实现了在el-tree组件中根据节点层级动态展示操作按钮。此外，还涉及到逻辑删除的配置，包括在application.yml中添加逻辑删除字段，并调整控制器的删除请求。同时，博主展示了如何实现拖拽节点的功能，以及如何进行批量删除和添加三级分类的操作。整个过程结合了Mybatis-Plus的逻辑删除机制和Vue的事件处理。

摘要由CSDN通过智能技术生成

- id: product_route
          uri: lb://gulimall-product
          predicates:
           - Path=/api/product/**
          filters:
            - RewritePath=/api/(?<segment>.*),/$\{segment}

http://localhost:88/api/product/category/list/tree 重写成http://localhost:10000/product/category/list/tree

  /**
     * 查询所有商品类型，并以树形的方式显示列表
     */
    @RequestMapping("/list/tree")
    public R list(){
       List<CategoryEntity> entityList  = categoryService.listWithTree();
        return R.ok().put("entityList", entityList);
    }

在后端设置的数据为可以为entityList

显示成果

使用插槽机制完成添加和删除按钮，

添加到el-tree, :expand-on-click-node="false"内部让点击按钮时，节点不展开

<span class="custom-tree-node" slot-scope="{ node, data }"> //以对象的方式传递数据，
        <span>{
  { node.label }}</span> //node代表当前节点，node.label 获取标签的名字，
        <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>

只有菜单没有子菜单时显示delete按钮，只有一级和二级菜单才显示append按钮，使用v-if判断

@RequestBody获取请求体，必须时发送post请求，SpringMVC自动将请求体的数据（JSON），转为对应的对象

alt+enter从controller中添加方法到service类中。

逻辑删除--application.yml中添加

详细步骤参考mybatis-plus的逻辑删除，字段show_status负责显示【1】和不显示【0】

mybatis-plus:
  global-config:
    db-config:
      logic-delete-field: flag # 全局逻辑删除的实体字段名(since 3.3.0,配置后可以忽略不配置步骤2)
      logic-delete-value: 1 # 逻辑已删除值(默认为 1)
      logic-not-delete-value: 0 # 逻辑未删除值(默认为 0)

CategoryEntity实体类中添加

	/**
	 * 是否显示[0-不显示，1显示]
	 */
	@TableLogic(value ="1",delval = "0") //和字段的值相反1--显示1--不删除0
	private Integer showStatus;

修改controller的删除请求

    /**
     * 删除
     */
    @RequestMapping("/delete")
    //@RequiresPermissions("product:category:delete")
    public R delete(@RequestBody Long[] catIds){
		//categoryService.removeByIds(Arrays.asList(catIds));
       //批量删除
       categoryService.removeMenuByIds(Arrays.asList(catIds));
        return R.ok();
    }