电商门户网站商品品类多级联动SpringBoot+Thymeleaf实现

在淘宝、京东等电商网站，其门户网站都有一个商品品类的多级联动，鼠标移动，就显示，因为前端不是我做的，所以不说明前端实现，只介绍后端实现。

搭建部署SpringBoot环境
配置文件配置：
开启了对Thymeleaf模块引擎的支持

server:  port: 8081#logging:#  config: classpath:logback_spring.xml#  level:#    com.muses.taoshop: debug#  path: /data/logsspring:  datasource:

    # 主数据源    shop:      url: jdbc:mysql://127.0.0.1:3306/taoshop?autoReconnect=true&useUnicode=true&characterEncoding=utf8&characterSetResults=utf8&useSSL=false      username: root      password: root    driver-class-name: com.mysql.jdbc.Driver    type: com.alibaba.druid.pool.DruidDataSource

    # 连接池设置    druid:      initial-size: 5      min-idle: 5      max-active: 20
      # 配置获取连接等待超时的时间      max-wait: 60000
      # 配置间隔多久才进行一次检测，检测需要关闭的空闲连接，单位是毫秒      time-between-eviction-runs-millis: 60000
      # 配置一个连接在池中最小生存的时间，单位是毫秒      min-evictable-idle-time-millis: 300000
      # Oracle请使用select 1 from dual      validation-query: SELECt 'x'      test-while-idle: true      test-on-borrow: false      test-on-return: false
      # 打开PSCache，并且指定每个连接上PSCache的大小      pool-prepared-statements: true      max-pool-prepared-statement-per-connection-size: 20
      # 配置监控统计拦截的filters，去掉后监控界面sql无法统计，'wall'用于防火墙      filters: stat,wall,slf4j
      # 通过connectProperties属性来打开mergeSql功能；慢SQL记录      connection-properties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=5000
      # 合并多个DruidDataSource的监控数据      use-global-data-source-stat: true#  jpa:#    database: mysql#    hibernate:#      show_sql: true#      format_sql: true#      ddl-auto: none#      naming:#        physical-strategy: org.hibernate.boot.entity.naming.PhysicalNamingStrategyStandardImpl#  mvc:#    view:#      prefix: /WEB-INF/jsp/#      suffix: .jsp

  #添加Thymeleaf配置  thymeleaf:    cache: false    prefix: classpath:/templates/    suffix: .html    mode: HTML5    encoding: UTF-8    content-type: text/html

  #Jedis配置#  jedis :#    pool :#      host : 127.0.0.1#      port : 6379#      password : redispassword#      timeout : 0#      config :#        maxTotal : 100#        maxIdle : 10#        maxWaitMillis : 100000

SpringBoot启动类：

package com.muses.taoshop;import org.mybatis.spring.boot.autoconfigure.MybatisAutoConfiguration;import org.springframework.boot.*;import org.springframework.boot.autoconfigure.*;import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;import org.springframework.boot.autoconfigure.jdbc.DataSourceTransactionManagerAutoConfiguration;import org.springframework.boot.web.servlet.ServletComponentScan;import org.springframework.cache.annotation.EnableCaching;import org.springframework.scheduling.annotation.EnableAsync;import org.springframework.scheduling.annotation.EnableScheduling;import org.springframework.stereotype.*;import org.springframework.transaction.annotation.EnableTransactionManagement;import org.springframework.web.bind.annotation.*;@Controller@EnableScheduling//开启对计划任务的支持@EnableTransactionManagement//开启对事务管理配置的支持@EnableCaching@EnableAsync//开启对异步方法的支持@EnableAutoConfiguration@ServletComponentScan@SpringBootApplication(exclude={DataSourceAutoConfiguration.class,
        MybatisAutoConfiguration.class,
        DataSourceTransactionManagerAutoConfiguration.class})public class PortalApplication {

    @RequestMapping("/")    @ResponseBody
    String home() {        return "portal web!";
    }    @RequestMapping("/doTest")    @ResponseBody
    String doTest(){
        System.out.println(Thread.currentThread().getName());
        String threadName = Thread.currentThread().getName();        return threadName;
    }    public static void main(String[] args) throws Exception {
        SpringApplication.run(PortalApplication.class, args);
    }
}

写个Controller类跳转到门户网站：
ps：品类多级联动思路其实就是先构建一个树，我这里的做法就是先查询处理，然后通过工具类，进行递归遍历，待会给出工具类代码，仅供参考。listCategory方法其实就是获取所有的品类信息

