一、商城系統首頁

　　nginx發給閘道器叢集，閘道器再路由到微服務

　　靜態資源放到nginx中

1、整合 thymeleaf 渲染首頁

模板引擎總結
（a）thymeleaf-starter：關閉快取
（b）靜態資源都放在static資料夾下就可以按照路徑直接訪問
（c）頁面放在templates下，直接訪問
　　springboot訪問專案的時候，預設會找index
（d）頁面修改不重啟伺服器實時更新
　　（1）引入dev-tools
　　（2）修改完頁面 ctrl + shift + f9 重新自動編譯下頁面，程式碼配置，推薦重啟

（1）gulimall-product 匯入thymeleaf依賴、熱部署依賴devtools使頁面實時生效

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-devtools</artifactId>
   <optional>true</optional>
</dependency>

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

（2）html\首頁資源\index放到gulimall-product下的static資料夾
　　把index.html放到templates中

（3）修改application.yml，關閉快取

thymeleaf:
  cache: false #關閉快取
  prefix: classpath:/templates/
  suffix: .html

　（4）web開發放到web包下，原來的controller是前後分離對接手機等訪問的，所以可 以改成app，對接app應用

　（5）啟動gulimall-product

　　訪問 http://localhost:10000

　　http://localhost:10000/index/css/GL.css

　　注意：springboot訪問專案的時候，預設會找index

2、整合dev-tools渲染一級分類資料

剛匯入index.html時，裡面的分類選單都是寫死的，我們要訪問資料庫拿到放到model中，然後在頁面foreach填入

（1）新增檔案com.atguigu.gulimall.product.web.IndexController

package com.atguigu.gulimall.product.web;

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

import java.util.List;

@Controller
public class IndexController {

    @Autowired
    CategoryService categoryService;

    /**
     * 跳轉首頁並且查詢一級分類
     * @param model
     * @return
     */
    @GetMapping(value = {"/","index.html"})
    private String indexPage(Model model) {
        //1、查出所有的一級分類
        List<CategoryEntity> categoryEntities = categoryService.getLevel1Catagories();
        model.addAttribute("categories",categoryEntities);
        return "index";
    }
}

（2）新增介面和實現類方法 getLevel1Catagories

/**
 * 查詢一級分類
 * @return
 */
@Override
public List<CategoryEntity> getLevel1Catagories() {
    return baseMapper.selectList(new QueryWrapper<CategoryEntity>().eq("parent_cid",0));
}

（3）頁面遍歷選單資料
　　注意，把html 的名稱空間，改成：xmlns:th="http://www.thymeleaf.org 會有語法提示

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

　（4）效果

　　訪問：http://localhost:10000/

　　注意：這裡二級和三級分類出現了，是因為 index.html 引入了catalogLoader.js，而 catalogLoader.js 讀取了catalog.json

3、渲染二級三級分類資料

上面2中展示的二級和三級分類資料是json裡面寫死的，這裡我們來改造一下，讓他從資料庫讀取

（1）刪除 resource 下的 /static/index/json 資料夾

（2）com.atguigu.gulimall.product.web.IndexController 新增方法 getCatalogJson

@ResponseBody
@GetMapping(value = "/index/json/catalog.json")
public Map<String, List<Catelog2Vo>> getCatalogJson(){
    Map<String, List<Catelog2Vo>> map = categoryService.getCatalogJson();
    return map;
}
（3）com.atguigu.gulimall.product.service.impl.CategoryServiceImpl 新增介面實現類方法 getCatalogJson

@Override
public  Map<String, List<Catelog2Vo>> getCatalogJson() {
    List<CategoryEntity> entityList = baseMapper.selectList(null);
    //1、查詢所有一級分類
    List<CategoryEntity> level1Catagorys = getLevel1Catagories();

    //2、封裝資料
    Map<String, List<Catelog2Vo>> parent_cid = level1Catagorys.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(l2 -> {
                Catelog2Vo catelog2Vo = new Catelog2Vo(v.getCatId().toString(), null, l2.getCatId().toString(), l2.getName());
                //1、找當前二級分類的三級分類封裝成vo
                List<CategoryEntity> level3Catalog = baseMapper.selectList(new QueryWrapper<CategoryEntity>().eq("parent_cid", l2.getCatId()));
                if(level3Catalog!=null){
                    List<Catelog2Vo.Category3Vo> collect = level3Catalog.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(collect);
                }
                return catelog2Vo;
            }).collect(Collectors.toList());
        }
        return catelog2Vos;
    }));
    return parent_cid;
}

（4）測試
　　訪問：http://localhost:10000/index/json/catalog.json

　　訪問：http://localhost:10000

4、nginx-搭建域名訪問環境一（反向代理配置）