谷粒商城:16.商城业务 — 首页

在这里插入图片描述

一、整合thymeleaf渲染首页

1.1. 引入依赖

在这里插入图片描述

1.2. 引入界面

resources/static中放静态资源,在resources/template中放模板引擎,index和template模板都放到里面

在这里插入图片描述

1.3. 配置thymeleaf

  1. 关闭缓存

    spring:
      thymeleaf:
        cache: false
    

    在这里插入图片描述

  2. 配置文件目录前缀后缀

1.4. 新建web文件目录

新建web文件目录,将所有web相关controller都放到web目录下

将controller改为app

在这里插入图片描述

1.5. 总结

模板引擎

  1. thymeleaf-starter:关闭缓存

  2. 静态资源都放在static文件夹下就可以按照路径直接访问

  3. 页面放在templates下,直接访问

    SpringBoot,访问项目的时候,默认会找index

  4. 页面修改不重启服务器实时更新

    • 引入dev-tools
    • 修改完页面 controller shift f9重新自动编译下页面,代码配置,推荐重启

二、整合devtools渲染一级分类数据

2.1. 配置/和/index均可访问首页

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

    System.out.println("" + Thread.currentThread().getId());
    //TODO 1、查出所有的1级分类
    List<CategoryEntity> categoryEntities = categoryService.getLevel1Categorys();

    // 视图解析器进行拼串:
    // classpath:/templates/ +返回值+  .html
    model.addAttribute("categorys", categoryEntities);
    return "index";
}

在这里插入图片描述

2.2. 配置页面修改不重启服务器实时更新

  1. 引入devtools

    在这里插入图片描述

  2. 修改完页面,使用ctrl + shift + F9重新自动编译下页面即可。

    代码配置的话,推荐重启

2.3. thymeleaf使用

2.3.1. 获取值

使用th:text绑定值

${category.name}

2.3.2. 绑定值

使用th:attr="属性=值"可以绑定值

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

每个a标签的值是category.name,同时有一个属性ctg-data为category.catId

三、渲染二级三级分类数据

编写获取二级、三级分类JSON接口

//index/catalog.json
@ResponseBody
@GetMapping("/index/catalog.json")
public Map<String, List<Catelog2Vo>> getCatalogJson() {
    Map<String, List<Catelog2Vo>> catalogJson = categoryService.getCatalogJson();
    return catalogJson;
}

在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

KaiSarH

如果觉得文章不错,可以支持下~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值