商城首页分类列表的实现

其他 2021-10-08 12:55:52 阅读次数: 0

方案一：一次性查询三级分类

  • 优点只需一查询
  • 缺点：数据库查询效率较低，页面首次加载的速度较慢

方案二：

  • 先只查询一级分类，用户点击/鼠标移动到一级分类，动态加载二级分类
  • 缺点：需要多次连接数据库

一次性查询出来的sql语句：inner join 和left join 的区别 left join 左边没有关联的数据也会全部显示

select 

c1.category_id 'category_id1',
c1.category_name 'category_name',
c1.category_level 'category_level',
c1.parent_id 'parent_id',
c1.category_icon 'category_icon',
c1.category_slogan 'category_slogan',
c1.category_pic 'category_pic',
c1.category_bg_color 'category_bg_color',

c2.category_id 'category_id2',
c2.category_name 'category_name2',
c2.category_level 'category_leve2',
c2.parent_id 'parent_id2',




c3.category_id 'category_id3',
c3.category_name 'category_name3',
c3.category_level 'category_leve3',
c3.parent_id 'parent_id3'

from category c1
left join category c2 on c2.parent_id=c1.category_id
left join category c3 on c3.parent_id=c2.category_id
where c1.category_level=1


select *from category c1
  inner join category c2 on c2.parent_id=c1.category_id
  left join category c3 on c3.parent_id=c2.category_id
   where c1.category_level=1
 

--根据父级分类的parent_id进行查询 1 级 parent_id=0
select *from category where parent_id=0,

  • 创建用于封装查询的类别信息CategoryVO

    在Beans模块中entity包下面创建一个CategoryVO实体类用于封装Category和前端 进行数据的响应，相对于Category多了这个属性

    //实体类中实现当前分类的子分类
private List<CategoryVO> categories;

        public List<CategoryVO> getCategories() {
      
      
            return categories;
        }

        public void setCategories(List<CategoryVO> categories) {
      
      
            this.categories = categories;
        }

  • 在CategoryMapper中定义一个函数

    package com.qfedu.fmmall.dao;

import com.qfedu.fmmall.entity.Category;
import com.qfedu.fmmall.entity.CategoryVO;
import com.qfedu.fmmall.general.GeneralDao;

import java.util.List;

public interface CategoryMapper extends GeneralDao<Category> {
      
      
//使用连接查询实现分类列表查询
    public List<CategoryVO> selectAllCategories();
    
    
    //    子查询
    public List<CategoryVO> selectAllCategories2(int parentId);
}

  • 映射文件配置

    <?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.qfedu.fmmall.dao.CategoryMapper">
  <resultMap id="BaseResultMap" type="com.qfedu.fmmall.entity.Category">
    <!--
      WARNING - @mbg.generated
    -->
    <id column="category_id" jdbcType="VARCHAR" property="categoryId" />
    <result column="category_name" jdbcType="VARCHAR" property="categoryName" />
    <result column="category_level" jdbcType="INTEGER" property="categoryLevel" />
    <result column="parent_id" jdbcType="INTEGER" property="parentId" />
    <result column="category_icon" jdbcType="VARCHAR" property="categoryIcon" />
    <result column="category_slogan" jdbcType="VARCHAR" property="categorySlogan" />
    <result column="category_bg_color" jdbcType="VARCHAR" property="categoryBgColor" />
  </resultMap>



  <resultMap id="CategoryVoMap" type="com.qfedu.fmmall.entity.CategoryVO">
    <!--
      WARNING - @mbg.generated
    -->
    <id column="category_id1" jdbcType="VARCHAR" property="categoryId" />
    <result column="category_name1" jdbcType="VARCHAR" property="categoryName" />
    <result column="category_level1" jdbcType="INTEGER" property="categoryLevel" />
    <result column="parent_id1" jdbcType="INTEGER" property="parentId" />
    <result column="category_icon1" jdbcType="VARCHAR" property="categoryIcon" />
    <result column="category_slogan1" jdbcType="VARCHAR" property="categorySlogan" />
    <result column="category_bg_color1" jdbcType="VARCHAR" property="categoryBgColor" />
    <collection property="categories" ofType="com.qfedu.fmmall.entity.CategoryVO">
      <id column="category_id2" jdbcType="VARCHAR" property="categoryId" />
      <result column="category_name2" jdbcType="VARCHAR" property="categoryName" />
      <result column="category_level2" jdbcType="INTEGER" property="categoryLevel" />
      <result column="parent_id2" jdbcType="INTEGER" property="parentId" />

     <collection property="categories" ofType="com.qfedu.fmmall.entity.CategoryVO">

       <id column="category_id3" jdbcType="VARCHAR" property="categoryId" />
       <result column="category_name3" jdbcType="VARCHAR" property="categoryName" />
       <result column="category_level3" jdbcType="INTEGER" property="categoryLevel" />
       <result column="parent_id3" jdbcType="INTEGER" property="parentId" />


     </collection>
    </collection>

  </resultMap>









  <select id="selectAllCategories" resultMap="CategoryVoMap">

