谷粒商城第六天-商品服务之分类管理下的获取三级分类树形列表

这篇具有很好参考价值的文章主要介绍了谷粒商城第六天-商品服务之分类管理下的获取三级分类树形列表。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、总述

1.1 前端思路

1.2 后端思路

二、前端部分

2.1 在网页中建好目录及菜单

2.1.1 建好商品目录

2.1.2 建好分类管理菜单

​编辑

2.2 编写组件

2.2.1 先完成组件文件的创建

2.2.2 编写组件

2.2.2.1 显示三级分类树形列表

三、后端部分

3.1 编写商品分类的相关接口

3.1.1 获取树形三级分类列表

四、总结


一、总述

就是在前端编写好相应的组件,展示内容,绑定好相关的事件,然后向后端发送请求,在后端编写好想要的接口,执行操作或者是返回前端想要的数据。

具体细节:

1.1 前端思路

前端组件的编写就参考elementUI进行编写,只需稍作修改即可。

前端组件的写法按照那三部分即可,模板、脚本、样式

发的请求依靠请求对象,在api文件夹中写好相应的api对象向后端发好请求,然后在组件中进行引入,发送请求即可

1.2 后端思路

基本上直接使用若依提供好的逆向代码,只需稍作修改即可。

编写好各层代码。

二、前端部分

2.1 在网页中建好目录及菜单

这个比较简单在页面中找到菜单管理新建一个目录即可,首先还不是着急创建菜单,而是创建好目录,一个目录即代表一个一个大的类别,其实也就是对应着后端的一个微服务。比如说商品服务,优惠卷服务啥的,为什么说是一个大的类别,因为商品中就有类别管理,品牌管理啥的,一些细的管理,这就作为前端的一个菜单出现了,而菜单其实就对应后端的一个控制器。一个菜单里面实际上就是对一张表或者是多张表做增删改查的。

说了总体的,其实就是新建一个目录代表商品服务。建的步骤如下:

2.1.1 建好商品目录

谷粒商城第六天-商品服务之分类管理下的获取三级分类树形列表,谷粒商城,SpringBoot,vue,vue.js,spring boot,项目

不会写的,就参考之前已经存在了的目录,就比如这个路由地址,有点模糊,就参考之前的,比如是之前的系统工具这个目录的路由地址写的就是tool,可以知道其实也就是目录的英文简写,那这个就叫product就行了,其他按钮部分基本上默认就行了。 

2.1.2 建好分类管理菜单

同样也是参考之前写好的,创建好分类管理菜单

谷粒商城第六天-商品服务之分类管理下的获取三级分类树形列表,谷粒商城,SpringBoot,vue,vue.js,spring boot,项目

到目前为止页面的基本框架就有了,但是这个分类菜单缺少实际的内容。接下来就是到前端项目里面按照刚刚的路径创建好组件,并进行编写 1.2 在前端项目中编写前端组件

2.2 编写组件

2.2.1 先完成组件文件的创建

谷粒商城第六天-商品服务之分类管理下的获取三级分类树形列表,谷粒商城,SpringBoot,vue,vue.js,spring boot,项目

2.2.2 编写组件

2.2.2.1 显示三级分类树形列表

这里直接使用elementUI的树形组件

在elementUI官网中到组件中找到树形控件,在data一栏中可以找到

谷粒商城第六天-商品服务之分类管理下的获取三级分类树形列表,谷粒商城,SpringBoot,vue,vue.js,spring boot,项目

这里因为不单单的只是展示节点,还涉及到节点的新增以及删除,因此得在节点的后面自定义上内容,定义上新增和删除按钮,所以直接使用上

谷粒商城第六天-商品服务之分类管理下的获取三级分类树形列表,谷粒商城,SpringBoot,vue,vue.js,spring boot,项目

这个组件,这里我们使用scoped slot这个。

 复制下面的样例代码,注意别复制多了,只复制需要的,然后打开运行前端项目就能有官网的那种效果了,当然还是需要作一些优化的,比如说复制下来的某些东西不需要,就比如说这里的

模板就保留这里:

 <el-tree
      :data="data"
      show-checkbox
      node-key="id"
      default-expand-all
      :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)">
            Append
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            Delete
          </el-button>
        </span>
      </span>
    </el-tree>

