商品分类实现(一级分类、二级分类和子分类)

最新推荐文章于 2023-05-15 10:02:20 发布
最新推荐文章于 2023-05-15 10:02:20 发布
阅读量7.6k 收藏 15
点赞数 5
分类专栏： Java架构师直通车 文章标签： vue mybatis java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yearingforthefuture/article/details/106091119
版权

1.封装二级分类(CategoryVO)和三级分类(SubCategoryVO)
CategoryVO

public class CategoryVO {
    private Integer id;
    private String name;
    private String type;
    private Integer fatherId;

    private List<SubCategoryVO> SubCatList;
    省略get和set方法.......
}

SubCategoryVO

public class SubCategoryVO {
    private Integer subId;
    private String SubName;
    private String SubType;
    private Integer SubFatherId;
    省略get和set方法......
}

2.查询二级分类和子分类需要自定义Sql，所以得重新创建CategoryMapperCustom接口和CategoryMapperCustom.xml
CategoryMapperCustom接口

public interface CategoryMapperCustom {
    /**
     * 查询所有的二级分类
     */
    public List<CategoryVO> getSubCatList(Integer rootCatId);

}

CategoryMapperCustom.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.lzx.mapper.CategoryMapperCustom" >
  <resultMap id="myCategoryVO"  type="com.lzx.pojo.vo.CategoryVO">
    <id column="id" property="id" />
    <result column="name" property="name"/>
    <result column="type" property="type" />
    <result column="fatherId" property="fatherId" />
    <!--
      collection:用于定义关联的list
      property:对应三级分类list属性名
      ofType：集合的类型，三级分类的VO
    -->
    <collection property="SubCatList" ofType="com.lzx.pojo.vo.SubCategoryVO">
      <id column="subId" property="subId" />
      <result column="subName" property="subName"/>
      <result column="subType" property="subType" />
      <result column="subFatherId" property="subFatherId" />
    </collection>
  </resultMap>
  <select id="getSubCatList" resultMap="myCategoryVO" parameterType="int">
    SELECT
     f.`id` AS id,
     f.`name` AS `name`,
     f.`type` AS TYPE,
     f.`father_id` AS fatherId,
     c.`id` AS subId,
     c.`name` AS `subName`,
     c.`type` AS subType,
     c.`father_id` AS subFatherId
    FROM
      category f
    LEFT JOIN
      category c
    ON
    f.id = c.father_id
    WHERE
      f.father_id = #{rootCatId}
  </select>
</mapper>

3.查询一级分类和子分类目录
CategoryService

public interface CategoryService {
    /**
     * 查询一级分类
     * @param
     * @return
     */
    public List<Category> queryAllRootLevel();

    /**
     * 查询所有的二级分类和子分类
     * @param rootCatId
     * @return
     */
    public List<CategoryVO> getSubCatlist(Integer rootCatId);
}

CategoryServiceImpl

@Service
public class CategoryServiceImpl implements CategoryService {
    @Autowired
    private CategoryMapper categoryMapper;
    @Autowired
    private CategoryMapperCustom categoryMapperCustom;

    @Transactional(propagation = Propagation.SUPPORTS)
    @Override
    public List<Category> queryAllRootLevel() {
        Example example = new Example(Category.class);
        Example.Criteria criteria = example.createCriteria();
        criteria.andEqualTo("type",1);
        List<Category> result = categoryMapper.selectByExample(example);
        return result;
    }
    @Transactional(propagation = Propagation.SUPPORTS)
    @Override
    public List<CategoryVO> getSubCatlist(Integer rootCatId) {
        return categoryMapperCustom.getSubCatList(rootCatId);

    }

}

