SpringCloud商城day08 商品详情页-2021-10-14

最新推荐文章于 2024-06-15 12:23:02 发布

OOPfaker

最新推荐文章于 2024-06-15 12:23:02 发布

阅读量163

点赞数

分类专栏：项目复习笔记文章标签： html

本文链接：https://blog.csdn.net/Oppuser/article/details/120770139

版权

一. Thymeleaf入门

1. thymeleaf: 页面静态化技术 -> 提前生成静态资源 -> 用户访问时加载到浏览器-> 提高访问效率减少占用资源

Thymeleaf is a modern server-side Java template engine for both web and standalone environments.

2. SpringMVC整合thymeleaf模块 -> 六种模板

3. 创建springboot工程 -> 依赖starter-web/thymeleaf -> 启动类ThymeleafApplication.java

(1) yml配置: spring.thymeleaf.cache: false //页面加载时关闭缓存
(2) 新建页面 resourece/templates/*.html

4. thymeleaf语法:

(1) <html xmlns:th="http://www.thymeleaf.org">
    //表单提交
    <p th:text="${hello}"></p>
    <form th:action="@{/demo/test}">
        <input th:type="text" th:name="id">  //输入框属性名
        <button>提交</button>
    </form>
(2) 遍历对象: 
    <tr th:each="user, userStat:${userList}" >
        <td>
            <span th:text="${userStat.index}"></span>  // 0 1 2
        </td>
        <td th:text="${user.id}"></td>  // 1 2 3
    </tr>
(3) Map输出:
    <div th:each="map, mapStat:${dataMap}">
        <div th:text="${map}"></div>
        <span th:text="${mapStat.current.key}"></span>   //取键
        <span th:text="${mapStat.current.value}"></span> //取值
    </div>
(4) 数组输出:
    <div th:each="array, arrayStat:${names}">
        <span th:text="{arrayStat.count}"></span> //count属性 从1开始
    </div>
(5) 日期输出:
    <div th:text="${#dates.format(now, 'yyyy-MM-dd HH:mm:ss')}">
      
    </div>
(6) 条件判断:
    <div>
        <span th:if="${(age>=18)}">符合条件则输出</span>
    </div>
(7) 创建页面模块footer.html
 -> 引入命名空间 <html xmlns:th="http://www.thymeleaf.org">
 -> fragment模块:  <div id="C" th:fragment="copy"></div>
 -> demo.html引入模块: <div id="F" th:include="footer::copy"></div>

(8) th:utext="直接解析自带html标签"

二. 搜索页面渲染

1. 需求: 显示用户勾选的搜索条件+商品属性规格+商品搜索结果集合

2. 实现: 客户端搜索 -> 搜索微服务查询索引 -> thymeleaf渲染静态化页面 -> 返回页面;

3. 步骤:

1. search微服务
(1) 添加thymeleaf依赖: spring-boot-starter-thymeleaf
(2) yml配置文件: thymeleaf.cache: false
(3) 添加页面静态化资源: 
    1) resources/static/js/img/css
    2) resources/templates/html
(4) 更新SearchController.java
    1)  类注解:@Controller   //不用@RestController, 新增方法返回值不是JSON
    2) 添加方法
    @GetMapping()
    public String list(){
        //特殊符号处理
        this. handleSearchMap(searchMap);
        //获取查询结果
        Map resultMap = searchService.search(searchMap);
        //携带数据
        model.addAttribute("searchMap", searchMap);
        model.addAttributes("resultMap", resultMap);
        //跳转搜索页面

最低0.47元/天解锁文章

OOPfaker

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringCloud商城day08 商品详情页-2021-10-14

一. Thymeleaf入门1. thymeleaf: 页面静态化技术 -> 提前生成静态资源 -> 用户访问时加载到浏览器-> 提高访问效率减少占用资源Thymeleaf is a modern server-side Java template engine for both web and standalone environments.2. SpringMVC整合thymeleaf模块 -> 六种模板3. 创建springboot工程 -> 依赖sta.
复制链接

扫一扫