可能有人会问,为什么不用div盖着,其实这个并不是必要的,只是有个时候可能需要,需要的时候我们在添上即可。

脚本部分:

<script>
  let id = 1000;

  export default {
    data() {
      const data = [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }];
      return {
        data: JSON.parse(JSON.stringify(data)),
        data: JSON.parse(JSON.stringify(data))
      }
    },

    methods: {
      append(data) {
        const newChild = { id: id++, label: 'testtest', children: [] };
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newChild);
      },

      remove(node, data) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      }
    }
  };
</script>

 这里的数据先留着,方便初看效果,下面的renderContent方法可以删掉,这是

谷粒商城第六天-商品服务之分类管理下的获取三级分类树形列表,谷粒商城,SpringBoot,vue,vue.js,spring boot,项目

 样式部分一般不要动,保留即可:

<style>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>

注意:这里除了对原有的内容进行删减之后,还需要优化一些内容,就比如说:

1. 就结构而言,我是需要点击箭头才展开子节点。

2. 就内容:append和delete按钮来说,append因为最多只有三级分类,所以如果当前分类的层级已经是三层了,不能添加这个append,对于delete,如果当前分类下面还有子分类的话,也不能添加delete。 

具体实现如下:

其实完成这些操作,注意参考element的官方文档,对于它给我的这些数据,有什么可以使用控制台打印查看,对于一些你想要的操作这里比如说想点击箭头再展开这样的特殊操作,就需要查看文档下面的属性配置

谷粒商城第六天-商品服务之分类管理下的获取三级分类树形列表,谷粒商城,SpringBoot,vue,vue.js,spring boot,项目

所以: 

谷粒商城第六天-商品服务之分类管理下的获取三级分类树形列表,谷粒商城,SpringBoot,vue,vue.js,spring boot,项目

谷粒商城第六天-商品服务之分类管理下的获取三级分类树形列表,谷粒商城,SpringBoot,vue,vue.js,spring boot,项目

经过上面的两处优化,基本上三级分类也就是这个样子了,现在只是数据不是我们的真实数据罢了。

接下来的工作就是:在前端工程中写好请求对象,用来请求后端获得三级分类的树形列表,然后在组件中引入,然后使用,得到数据,然后再参考文档,将数据正确显示出来即可。

1. 在api文件夹中编写好请求对象

谷粒商城第六天-商品服务之分类管理下的获取三级分类树形列表,谷粒商城,SpringBoot,vue,vue.js,spring boot,项目

export function treeListCategory() {
    return request({
        url: '/product/category/treeList',
        method: 'get'
    })
}

2, 在组件中引入并使用

 现在是创建了一个方法,调用接口

谷粒商城第六天-商品服务之分类管理下的获取三级分类树形列表,谷粒商城,SpringBoot,vue,vue.js,spring boot,项目

谷粒商城第六天-商品服务之分类管理下的获取三级分类树形列表,谷粒商城,SpringBoot,vue,vue.js,spring boot,项目 其实很简单,就是前端写好树形控件基本的架子先搭起来,然后将数据换成经由调用后端接口返回的数据。步骤也是很简单。到这里网页已经是可以显示三级分类的分类列表了。 

三、后端部分

3.1 编写商品分类的相关接口

3.1.1 获取树形三级分类列表

无论是前台页面还是后台管理页面都得将分类列表以子父的树形三级列表体现出来。

所以就得写一个接口获取到树形三级分类列表。

树形子父关系如何体现呢?貌似有点抽象,其实很简单,就是一个分类下面有许多的子分类,在面向对象的思想中就是分类的这个类中有一个类型为集合,集合元素为分类的子分类属性。

如下图所示:

谷粒商城第六天-商品服务之分类管理下的获取三级分类树形列表,谷粒商城,SpringBoot,vue,vue.js,spring boot,项目

注意: 非表的字段一定得加上@TabelField(exist = false)注解,来标明此字段是非表字段,如果不加这个注解,MyBatis字段映射的时候就会出问题,就比如说sql查了记录的所有字段,但是却找不到该字段,就会报错

好,现在字段是有了,最终肯定是需要为这个字段赋上值的,所有的子分类是计算出来的,那到底如何计算呢?其核心业务实现如何写?请看下面我写的:

其实很简单,就两步,其实获取子分类的关键就是 依靠表中的父类别字段。有了这一个就很容易得到一个类别的下的子类别。

第一步:编写获取子分类的方法(不带真正实现)。

遍历所有分类,为每个分类赋上子分类

第二步:编写获取子分类的具体实现

也就是根据当前分类的id,然后遍历所有的分类,找到它的子分类,其实也就是分类的父id为当前分类的id,那么这个分类就为当前分类的子分类

最关键的业务实现思路就有了,最关键最重要的一步其实已经想明白了,接下来就是常规的写好各个层的代码。我现在已经习惯逆向编写了,也就是从控制层开始写,一直写到dao层。话不多说,直接贴代码:

controller:

谷粒商城第六天-商品服务之分类管理下的获取三级分类树形列表,谷粒商城,SpringBoot,vue,vue.js,spring boot,项目

@ApiOperation("获取商品分类的树形结构")
    @GetMapping("/treeList")
    public AjaxResult treeList(){
        List<Category> treeList = categoryService.treeList();
        return AjaxResult.success(treeList);
    }

service:

service接口:

谷粒商城第六天-商品服务之分类管理下的获取三级分类树形列表,谷粒商城,SpringBoot,vue,vue.js,spring boot,项目 service实现:

谷粒商城第六天-商品服务之分类管理下的获取三级分类树形列表,谷粒商城,SpringBoot,vue,vue.js,spring boot,项目

@Override
    public List<Category> treeList() {
        //获取到所有分类
        List<Category> list = list();
        //为每个分类添加上子分类
        list.stream().forEach(category -> category.setChildren(getChildren(category,list)));
        //为根父类排序
        list.stream().sorted((c1,c2)->
            c1 == null ? 0 : c1.getSort().intValue() - (c2 == null ? 0 : c2.getSort().intValue()));
        return list;
    }
private List<Category> getChildren(Category root, List<Category> all) {
        //从所有类别中找到子分类,并排好序
        List<Category> childrenCategory = all.stream().filter(c -> c.getParentCid().equals(root.getCatId())).sorted((c1,c2)->
            c1 == null ? 0 : c1.getSort().intValue() - (c2 == null ? 0 : c2.getSort().intValue())
        ).collect(Collectors.toList());
        //针对所有的子分类也递归找其对应的子分类
        childrenCategory.stream().forEach(category -> category.setChildren(getChildren(category,childrenCategory)));
        return childrenCategory;
    }

这里由于是直接使用的MP,并且没有复杂查询,也就不需要直接显式的写dao层了

四、总结

其实从后端编写好接口,到前端编写好组件,整个过程还是比较简单的

在这里前端相较于后端而言反而要繁琐一点,后端主要把真正的获取逻辑写明白就好了

而前端就根据elememtUI的组件库选好组件,然后将参数写好,使得能正确的将数据渲染出来,还有一些其他的修改,优化一下就行了。

另外写好api,使得可以正确的访问后端,其实不难,但是繁琐,之后的功能实现大体都是这些步骤,主要就是核心组件不同,后端无非还是CURD。

这次相当于是Vue+Boot的开发,这是比较主流的开发方式,利用若依框架开发也是公司中常用的,因此需要熟练掌握。文章来源地址https://www.toymoban.com/news/detail-615857.html