select

c1.category_id 'category_id1',
c1.category_name 'category_name',
c1.category_level 'category_level',
c1.parent_id 'parent_id',
c1.category_icon 'category_icon',
c1.category_slogan 'category_slogan',
c1.category_pic 'category_pic',
c1.category_bg_color 'category_bg_color',

c2.category_id 'category_id2',
c2.category_name 'category_name2',
c2.category_level 'category_leve2',
c2.parent_id 'parent_id2',




c3.category_id 'category_id3',
c3.category_name 'category_name3',
c3.category_level 'category_leve3',
c3.parent_id 'parent_id3'

from category c1
left join category c2 on c2.parent_id=c1.category_id
left join category c3 on c3.parent_id=c2.category_id
where c1.category_level=1


  </select>
    
    
   

</mapper>

    使用子查询实现分类列表的查询：

        
<!--  使用子查询实现的分类列表查询-->
  <resultMap id="CategoryMap2" type="com.qfedu.fmmall.entity.CategoryVO">
    <!--
      WARNING - @mbg.generated
    -->
    <id column="category_id" jdbcType="VARCHAR" property="categoryId" />
    <result column="category_name" jdbcType="VARCHAR" property="categoryName" />
    <result column="category_level" jdbcType="INTEGER" property="categoryLevel" />
    <result column="parent_id" jdbcType="INTEGER" property="parentId" />
    <result column="category_icon" jdbcType="VARCHAR" property="categoryIcon" />
    <result column="category_slogan" jdbcType="VARCHAR" property="categorySlogan" />
    <result column="category_bg_color" jdbcType="VARCHAR" property="categoryBgColor" />
    <collection property="categories" column="category_id" select="com.qfedu.fmmall.dao.CategoryMapper.selectAllCategories2"/>

<!--  这里的column="category_id"将等于
//    子查询
    public List<CategoryVO> selectAllCategories2(int parentId);里面的parentId;
-->

  </resultMap>






  <!--  使用子查询实现的分类列表查询-->
  <select id="selectAllCategories2" resultMap="CategoryMap2">
    select

     category_id,
category_name,
category_level,
parent_id,
category_icon,
category_slogan,
category_pic,
category_bg_color


from category where parent_id=#{parentId};
  </select>

    7.2业务层实现

    CategoryService

    package com.qfedu.fmmall.service;

import com.qfedu.fmmall.vo.ResultVO;

public interface CategoryService {
      
      

    public ResultVO queryAllCategory();
}

    CategoryServiceimpl:

    package com.qfedu.fmmall.service.impl;

import com.qfedu.fmmall.dao.CategoryMapper;
import com.qfedu.fmmall.entity.CategoryVO;
import com.qfedu.fmmall.service.CategoryService;
import com.qfedu.fmmall.vo.ResultStatus;
import com.qfedu.fmmall.vo.ResultVO;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;


@Service
public class CategoryServiceimpl implements CategoryService {
      
      
    @Resource
    private CategoryMapper categoryMapper;

