前端

Thymeleaf的简单使用

1.引入jar包

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

2.后端代码

package com.atguigu.gulimall.product.web;

import com.atguigu.gulimall.product.entity.CategoryEntity;
import com.atguigu.gulimall.product.service.CategoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;
import java.util.Map;

@Controller
public class IndexController {

    @Autowired
    CategoryService categoryService;

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

        //1.查出所有的一级分类
        List<CategoryEntity> categoryEntities = categoryService.getLevel1Categorys();
        model.addAttribute("categorys", categoryEntities);

        //视图解析器进行拼串
        //"classpath:/templates/" +返回值+ ".html"
        return "index";
    }
}

3.在resource下新建templates文件夹（页面都放进这里面）

<!--注意头部这边要引用 xmlns:th="http://www.thymeleaf.org"  才能使用Thymeleaf语法-->

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>谷粒商城2020</title>
  <link rel="stylesheet" href="/static/index/css/swiper-3.4.2.min.css">
  <link rel="stylesheet" href="/static/index/css/GL.css">
  <script src="/static/index/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>

  <script src="/static/index/js/swiper-3.4.2.jquery.min.js" type="text/javascript" charset="utf-8"></script>

  <script src="/static/index/js/swiper-3.4.2.min.js"></script>

</head>

<body>
<div class="top_find">
  <div class="top_find_son">
    <img src="/static/index/img/top_find_logo.png" alt="">
    <div class="input_find">
      <input type="text" placeholder="卸妆水" />
      <span style="background: url(/static/index/img/img_12.png) 0 -1px;"></span>
      <a href="#"><img src="/static/index/img/img_09.png" /></a>
    </div>
  </div>
