大型商城:商城业务-首页

整合thymeleaf渲染首页

引入依赖

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

(1)关闭thymeleaf的缓存

thymeleaf: cache: false

(2)静态资源都放在static文件夹就可以按照路径进行访问

(3)页面全部放在templates下面,直接访问springboot默认会找index

整合dev-tools渲染一级分类数据

 

修改html不重启服务器就能生效,引入dev-tools工具

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

修改完之后,Ctrl+shift+F9 重新构建项目


将查出来的一级分类放入model,thymeleaf可${categorys}拿到

    @GetMapping({"/","index.html"})
    public String indexPage(Model model){
        //TODO 1.查出所有一级分类
        List<CategoryEntity> categoryEntities = categoryService.getLevel1Categorys();

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

thymeleaf示例:

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

 渲染二级三级分类数据

获取全部分类并转为指定的格式:com.tinstu.gulimall.product.service.impl.CategoryServiceImpl

相关js:  gulimall-product/src/main/resources/static/index/js/catalogLoader.js

 

阅读剩余
THE END