商城首页-整合thymeleaf

最新推荐文章于 2022-09-07 11:09:36 发布

Java小生不才

最新推荐文章于 2022-09-07 11:09:36 发布

阅读量486

点赞数

本文链接：https://blog.csdn.net/qq_41596346/article/details/122054082

版权

谷粒商城同时被 2 个专栏收录

62 篇文章 1 订阅

订阅专栏

thymeleaf

12 篇文章 0 订阅

订阅专栏

1.引入依赖

在gulimall-product项目的pom文件中加入thymeleaf的依赖

<!-- 模板引擎 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2.导入资料中的首页资源

在这里插入图片描述
将index导入static中，将index.html导入templates

3.在application.yml中配置thymeleaf

spring:
  datasource:
    username: root
    password: root
    url: jdbc:mysql://192.168.56.10:3306/gulimall_pms
    driver-class-name: com.mysql.jdbc.Driver

  cloud:
    nacos:
      discovery:
        server-addr: 127.0.0.1:8848
    alicloud:
      access-key: LTAI5tCwSsEYQkCMdANL8xQ3
      secret-key: ycklINlm4j24G4XO8zwbSGo4BniKz4
      oss:
        endpoint: oss-cn-beijing.aliyuncs.com

  application:
    name: gulimall-product

  jackson:
    date-format: yyyy-MM-dd HH:mm:ss

  thymeleaf:
    cache: false #关闭缓存



mybatis-plus:
  mapper-locations: classpath:/mapper/**/*.xml
  global-config:
    db-config:
      id-type: auto #主键自增
      logic-delete-value: 1      #逻辑已删除值(默认为 1)
      logic-not-delete-value: 0  #逻辑未删除值(默认为 0)

server:
  port: 10000

  
logging:
  level:
    com.atguigu.gulimall: debug

4.thymeleaf小结

引入spring-boot-starter-thymeleaf
配置文件中关闭缓存
静态资源都放在static文件夹下，就可按照路径直接访问
页面放在templates下，就可直接访问
SpringBoot访问项目默认找index页面
默认访问index.html

默认的静态资源配置

默认的前后缀配置

5.新建web包

package com.atguigu.gulimall.product.web;

import com.atguigu.gulimall.product.entity.CategoryEntity;
import com.atguigu.gulimall.product.service.CategoryService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

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


/**
 * 首页
 * @author zfh
 * @email hst1406959716@163.com
 * @date 2021-12-16 09:40:46
 */
@Controller
public class IndexController {
    @Resource
    private CategoryService categoryService;

    @GetMapping(value = {"/","index.html"})
    private String indexPage(Model model) {
        //查出所有的一级分类
        List<CategoryEntity> categoryEntityList = categoryService.getTopCategorys();
        model.addAttribute("categoryEntityList",categoryEntityList);

        return "index";
    }
}

6.CategoryService中添加getTopCategorys方法

/**
 * 查询所有1级分类
 * @return
 */
List<CategoryEntity> getTopCategorys();

7.CategoryServiceImpl中添加getTopCategorys方法实现

/**
 * 查询所有1级分类
 * @return
 */
 @Override
 public List<CategoryEntity> getTopCategorys() {
     List<CategoryEntity> categoryEntityList = this.baseMapper.selectList(
             new QueryWrapper<CategoryEntity>().eq("parent_cid", 0));
     return categoryEntityList;
 }

8.编辑index.html

<html lang="en" xmlns:th="http://www.thymeleaf.org">

在这里插入图片描述

 <li  th:each="category : ${categoryEntityList}">
        <a href="#" class="header_main_left_a"   th:attr="ctg-data = ${category.catId}"><b th:text="${category.name}">家用电器</b></a>
  </li>

在这里插入图片描述

9.修改catelogLoader.js

$(function(){
    $.getJSON("index/catalog.json",function (data) {
        var ctgall=data;
        $(".header_main_left_a").each(function(){
            var ctgnums= $(this).attr("ctg-data");
            if(ctgnums){
                var panel=$("<div class='header_main_left_main'></div>");
                var panelol=$("<ol class='header_ol'></ol>");
                var  ctgnumArray = ctgnums.split(",");
                $.each(ctgnumArray,function (i,ctg1Id) {
                    var ctg2list= ctgall[ctg1Id];
                    $.each(ctg2list,function (i,ctg2) {
                        var cata2link=$("<a href='#' style= 'color: #111;' class='aaa'>"+ctg2.name+"  ></a>");

                        console.log(cata2link.html());
                        var li=$("<li></li>");
                        var  ctg3List=ctg2["catalog3List"];
                        var len=0;
                        $.each(ctg3List,function (i,ctg3) {
                            var cata3link = $("<a href=\"http://search.gmall.com/list.html?catalog3Id="+ctg3.id+"\" style=\"color: #999;\">" + ctg3.name + "</a>");
                            li.append(cata3link);
                            len=len+1+ctg3.name.length;
                        });
                        if(len>=46&&len<92){
                            li.attr("style","height: 60px;");
                        }else if(len>=92){
                            li.attr("style","height: 90px;");
                        }
                        panelol.append(cata2link).append(li);
                    });
                });
                panel.append(panelol);
                $(this).after(panel);
                $(this).parent().addClass("header_li2");
                console.log($(".header_main_left").html());
            }
        });
    });
});

