栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

谷粒商城高级篇-首页-整合thymeleaf渲染三级类目

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

谷粒商城高级篇-首页-整合thymeleaf渲染三级类目

目录

整合Thymeleaf渲染首页

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

渲染二级三级分类数据


整合Thymeleaf渲染首页

谷粒商城前端的代码请自行下载

为了分担服务的压力,将服务的静态资源部署到nginx中从而实现动静分离

最终目的 :

 整合thymeleaf

①product服务中导入thymeleaf依赖


    org.springframework.boot
    spring-boot-starter-thymeleaf

② 配置thymeleaf,关闭缓存,为了在生产环境下可以实时看到数据

③ 创建一个web包用于编写页面跳转的controller,可以将之前的controller包更名为app

④将首页资源中的index文件夹复制到static文件夹下,将index.html复制到templates文件夹下

 Springboot中的static用于存放静态资源

 

 SpringBoot静态资源的访问

SpringBoot自动配置,将默认访问index.html

自动加载资源的原理如下: 

ctrl+n

 找到WelcomePageHandlerMapping中的getStaticPathPattern()方法,点击进去

 点击staticPathPattern

 

 

 

所有访问/**的路径都会去类路径下的 /META-INF/resources/ 、/resources/ 、/static/ 、/public/ 下查找

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

配置访问localhost:10000/或者localhost:10000/index.html来到首页的映射

GetMapping中默认存放是一个数组,可以多路径映射

由于thymeleaf的默认前缀为:classpath:/tempaltes/ ,默认后缀为:.html

视图解析器会进行一个拼接:默认前缀+"返回值"+默认后缀

查出一级类目,使用Model对象封装

thymeleaf官方地址:Thymeleaf

将thymeleaf的使用文档pdf下载下来

thymeleaf的使用步骤: 

①加入名称空间

 xmlns:th="http://www.thymeleaf.org"

 取出使用thymeleaf取出一级分类,取值表达式在第四章

 

 重启服务查看

由于更新页面每次重启非常麻烦,因此,页面修改时不重启服务达到实时更新

①导入dev-tools依赖

  

      org.springframework.boot
      spring-boot-devtools
      true

 细节:optional一定写true,这才把工具真正的导入进来了

加入了这个工具都会有如下标签:

②ctrl+F9 或 ctrl+shift+F9 重新自动编辑页面,前提:thymeleaf的缓存关闭否则无效;代码配置,推荐重启

index.html的类目是写死的,现在需要动态的取出一级类目,需要用到thymeleaf的遍历,遍历在使用文档的第六章 

出现问题:页面不显示数据

出现原因:没有遍历

解决方案如下:

将key改为categorys

自定义属性存放catId,thymeleaf的自定义属性赋值在pdf的第五章

渲染二级三级分类数据

当鼠标移动到一级类目上就要显示它的二级类目、三级类目

调用的是js文件夹下的catelogLoader.js

请求的是json文件下的catalog.json数据 

使用json在线转化工具将json数据转化为对象 

第一级的对象是String,Object,其中String是一级类目的catId

 第二级对象以及第三级对象

 编写Vo

编写接口 

 

查看结果

复制数据将其转化为对象 

 

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/820367.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号