到了这里,关于谷粒商城第六天-商品服务之分类管理下的获取三级分类树形列表的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 谷粒商城笔记+踩坑(9)——上架商品spu到ES索引库

    导航: 谷粒商城笔记+踩坑汇总篇 目录 1、ES回顾 2、ES整合商品上架  2.1、分析 2.2、创建sku的es索引库 2.2.1、两种索引库设计方案分析 2.2.2、最终选用的索引库方案,nested类型 2.3、SkuEsModel模型类 2.4、【库存模块】库存量查询 2.5、【查询模块】保存ES文档 2.5.1、常量类 2.5.2、

    2024年02月05日
    浏览(46)
  • 谷粒商城第十一天-完善商品分组(主要添上关联属性)

    目录 一、总述 二、前端部分 2.1 改良前端获取分组列表接口及其调用 2.2 添加关联的一整套逻辑 三、后端部分 四、总结 前端部分和之前的商品品牌添加分类差不多。 也是修改一下前端的分页获取列表的接口,还有就是加上关联的那一套逻辑,包括基本构件的引入、数据域的

    2024年02月13日
    浏览(50)
  • 谷粒商城第十天-获取分类属性分组(前端组件抽取&父子组件交互)

    目录 一、总述 1.1 前端思路 1.2 后端思路 二、前端部分 2.1 将分类树前端代码抽取成一个组件 2.2 使用elementUI的组件实现左右组件功能 2.3 使用事件机制进行组件通信 三、后端部分 四、总结 说一下今天需要实现一个什么样子的功能: 很简单,就是在属性分组的那个页面,左

    2024年02月14日
    浏览(48)
  • 谷粒商城-订单服务

    目录 商城业务-订单服务-RabbitMQ延时队列 商城业务-订单服务-延时队列定时关单模拟 商城业务-订单服务-创建业务交换机队列 商城业务-订单服务-监听库存解锁 商城业务-订单服务-库存解锁逻辑 商城业务-订单服务-库存自动解锁完成 商城业务-订单服务-测试库存自动解锁 商城

    2023年04月08日
    浏览(42)
  • 001-谷粒商城-微服务剖析

    还是很强的,该有的都有 SpringCloudAlibaba组件包括 Sentinel Nacos RocketMQ Seata 搭配SpringCloudAlibaba组件 OpenFeign GateWay Ribbn gateway使用了SpringWebFlux,前几天研究到,为什么springboot不直接使用SpringWebFlux, 还是依然使用tomcat的servelet,内部NIO进行处理请求。 Spring WebFlux 使用 Reactor库来实现

    2024年04月16日
    浏览(58)
  • 谷粒商城第十二天-基本属性&销售属性管理功能的实现

    目录 一、总述 二、前端部分 三、后端部分 四、总结 前端的话,依旧是直接使用老师给的。 前端的话还是那些增删改查,业务复杂一点的话,无非就是设计到多个字段多个表的操作,当然这是后端的事了,前端这里不做深究,走一下流程,知道哪些数据,需要绑定哪些事件

    2024年02月13日
    浏览(42)
  • Spring Boot + Vue的网上商城之商品分类

    在网上商城中,商品分类是非常重要的一个功能,它可以帮助用户更方便地浏览和筛选商品。本文将介绍如何使用Spring Boot和Vue来实现商品分类的功能,包括一级分类和二级分类的管理以及前台按分类浏览商品的实现。 数据库设计:设计商品分类表和商品表,商品分类表包含

    2024年02月09日
    浏览(44)
  • 2023最新谷粒商城笔记之支付服务篇(全文总共13万字,超详细)

    这里我们是使用的支付宝进行支付,所以需要调用支付宝的相关API,下面来了解一下怎样使用支付宝进行线上支付。 支付宝开放平台传送门: 支付宝开放平台 网站支付DEMO传送门: 手机网站支付 DEMO | 网页移动应用 RSA、加密加签、密钥等 对称加密 对称加密 :发送方和接收

    2024年02月09日
    浏览(50)
  • 谷粒商城P139集——云服务器frp内网穿透+nginx

    我注册的域名是第一年14元的 (1)购买域名并备案 (2)域名解析 测试:如域名为gulimall.com 则在浏览器中输入 gulimall.com:9200 (前提是9200端口已经开放) (1)下载 wget https://github.com/fatedier/frp/releases/download/v0.20.0/frp_0.20.0_linux_amd64.tar.gz 云服务器下载linux版本注意frps的配置即可

    2024年02月09日
    浏览(65)
  • 谷粒商城篇章5 ---- P173-P192 ---- 检索服务【分布式高级篇二】

    目录 1 检索服务  1.1 搭建页面环境 1.1.1 引入依赖 1.1.2 将检索页面放到gulimall-search的src/main/resources/templates/目录下 1.1.3 调整搜索页面 1.1.4 将静态资源放到linux的nginx相关映射目录下/root/docker/nginx/html/static/ search/ 1.1.5 SwitchHosts配置域名转发 1.1.6 测试 1.1.7 nginx配置 1.1.8 网关配

    2024年02月15日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包