10.Catelog2Vo

package com.atguigu.gulimall.product.vo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.List;

/**
 * 二级分类VO
 * @author zfh
 * @email hst1406959716@163.com
 * @date 2021-12-15 09:47:46
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Catelog2Vo {

    /**
     * 一级父分类的id
     */
    private String catalog1Id;

    /**
     * 三级子分类
     */
    private List<Category3Vo> catalog3List;

    private String id;

    private String name;


    /**
     * 三级分类vo
     */
    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    public static class Category3Vo {

        /**
         * 父分类、二级分类id
         */
        private String catalog2Id;

        private String id;

        private String name;
    }

}

11.IndexController中添加getCatalogJson方法

/**
 * 渲染对应的二三级分类数据
 * @return
 */
@GetMapping(value = "/index/catalog.json")
@ResponseBody
public Map<String, List<Catelog2Vo>> getCatalogJson() {
    Map<String, List<Catelog2Vo>> catalogJson = categoryService.getCatalogJson();
    return catalogJson;
}

12.CategoryService中添加getCatalogJson方法

Map<String, List<Catelog2Vo>> getCatalogJson();

13.CategoryServiceImpl中添加getCatalogJson方法实现

 /**
  * 渲染对应的二三级分类数据
  * @return
  */
 @Override
 public Map<String, List<Catelog2Vo>> getCatalogJson() {
      System.out.println("查询了数据库");

      //将数据库的多次查询变为一次
      List<CategoryEntity> selectList = this.baseMapper.selectList(null);

      //1、查出所有分类
      //1、1）查出所有一级分类
      List<CategoryEntity> level1Categorys = getParent_cid(selectList, 0L);

      //封装数据
      Map<String, List<Catelog2Vo>> parentCid = level1Categorys.stream().collect(Collectors.toMap(k -> k.getCatId().toString(), v -> {
          //1、每一个的一级分类,查到这个一级分类的二级分类
          List<CategoryEntity> categoryEntities = getParent_cid(selectList, v.getCatId());

          //2、封装上面的结果
          List<Catelog2Vo> catelog2Vos = null;
          if (categoryEntities != null) {
              catelog2Vos = categoryEntities.stream().map(l2 -> {
                  Catelog2Vo catelog2Vo = new Catelog2Vo(v.getCatId().toString(), null, l2.getCatId().toString(), l2.getName().toString());

                  //1、找当前二级分类的三级分类封装成vo
                  List<CategoryEntity> level3Catelog = getParent_cid(selectList, l2.getCatId());

                  if (level3Catelog != null) {
                      List<Catelog2Vo.Category3Vo> category3Vos = level3Catelog.stream().map(l3 -> {
                          //2、封装成指定格式
                          Catelog2Vo.Category3Vo category3Vo = new Catelog2Vo.Category3Vo(l2.getCatId().toString(), l3.getCatId().toString(), l3.getName());

                          return category3Vo;
                      }).collect(Collectors.toList());
                      catelog2Vo.setCatalog3List(category3Vos);
                  }

                  return catelog2Vo;
              }).collect(Collectors.toList());
          }

          return catelog2Vos;
      }));

      return parentCid;
  }

  private List<CategoryEntity> getParent_cid(List<CategoryEntity> selectList,Long parentCid) {
      List<CategoryEntity> categoryEntities = selectList.stream().filter(item -> item.getParentCid().equals(parentCid)).collect(Collectors.toList());
      return categoryEntities;
      // return this.baseMapper.selectList(
      //         new QueryWrapper<CategoryEntity>().eq("parent_cid", parentCid));
  }

Java小生不才

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
商城首页-整合thymeleaf

1.引入依赖在gulimall-product项目的pom文件中加入thymeleaf的依赖<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>2.导入资料中的首页资源将in
复制链接

扫一扫