前端（部分代码）

				renderCategorys() {
					var serverUrl = app.serverUrl;

					// 获得商品分类 - 大分类
					axios.get(
							serverUrl + '/index/cats', {})
						.then(res => {
							
							if (res.data.status == 200) {
								var categoryList = res.data.data
								this.categoryList = categoryList;

								var rootCatHtml = "";
								for (var i = 0; i < categoryList.length; i++) {

									var cat = categoryList[i];
									rootCatHtml += '' +
										'<li class="appliance js_toggle relative">' +
										'<div class="category-info">' +
										'<h3 class="category-name b-category-name">' +
										'<i><img src="' + cat.logo + '"></i>' +
										'<a class="ml-22" title="' + cat.name + '">' + cat.name + '</a>' +
										'</h3>' +
										'<em>&gt;</em></div>' +
										'<div class="menu-item menu-in top">' +
										'<div class="area-in">' +
										'<div class="area-bg">' +
										'<div class="menu-srot">' +
										'<div class="sort-side" rootCatId="' + cat.id + '"></div>' +
										'</div>' +
										'</div>' +
										'</div>' +
										'</div>' +
										'<b class="arrow"></b>' +
										'</li>';
								}
								var $leftNav = $('#js_climit_li');
								$leftNav.html(rootCatHtml);

								$("li").hover(function () {
									// debugger;
									$(".category-content .category-list li.first .menu-in").css("display",
										"none");
									$(".category-content .category-list li.first").removeClass("hover");

									var meLi = $(this);

									var subWapper = $(this).children("div.menu-in").children("div.area-in")
										.children("div.area-bg").children("div.menu-srot").children(
											"div.sort-side");
									// console.log(subWapper.html());
									var subCatHtml = subWapper.html();
									var rootCatId = subWapper.attr("rootCatId");
									// console.log(rootCatId);
									// 如果该节点下没有内容，则发起请求查询子分类并且渲染到页面，如果有的话就不查询了（懒加载模式）
									if (subCatHtml == null || subCatHtml == '' || subCatHtml == undefined) {
										if (rootCatId != undefined && rootCatId != null && rootCatId != '') {
											// 根据root分类id查询该分类下的所有子分类
											axios.get(
													serverUrl + '/index/subCat/' + rootCatId, {})
												.then(res => {
													if (res.data.status == 200) {
														var catList = res.data.data
														// this.catList = catList;
														// debugger;
														var subRenderHtml = '';
														for (var i = 0; i < catList.length; i++) {
															var cat = catList[i];
															subRenderHtml += '' +
																'<dl class="dl-sort">' +
																'<dt><span title="' + cat.name + '">' +
																cat.name + '</span></dt>';

															// 拼接第三级分类
															var subCatList = cat.subCatList;
															for (var j = 0; j < subCatList.length; j++) {
																var subCat = subCatList[j];
																subRenderHtml += '<dd><a title="' + subCat
																	.subName + '" href="catItems.html?searchType=catItems&catId='+ subCat.subId +'" target="_blank"><span>' +
																	subCat.subName + '</span></a></dd>'
															}

															subRenderHtml += '</dl>';
														}
														subWapper.html(subRenderHtml);
														meLi.addClass("hover");
														meLi.children("div.menu-in").css("display",
															"block");
													}
												});
										}
										// var renderHtml = '' 
										// 	+ '<dl class="dl-sort">'
										// 		+ '<dt><span title="大包装">大包装</span></dt>'
										// 		+ '<dd><a title="蒸蛋糕" href="#"><span>蒸蛋糕</span></a></dd>'
										// 		+ '<dd><a title="脱水蛋糕" href="#"><span>脱水蛋糕</span></a></dd>'
										// 		+ '<dd><a title="瑞士卷" href="#"><span>瑞士卷</span></a></dd>'
										// 		+ '<dd><a title="软面包" href="#"><span>软面包</span></a></dd>'
										// 		+ '<dd><a title="马卡龙" href="#"><span>马卡龙</span></a></dd>'
										// 		+ '<dd><a title="千层饼" href="#"><span>千层饼</span></a></dd>'
										// 		+ '<dd><a title="甜甜圈" href="#"><span>甜甜圈</span></a></dd>'
										// 		+ '<dd><a title="蒸三明治" href="#"><span>蒸三明治</span></a></dd>'
										// 		+ '<dd><a title="铜锣烧" href="#"><span>铜锣烧</span></a></dd>'
										// 	+ '</dl>'
										// 	+ '<dl class="dl-sort">'
										// 		+ '<dt><span title="两件套">两件套</span></dt>'
										// 		+ '<dd><a title="蒸蛋糕" href="#"><span>蒸蛋糕</span></a></dd>'
										// 		+ '<dd><a title="脱水蛋糕" href="#"><span>脱水蛋糕</span></a></dd>'
										// 		+ '<dd><a title="瑞士卷" href="#"><span>瑞士卷</span></a></dd>'
										// 		+ '<dd><a title="软面包" href="#"><span>软面包</span></a></dd>'
										// 		+ '<dd><a title="马卡龙" href="#"><span>马卡龙</span></a></dd>'
										// 		+ '<dd><a title="千层饼" href="#"><span>千层饼</span></a></dd>'
										// 		+ '<dd><a title="甜甜圈" href="#"><span>甜甜圈</span></a></dd>'
										// 		+ '<dd><a title="蒸三明治" href="#"><span>蒸三明治</span></a></dd>'
										// 		+ '<dd><a title="铜锣烧" href="#"><span>铜锣烧</span></a></dd>'
										// 	+ '</dl>';
										// 	$(this)
										// 		.children("div.menu-in")
										// 		.children("div.area-in")
										// 		.children("div.area-bg")
										// 		.children("div.menu-srot")
										// 		.children("div.sort-side")
										// 		.html(renderHtml);
									} else {
										$(this).addClass("hover");
										$(this).children("div.menu-in").css("display", "block");
									}

									// $(this).addClass("hover");
									// $(this).children("div.menu-in").css("display", "block")
								}, function () {
									$(this).removeClass("hover")
									$(this).children("div.menu-in").css("display", "none")
								});
								this.renderSixNewItems();
							}
						});
				},
