商城首页分类列表的实现

Posted 2021-09-09 SmallCuteMonkey

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了商城首页分类列表的实现相关的知识，希望对你有一定的参考价值。

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

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

方案二：

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

一次性查询出来的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 classJAVAEE——宜立方商城05：前台系统搭建首页展示Cms系统的实现
 网上商城3--首页一级分类的查询
 淘淘商城第一天——项目介绍与项目搭建
 网上商城4--首页二级分类的查询
 小程序 优选商城 项目讲解
 学习模仿天猫商城毕业设计SSM商城系统笔记

商城首页分类列表的实现

7.2业务层实现

控制层实现

前端 进行数据的获取

前端进行数据的获取