package com.muses.taoshop.web.controller.portal;import com.alibaba.fastjson.JSON;import com.muses.taoshop.item.entity.ItemBrand;import com.muses.taoshop.item.entity.ItemCategory;import com.muses.taoshop.item.entity.ItemPortal;import com.muses.taoshop.item.service.IItemBrankService;import com.muses.taoshop.item.service.IItemCategoryService;import com.muses.taoshop.item.service.IItemService;import com.muses.taoshop.util.CategoryTreeUtils;import com.muses.taoshop.web.controller.baseController;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.util.CollectionUtils;import org.springframework.web.bind.annotation.*;import org.springframework.web.servlet.ModelAndView;import java.util.Date;import java.util.List;@Controller@RequestMapping("/portal")
public class IndexController extends baseController{    @Autowired
    IItemService iItemService;    @Autowired
    IItemBrankService iItemBrankService;    @Autowired
    IItemCategoryService iItemCategoryService;    
    @GetMapping(value = "/toIndex.do")
    public ModelAndView toIndex(){
        info("跳转到门户网站");        ModelAndView mv = this.getModelAndView();
        mv.setViewName("index");        List items = iItemService.listItemPortal();        CategoryTreeUtils treeUtil = new CategoryTreeUtils();        List list = iItemCategoryService.listCategory();        List categories = treeUtil.buildCategoryTree(list);
        mv.addObject("items" , items);
        mv.addObject("categories" , categories);        return mv;
    }    @GetMapping(value = "/doTest")    @ResponseBody
    public  String doTest(){        List itemBrands = iItemBrankService.listItemBrand();        String str = JSON.toJSON(itemBrands).toString();        return str;
    }


}

业务接口类：

 package com.muses.taoshop.item.service;import com.muses.taoshop.item.entity.ItemCategory;import com.muses.taoshop.item.entity.ItemList;import java.util.List;public interface IItemCategoryService {  
    
    List listCategory();

业务服务实现类:

  package com.muses.taoshop.item.service;import com.muses.taoshop.item.entity.ItemCategory;import com.muses.taoshop.item.entity.ItemList;import com.muses.taoshop.item.mapper.ItemCategoryMapper;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;import java.util.List;@Servicepublic class ItemCategoryServiceImpl implements IItemCategoryService{

    @Autowired
    ItemCategoryMapper itemCategoryMapper;    
    @Override
    public List listCategory() {        return itemCategoryMapper.listCategory();
    }

 


}

Mybatis相关代码：


  
    
    
    
    
    
  

  
    id,
        category_name as categoryName,
        sjid,
        last_modify_time as lastModifyTime,
        create_time as createTime  
  
    
    
        SELECT 
        
        FROM item_category t

Mapper接口类：

package com.muses.taoshop.item.mapper;import com.muses.taoshop.item.entity.ItemCategory;import com.muses.taoshop.item.entity.ItemList;import org.apache.ibatis.annotations.Mapper;import org.apache.ibatis.annotations.Param;import java.util.List;
@Mapperpublic interface ItemCategoryMapper {    List listCategory();

   
}

实体类：
这里用了lombok的jar来实现，所有不用set和get方法

package com.muses.taoshop.item.entity;import com.alibaba.fastjson.annotation.JSONField;import com.fasterxml.jackson.annotation.JsonFormat;import com.fasterxml.jackson.databind.annotation.JsonSerialize;import lombok.Data;import org.springframework.format.annotation.DateTimeFormat;import javax.validation.constraints.NotNull;import java.util.Date;import java.util.List;@Datapublic class ItemCategory {    
    private Long id;    
    private String categoryName;    
    private Long sjid;    
    @JSonField(format ="yyyy-MM-dd HH:mm:ss")
    private Date lastModifyTime;    
    @JSonField(format ="yyyy-MM-dd HH:mm:ss")
    private Date createTime;    
    private List subCategorys;


}

构建品类树的工具类：

package com.muses.taoshop.util;import com.muses.taoshop.item.entity.ItemCategory;import javax.mail.FetchProfile;import java.util.ArrayList;import java.util.List;public class CategoryTreeUtils {    public List commonCategorys;    public List list = new ArrayList();    public List buildCategoryTree(List categories ) {
        this.commonCategorys = categories;        for (ItemCategory c : categories){            ItemCategory category = new ItemCategory();            if(c.getSjid() == 0){
                category.setSjid(c.getSjid());
                category.setId(c.getId());
                category.setCategoryName(c.getCategoryName());
                category.setSubCategorys(treeChild(c.getId()));
                list.add(category);
            }
        }        return list;
    }    public List treeChild(long id){        List list = new ArrayList();        for(ItemCategory c : commonCategorys){            ItemCategory category = new ItemCategory();            if(c.getSjid() == id){
                category.setSjid(c.getSjid());
                category.setId(c.getId());
                category.setCategoryName(c.getCategoryName());
                category.setSubCategorys(treeChild(c.getId()));//递归循环
                list.add(category);
            }
        }        return list;
    }
}

前端代码：

实现的效果如图：可以说是3级联动

这是在开发中的开源项目的一个小功能，源码已经开源，github链接

原文出处：https://www.cnblogs.com/mzq123/p/9900355.html

电商门户网站商品品类多级联动SpringBoot+Thymeleaf实现

SpringBoot相关栏目本月热门文章