    @Override
    public ResultVO queryAllCategory() {
      
      
        List<CategoryVO> categoryVOS = categoryMapper.selectAllCategories2(0);

        return new ResultVO(ResultStatus.OK,"success",categoryVOS);


    }
}

    控制层实现

    indexController实现：

    @Autowired
    private CategoryService categoryService;


    @RequestMapping("category-list")
    @ApiOperation("商品分类查询接口")
    public ResultVO queryAllCategory(){
      
      

        return categoryService.queryAllCategory();
    }

前端 进行数据的获取

<script type="text/javascript " >

var baseUrl="http://localhost:8080/";    

var vm=new Vue({
      
      
 el:"#app",
 data:{
      
      
	 useranme:"",
	 userImg:"",
	 token:"",
	 isLogin:false,
	 categories:[],



 },


	// 页面加载就执行
	 created:function() {
      
      
		//  从cookie中获取username,userImg,token
 var token=getCookieValue("token");
 console.log(token);
 if(token!=null && token!=""){
      
      
	 this.isLogin=true;

 this.username=getCookieValue("username");
//  console.log(username);
 this.userImg=getCookieValue("userImg");
}
// 轮播图实现


// 分类列表实现
var url2=baseUrl+"index/categorylist";
axios.get(url2).then(res=>{
      
      
  console.log(res.data);
  this.categories=res.data.data;
  setTimeout(function(){
      
      
	$("li").hover(function() {
      
      
									$(".category-content .category-list li.first .menu-in").css("display", "none");
									$(".category-content .category-list li.first").removeClass("hover");
									$(this).addClass("hover");
									$(this).children("div.menu-in").css("display", "block")
								}, function() {
      
      
									$(this).removeClass("hover")
									$(this).children("div.menu-in").css("display", "none")
								});

  },);

})




 },
});







</script>

用Vue把所有的数据遍历出来：

		<!-- 通过一个li遍历多个 -->
									<div class="category">
										<ul v-for="c1 in categories" class="category-list" id="js_climit_li">
											<li class="appliance js_toggle relative first">
												<div class="category-info">
													<h3 class="category-name b-category-name"><i><img :src="'static/images/'+c1.categoryIcon"></i>
														<a class="ml-22" title="点心">{
   
   {c1.categoryName}}</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">

																	<!-- 每个dl代表二级分类 -->
																	<dl class="dl-sort">
																		<dt v-for="c2 in c1.categories"><span  title="蛋糕">{
   
   {c2.categoryName}}</span></dt>
																		<!-- <dd v-for="c3 in c2.categories">
																			<a title="蒸蛋糕" href="search.html">
																			<span>{
    
    {c3.categoryName}}</span></a>
																		</dd> -->
																		
																	</dl>
																	

																</div>
																<!-- <div class="brand-side">
																	<dl class="dl-sort"><dt><span>实力商家</span></dt>
																		<dd><a rel="nofollow" title="呵官方旗舰店" target="_blank" href="#" rel="nofollow"><span  class="red" >呵官方旗舰店</span></a></dd>
																		<dd><a rel="nofollow" title="格瑞旗舰店" target="_blank" href="#" rel="nofollow"><span >格瑞旗舰店</span></a></dd>
																		<dd><a rel="nofollow" title="飞彦大厂直供" target="_blank" href="#" rel="nofollow"><span  class="red" >飞彦大厂直供</span></a></dd>
																		<dd><a rel="nofollow" title="红e·艾菲妮" target="_blank" href="#" rel="nofollow"><span >红e·艾菲妮</span></a></dd>
																		<dd><a rel="nofollow" title="本真旗舰店" target="_blank" href="#" rel="nofollow"><span  class="red" >本真旗舰店</span></a></dd>
																		<dd><a rel="nofollow" title="杭派女装批发网" target="_blank" href="#" rel="nofollow"><span  class="red" >杭派女装批发网</span></a></dd>
																	</dl>
																</div> -->
															</div>
														</div>
													</div>
												</div> -->
											<b class="arrow"></b>	
											</li>
											
									      </ul>
									</div>

猜你喜欢

转载自blog.csdn.net/houzhicongone/article/details/119900779
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022