電商專案——全文檢索-ElasticSearch——第一章——中篇
電商專案——商城業務-商品上架——第二章——中篇
電商專案——商城業務-首頁——第三章——中篇
電商專案——性能壓測——第四章——中篇
文章目錄
- 1：整合thymeleaf渲染頁
- 2：整合dev-tools渲染一級分類資料
- 3：渲染二級三級分類資料
- 4：nginx-搭建域名訪問環境一（反向代理配置）
- 5：nginx-搭建域名訪問環境二（負載均衡到網關）
1：整合thymeleaf渲染頁
前面我們撰寫了商品上架功能，讓我們可以在后臺點擊商品上架按鈕進行上架
接下來我們開發整個商城的前端界面，包括首頁內容，檢索內容，購物車，訂單等
在mall-product中調通前后端不分離的效果，
第一步：匯入thymeleaf
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
第二步：引入首頁資源和專門寫一個web來實作頁面跳轉的功能
成功啟動訪問，出現如下頁面，成功
2：整合dev-tools渲染一級分類資料
我們接下來就來開發頁面跳轉功能，這個時候就不用@restcontroller了
而是@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;
}
想要使用thymeleaf就要給thymeleaf加上名稱空間
<html lang="en" xmlns:th="http://www.thymeleaf.org">
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：渲染二級三級分類資料
我們再來完善一個功能，對應顯示這個一級選單里面的二級選單和三級選單
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;
}
4：nginx-搭建域名訪問環境一（反向代理配置）
nginx-搭建域名訪問環境
5：nginx-搭建域名訪問環境二（負載均衡到網關）
nginx-搭建域名訪問環境
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/200439.html
標籤：其他
上一篇：JAVA 例外處理
下一篇：字位擴展例題（兩問）