电商项目——全文检索-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-搭建域名访问环境