Java追求者
关注
  • 5
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PHPTree——php快速生成无限级分类
10-18
`parent_id` 用于关联父分类，一级分类的 `parent_id` 设为 0。`PHPTree` 允许添加其他自定义字段，不会影响数据生成。另外，`PHPTree` 的配置灵活性较高，可以通过设置不同的参数来适应不同的需求。 对于更复杂的...
PHP无限极分类函数的实现方法详解
10-20
在PHP编程中，无限极分类是一种常见的数据组织方式，它允许我们处理具有层级关系的数据，如网站的导航菜单、组织架构或商品分类等。无限级分类的实现通常涉及到递归或者栈的技术，但这里我们将重点讨论通过引用方式...
Java项目:超市购物商城管理系统(java+SSM+JSP+jQuery+Mysql)
07-04
项目介绍 本项目分为前后台，分为普通用户、管理员两种角色。前台普通用户登录，后台管理员登录； 管理员角色包含以下功能： 登录页面,用户查看,一级分类管理,二级分类管理,商品管理,查看订单,留言管理等功能。 用户角色包含以下功能： 用户首页,查看商品,用户注册,用户登录,加入购物车,提交订单,查看我的订单,留言板留言等功能。 环境需要 1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐IDEA; 3.tomcat环境：Tomcat 7.x,8.x,9.x版本均可 4.硬件环境：windows 7/8/10 1G内存以上；或者 Mac OS； 5.数据库：MySql 5.7版本； 6.是否maven项目：否 技术栈 1. 后端：Spring+SpringMVC+Mybatis 2. 前端：JSP+jQuery+Ajax 使用说明 1. 使用Navicat或者其它工具，在mysql中创建对应名称的数据库，并导入项目的sql文件； 2. 使用IDEA/Eclipse
对xml布局进行分类
qq_40638618的博客
03-23 384
//module下的buildandroid { compileSdkVersion 25 buildToolsVersion '26.0.2' defaultConfig { applicationId "com.ycjr.navpad_new" minSdkVersion 14 targetSdkVersion 22 ...
一级分类和二级分类的要点
weixin_42546729的博客
02-23 7136
1.配置一级分类和二级分类的关联关系：         在一级分类Creatgory中配置一个set类型的二级分类的集合（因为要接收一组二级分类的数据）          一级分类hbm.xml的配置是一对多&lt;set name="在ve中的名称"&gt;&lt;key colum="数据表中的id"/&gt;                       &lt;ont-many cla...
如何实现商品二级分类
m0_50217592的博客
05-15 453
4.若要实现tree树形结构，可以选择前端处理或者后端处理，后端处理有多种方式，我这里选择使用的是使用hutool工具实现树形结构。3.通过父id和子id使他们联系在一起，若商品分类为一级目录，没有父目录，则父id为0 ，若为二级目录，则父id指向一级目录的id。首先必须需要id,parent_id字段，其他根据需求扩展。2.创建数据库表sp_category。5.首先导入hutool工具依赖。1.新建Category实体类。6.实现tree树形结构。如何实现商品二级分类。
二级分类_干货——三分钟捋清我国土地利用分类
weixin_39803977的博客
01-14 8332
土地三大类《土地管理法》法第一章第四条规定："国家编制土地利用总体规划，规定土地用途，将土地分为农用地、建设用地和未利用地。"即将我国的土地分类成总体上的三大类：农用地、建设用地和未利用地。在条款中，定义了三大地类的基本概念如下：农用地是指直接用于农业生产的土地，包括耕地、林地、草地、农田水利用地、养殖水面等。建设用地是指建造建筑物、构筑物的土地，包括城乡住宅和公共设施用地、工矿用地、交通水利设施...
vue商城项目开发：axios发送请求及列表数据展示
学亮编程手记
09-21 1304
使用axios发送get请求 先install一下axios： 在main.js中全局引入axios： 仅仅在main.js中引入axios不会生效： 第二种解决方法如下，也是最常用的： 使用$http发送请求： 使用axios发送get请求： 请求URL优化 将请求URL定义成变量： axios.defaults.baseURL //是axios默认的属性 发起请求时只需要写相对地址即可： v-for遍历列表数据 补全列表展示模块html代码： 展示接口返回的数据： 使用items
原生js实现二级联动菜单
10-15
在网页开发中，二级联动菜单是一种常见的交互设计，它通常用于分类选择，如地区、商品类别等。这种菜单的特性是，当用户在第一级菜单中选择一个选项时，第二级菜单会根据所选的选项动态更新其内容。本篇文章将详细...
简单的二级菜单导航实现css代码
09-25
在网页设计中，二级菜单是一种常见的交互元素，特别是在B2C（Business-to-Consumer）类型的电商网站中，它有助于用户更方便地浏览和导航到不同的商品分类。本文将详细介绍如何使用CSS实现一个简单的二级菜单导航。 ...
生活分类信息发布网站的优秀网站管理系统正式版
01-28
系统支持无限多个一级栏目类别与子栏目类别。分站类别支持无限添加，如省、市、县、镇、村… 所见即所得的编辑功能 系统集成强大的编辑器功能，用户发布信息时可直接进行文字的排版处理，还可以在线对图片进行...
组合模式实例商品类别树
TwcatL_tree
05-22 687
1.题目： 有一个根节点，比如“服装”，它没有父节点，它可以包含其他的节点。 树枝节点，有一类节点可以包含其他的节点，称之为树枝节点，比如“男装”、“女装”和“母婴”。 叶子节点，有一类节点没有子节点，称之为叶子节点，比如“衬衣”、“夹克”、“裙子”、“套装”等。 如果碰到类似上面这种，需使用对象树来描述或实现的功能，都可以考虑使用组合模式，比如读取XML文件，或是对语句进行语法解析等。 2.UML图 3.代码 package 组合模式; public abstract class Cloth { p
【后端结合】新程序猿笔记Day15(商品分类实现)（京淘项目）
小白猿想成为Simba
12-20 669
1. 商品分类实现 1.1 优化商品分类列表 1.1.1 优化策略 数据结构: Map<parentId, 当前父级下的子级> 例子: Map<0, 所有的一级菜单> Map<一级ID, 当前一级下的二级菜单> Map<二级ID, 当前二级下的三级菜单> 设计的优势: 如果将数据保存到Map集合中,则可以有效的降低数据库的访问的次数. 提高查询效率. 1.1.2 封装Map集合 /** * 思路: * 1.判断.
Excel制作两级分类级联的一种方法
数据科学汇集
07-03 7021
用Excel实现二级分类筛选级联自动联动
Java案例-- 购物车添加商品~~（Map集合）
小库里的学习记录
08-07 1164
Java案例-- 购物车添加商品~~（Map集合）
java开源商城--(8)商品管理之商品分类
游响云停专栏
05-20 3779
商品分类可以添加多级，添加商品分类的时候，可以选择筛选属性，筛选属性实际上读取的是pms_product_attribute中type=1的数据 SELECT * FROM pms_product_attribute WHERE product_attribute_category_id=1 AND TYPE=1 1.相关表 pms_product_category 分类表 pm...
选择一级分类，查出它所有的二级分类，三级分类...等等
lw8601100的专栏
08-14 8981
create function Func_IsSubCategory --判断某商品分类是否属于另一商品分类的子孙分类 ( @targetCateId int,   --子孙分类ID @ancestorCateId int  --祖宗分类ID ) returns bi
DevEco-Studio实现商品分类的一级分类代码
最新发布
05-18
DevEco-Studio是华为公司开发的一款集成开发环境，用于开发鸿蒙（HarmonyOS）操作系统的应用程序。如果您想要实现商品分类的一级分类代码，可以参考以下步骤： 1. 在布局文件中添加一个ListView控件用于展示一级分类列表。 2. 创建一个一级分类数据模型，包括分类名称、分类ID等属性。 3. 创建一个一级分类数据源，用于存储一级分类数据模型。 4. 创建一个Adapter类用于将一级分类数据源中的数据绑定到ListView控件上。在getView()方法中进行数据绑定操作。 5. 在Activity或Fragment中实例化ListView控件和Adapter，并将Adapter设置给ListView控件。 6. 实现ListView控件的点击事件，当用户点击某个一级分类时，需要跳转到二级分类页面，并传递一级分类ID参数。 下面是一些示例代码，供您参考： 一级分类数据模型： ``` public class FirstCategoryModel { private String categoryName; private int categoryId; public String getCategoryName() { return categoryName; } public void setCategoryName(String categoryName) { this.categoryName = categoryName; } public int getCategoryId() { return categoryId; } public void setCategoryId(int categoryId) { this.categoryId = categoryId; } } ``` 一级分类数据源： ``` public class FirstCategoryDataSource { private List<FirstCategoryModel> dataList; public FirstCategoryDataSource() { dataList = new ArrayList<>(); // 添加一级分类数据 FirstCategoryModel model1 = new FirstCategoryModel(); model1.setCategoryName("电子产品"); model1.setCategoryId(1); dataList.add(model1); FirstCategoryModel model2 = new FirstCategoryModel(); model2.setCategoryName("家居用品"); model2.setCategoryId(2); dataList.add(model2); // 添加更多分类数据... } public List<FirstCategoryModel> getDataList() { return dataList; } } ``` Adapter类： ``` public class FirstCategoryAdapter extends BaseAdapter { private Context context; private List<FirstCategoryModel> dataList; public FirstCategoryAdapter(Context context, List<FirstCategoryModel> dataList) { this.context = context; this.dataList = dataList; } @Override public int getCount() { return dataList.size(); } @Override public Object getItem(int position) { return dataList.get(position); } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHolder holder; if (convertView == null) { convertView = LayoutInflater.from(context).inflate(R.layout.item_first_category, null); holder = new ViewHolder(); holder.tvCategoryName = convertView.findViewById(R.id.tv_category_name); convertView.setTag(holder); } else { holder = (ViewHolder) convertView.getTag(); } FirstCategoryModel model = dataList.get(position); holder.tvCategoryName.setText(model.getCategoryName()); return convertView; } class ViewHolder { TextView tvCategoryName; } } ``` Activity中的代码： ``` public class FirstCategoryActivity extends BaseActivity { private ListView lvCategory; private FirstCategoryAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_first_category); lvCategory = findViewById(R.id.lv_category); // 创建一级分类数据源 FirstCategoryDataSource dataSource = new FirstCategoryDataSource(); List<FirstCategoryModel> dataList = dataSource.getDataList(); // 创建Adapter并设置给ListView adapter = new FirstCategoryAdapter(this, dataList); lvCategory.setAdapter(adapter); // ListView点击事件 lvCategory.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { FirstCategoryModel model = dataList.get(position); Intent intent = new Intent(FirstCategoryActivity.this, SecondCategoryActivity.class); intent.putExtra("firstCategoryId", model.getCategoryId()); startActivity(intent); } }); } } ``` 以上代码仅为示例，具体实现方式可能因项目而异。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值