</div>
<header>
  <div class="head">
    <a href="#"><img src="/static/index/img/img_01.png" /></a>
    <p>X</p>
  </div>
  </div>
  <!--轮播主体内容-->
  <div class="header_main">
    <div class="header_banner">
      <div class="header_main_left">
        <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>
      </div>
      <div class="header_main_center">
        <div class="swiper-container swiper1">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <a href="#"><img src="/static/index/img/lunbo.png" /></a>
            </div>

            <div class="swiper-slide">
              <a href="#"><img src="/static/index/img/lunbo3.png" /></a>
            </div>

            <div class="swiper-slide">
              <a href="#"><img src="/static/index/img/lunbo6.png" /></a>
            </div>
            <div class="swiper-slide">
              <a href="#"><img src="/static/index/img/lunbo7.png" /></a>
            </div>
          </div>
          <div class="swiper-pagination"></div>
          <div class="swiper-button-next swiper-button-white"></div>
          <div class="swiper-button-prev swiper-button-white"></div>
        </div>
        <div class="header_main_center_b">
          <a href="#"><img src="/static/index/img/5a13bf0bNe1606e58.jpg" /></a>
          <a href="#"><img src="/static/index/img/5a154759N5385d5d6.jpg" /></a>
        </div>
      </div>
      <div class="header_main_right">
        <div class="header_main_right_user">
          <div class="user_info">
            <div class="user_info_tou">
              <a href="#"><img class="" src="/static/index/img/touxiang.png"></a>
            </div>
            <div class="user_info_show">
              <p class="">Hi, 欢迎来到!</p>
              <p>
                <a href="#" class="">登录</a>
                <a href="#" class="">注册</a>
              </p>
            </div>
          </div>
          <div class="user_info_hide">
            <a href="#">新人福利</a>
            <a href="#">PLUS会员</a>
          </div>
        </div>
        <div class="header_main_right_new">
          <div class="header_new">
            <div class="header_new_t">
              <p class="active">
                <a href="#">促销</a>
              </p>
              <p>
                <a href="#">公告</a>
              </p>
              <a href="#">更多</a>
            </div>
            <div class="header_new_connter">
              <div class="header_new_connter_1">
                <ul>
                  <li>
                    <a href="#">全民纸巾大作战</a>
                  </li>
                  <li>
                    <a href="#">家具建材满999减300元</a>
                  </li>
                  <li>
                    <a href="#">黑科技冰箱，下单立减千元</a>
                  </li>
                  <li>
                    <a href="#">抢102减101神券！</a>
                  </li>
                </ul>
              </div>
              <div class="header_new_connter_1" style="display: none;">
                <ul>
                  <li>
                    <a href="#">关于召回普利司通（天津）轮胎有限公司2个规格乘用车轮胎的公告</a>
                  </li>
                  <li>
                    <a href="#">物流推出配送员统一外呼电话"95056”</a>
                  </li>
                  <li>
                    <a href="#">天府大件运营中心开仓公告</a>
                  </li>
                  <li>
                    <a href="#">大件物流“送装一体”服务全面升级！</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="header_main_right_ser">
          <div class="ser_box">
            <ul>
              <li class="ser_box_item">
                <a href="#">
                  <img src="/static/index/img/huafei.png" />
                  <span>话费</span>
                </a>
              </li>
              <li class="ser_box_item">
                <a href="#">
                  <img src="/static/index/img/jipiao.png" />
                  <span>机票</span>
                </a>
              </li>
              <li class="ser_box_item">
                <a href="#">
                  <img src="/static/index/img/jiudian.png" />
                  <span>酒店</span>
                </a>
              </li>
              <li class="ser_box_item">
                <a href="#">
                  <img src="/static/index/img/youxi.png" />
                  <span>游戏</span>
                </a>
              </li>
              <li class="ser_box_item1">
                <a href="#">
                  <img src="/static/index/img/qiyegou.png" />
                  <span>企业购</span>
                </a>
              </li>
              <li class="ser_box_item1">
                <a href="#">
                  <img src="/static/index/img/jiayouka.png" />
                  <span>加油卡</span>
                </a>
              </li>
              <li class="ser_box_item1">
                <a href="#">
                  <img src="/static/index/img/dianyingpiao.png" />
                  <span>电影票</span>
                </a>
              </li>
              <li class="ser_box_item1">
                <a href="#">
                  <img src="/static/index/img/huochepiao.png" style="height:20px;" />
                  <span>火车票</span>
                </a>
              </li>
              <li class="ser_box_item1">
                <a href="#">
                  <img src="/static/index/img/zhongchou.png" />
                  <span>众筹</span>
                </a>
              </li>
              <li class="ser_box_item1">
                <a href="#">
                  <img src="/static/index/img/licai.png" style="height:22px;" />
                  <span>理财</span>
                </a>
              </li>
              <li class="ser_box_item1">
                <a href="#">
                  <img src="/static/index/img/lipinka.png" style="height:14px;" />
                  <span>礼品卡</span>
                </a>
              </li>
              <li class="ser_box_item1">
                <a href="#">
                  <img src="/static/index/img/baitiao.png" style="height:20px;" />
                  <span>白条</span>
                </a>
              </li>
            </ul>
            <div class="ser_box_aaa">
              <div class="ser_box_aaa_one">
                <div class="ser_box_aaa_nav">
                  <ol>
                    <li class="active">
                      <a href="#">话费</a>
                    </li>
                    <li>
                      <a href="#">机票</a>
                    </li>
                    <li>
                      <a href="#">酒店</a>
                    </li>
                    <li>
                      <a href="#">游戏</a>
                    </li>
                  </ol>
                  <div class="ser_ol">
                    <div class="ser_ol_li">
                      <ul>
                        <div class="guanbi">X</div>
                        <a class="active">话费充值</a>
                        <a>流量充值</a>
                        <a>套餐变更</a>
                        <div class="ser_ol_div">
                          <p>号码<input type="text" /></p>
                          <p style="margin: 10px 0;">面值
                            <select name="">
                              <option value="">100元</option>
                              <option value="">20元</option>
                              <option value="">50元</option>
                              <option value="">10元</option>
                              <option value="">2元</option>
                            </select>
                            <span>￥98.0-￥100.0</span></p>
                        </div>
                        <button>快速充值</button>
                        <p class="p">抢99减50元话费</p>
                      </ul>

                    </div>
                    <div class="ser_ol_li">
                      <ul>
                        <div class="guanbi">X</div>
                        <a class="active">国际机票</a>
                        <a>国际/港澳</a>
                        <a>特惠活动</a>
                        <div class="ser_ol_div1">
                          <p>
                            <input type="radio" name="a" style="vertical-align:middle;" />单程
                            <input type="radio" name="a" style="vertical-align:middle;" />往返
                          </p>
                          <input type="text" placeholder="出发城市" />
                          <input type="text" placeholder="到达城市" />
                          <input type="text" placeholder="日期" />
                        </div>
                        <button>机票查询</button>
                        <span class="p">当季热门特惠机票</span>
                      </ul>
                    </div>
                    <div class="ser_ol_li">
                      <ul>
                        <div class="guanbi">X</div>
                        <a class="active" style="width: 50%;">国内港澳台</a>
                        <a style="width: 50%;">促销活动</a>
                        <div class="ser_ol_div1">
                          <input type="text" placeholder="出发城市" style="margin-top: 10px;" />
                          <input type="text" placeholder="到达城市" />
                          <input type="text" placeholder="日期" />
                          <input type="text" placeholder="酒店 商圈 地标" />
                        </div>
                        <button>酒店查询</button>
                        <span class="p">订酒店到</span>
                      </ul>
                    </div>
                    <div class="ser_ol_li">
                      <ul>
                        <div class="guanbi">X</div>
                        <a class="active">点卡</a>
                        <a>QQ</a>
                        <a>页游</a>
                        <div class="ser_ol_div1">
                          <input type="text" placeholder="游戏" style="margin-top: 15px;" />
                          <br />面值
                          <select name="" style="margin: 8px 0;">
                            <option value="">面值</option>
                            <option value="">面值</option>
                            <option value="">面值</option>
                          </select><span style="color: #C81623;">￥0.00</span>
                          <p>
                            <input type="radio" name="a" style="width: 15px;vertical-align:middle;" />直充
                            <input type="radio" name="a" style="width: 15px;vertical-align:middle;" />卡密
                          </p>
                        </div>
                        <button>快速充值</button>
                        <span class="p">吃鸡就要快人一步</span>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
