E-commerce project-mall business-home page-chapter three-medium

E-commerce project-full text search-ElasticSearch-Chapter One-Medium
E-commerce Project-Mall Business-Commodity Listing-Chapter Two-Medium
E-commerce Project-Mall Business-Home-Third Chapter-Medium
E-commerce Project-Performance Stress Test-Chapter Four-Medium

1: Integrate thymeleaf rendering page

Earlier, we wrote the product shelf function, so that we can click the product shelf button in the background to put it on the shelf.
Next, we develop the front-end interface of the entire mall, including the home page content, retrieval content, shopping cart, order, etc.,
Insert picture description here
in mall-product. The effect of non-separation.
Step 1: Import thymeleaf

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>

Step 2: Introduce homepage resources and write a web specifically to realize the function of page jump.
Insert picture description here
Insert picture description here
Successfully start the visit, the following page appears, success
Insert picture description here

2: Integrate dev-tools to render first-level classification data

Next, let’s develop the page jump function. At this time, we don’t need @restcontroller,
but @controller
mall-product
IndexController.

@Controller
public class IndexController {
    
    

    @Autowired
    CategoryService categoryService;

    @GetMapping({
    
    "/","/index.html"})
    public String indexPage(Model model){
    
    

        //todo 1:查出所有的1级分类
        List<CategoryEntity> categoryEntities= categoryService.getLevel1Category();

        model.addAttribute("categorys",categoryEntities);
        return "index";
    }

CategoryServiceImpl

public class CategoryServiceImpl extends ServiceImpl<CategoryDao, CategoryEntity> implements CategoryService {
    
    

 @Override
    public List<CategoryEntity> getLevel1Category() {
    
    

        QueryWrapper<CategoryEntity> parent_cid = new QueryWrapper<CategoryEntity>().eq("parent_cid", 0);

        List<CategoryEntity> categoryEntities = baseMapper.selectList(parent_cid);
        return categoryEntities;
    }

To use thymeleaf, add a namespace to thymeleaf

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

Insert picture description here
Insert picture description here
mall-product
index.html

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

          </ul>

        </div>

3: Render secondary and tertiary classification data

Let’s improve a function to display the second-level menu and the third-level menu in this first-level menu.

Insert picture description here
Insert picture description here
mall-product
vo

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Catelog2Vo {
    
    
    public String catalog1Id;//一级分类id
    private List<Object> catalog3List;//三级子分类
    private String id;
    private String name;
        @Data
    @NoArgsConstructor
    @AllArgsConstructor
    public static class  Catelog3Vo{
    
    

        private String catalog2Id;//父分类,2级分类id
        private String id;
        private String name;
    }
}

web
IndexController

@Controller
public class IndexController {
    
    

    @Autowired
    CategoryService categoryService;
    //以json格式返回
    @ResponseBody
    @GetMapping("index/json/catalog.json")
    public  Map<String, List<Catelog2Vo>> getCatalogJson(){
    
    
        Map<String, List<Catelog2Vo>> indexJson=categoryService.getCatalogJson();
        return indexJson;
    }

CategoryServiceImpl

@Override
    public Map<String, List<Catelog2Vo>> getCatalogJson() {
    
    

        //1:查出所有1级分类
        List<CategoryEntity> level1Category = this.getLevel1Category();

        //2:封装数据
        Map<String, List<Catelog2Vo>> parent_cid = level1Category.stream().collect(Collectors.toMap(k -> k.getCatId().toString(), v -> {
    
    
            // 1.每一个的一级分类,查到这个一级分类的二级分类
            List<CategoryEntity> categoryEntities = baseMapper.selectList(new QueryWrapper<CategoryEntity>().eq("parent_cid", v.getCatId()));
            //2:封装上面的结果
            List<Catelog2Vo> catelog2Vos = null;
            if (categoryEntities != null) {
    
    
                catelog2Vos = categoryEntities.stream().map(item -> {
    
    
                    Catelog2Vo catelog2Vo = new Catelog2Vo(v.getCatId().toString(), null, item.getCatId().toString(), item.getName());

                    //1.给当前二级分类的三级分类封装成vo
                    List<CategoryEntity> level3Category = baseMapper.selectList(new QueryWrapper<CategoryEntity>().eq("parent_cid", item.getCatId()));
                    //2:封装成指定格式

                    if (level3Category!=null){
    
    
                        List<Catelog2Vo.Catelog3Vo> collect = level3Category.stream().map(items -> {
    
    
                            Catelog2Vo.Catelog3Vo catelog3Vo = new Catelog2Vo.Catelog3Vo(item.getCatId().toString(),items.getCatId().toString(),items.getName());

                            return catelog3Vo;

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

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

            return catelog2Vos;
        }));

        return parent_cid;
    }

Insert picture description here

4: nginx-building domain name access environment 1 (reverse proxy configuration)

Nginx- build a domain name access environment

5: nginx-building domain name access environment 2 (load balancing to gateway)

Nginx- build a domain name access environment

Guess you like

Origin blog.csdn.net/qq_44891295/article/details/109348059