</body>

<script type="text/javascript" src="/static/index/js/text.js"></script>
<script type="text/javascript" src="/static/index/js/header.js"></script>
<script type="text/javascript" src="/static/index/js/secend.js"></script>
<script type="text/javascript" src="/static/index/js/zz.js"></script>
<script type="text/javascript" src="/static/index/js/index.js"></script>
<script type="text/javascript" src="/static/index/js/left,top.js"></script>
<script type="text/javascript" src="/static/index/js/catalogLoader.js"></script>
</html>

4.简单语法示例，更多语法参考官网https://www.thymeleaf.org/doc/tutorials/3.1/usingthymeleaf.html

<!--后端传送了一个叫 home 的数据-->
<p th:text="#{home.welcome}">Welcome to our grocery store!</p>

<!--后端传送了一个叫 categorys 的数据,进行遍历，遍历出的每个数据叫 category -->
<li  th:each="category : ${categorys}"><li>

5.修改Thymeleaf的文件后能及时在页面更新，则要关闭缓存

spring:
  thymeleaf:
    cache: false

6.如果resource下的static文件读取不到时，可以加入以下配置或者在pom文件中加入

spring:
  mvc:
    static-path-pattern: /static/**

或者在pom文件中加入以下配置

<resources>
    <resource>
        <filtering>false</filtering>
        <directory>src/main/resources</directory>
        <includes>
            <include>**/*.properties</include>
            <include>**/*.xml</include>
            <include>**/*.yml</include>
            <include>static/**</include>
        </includes>
    </resource>
</resources>
# Thymeleaf

评论

暂无

添加新评论