商品详细页面(item项目的创建和thymeleaf的引入)

1 创建一个item-web的商品详情工程
2 配置item-web,pom,properites文件
3 引入thymeleaf的依赖,thymeleaf是springboot的原生渲染模板,只需要在web通用依赖加入即可,版本号默认跟随boot,是boot的亲儿子,不需要到父依赖添加版本,它使用的是html的扩展标签:
在这里插入图片描述
Jsp是一个html代码+java代码的混合界面,所以即可以写html的标签,又可以写jsp标签(c:foreach循环标签、c:if条件标签),value取值,取值标签

thymeleaf用的是html模板,html是属于静态页面,原生的代码是没有这些标签的。所以Spring boot在html上加上扩展标签,thymeleaf自主定义自己的标签。

4实现这个扩展标签,就需要在html页面上声明thymeleaf的模板约束

<html lang="en" 
xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >

有了约束,就变成thymeleaf模块。没有的话,就是一个普通的静态html模块。

5、html不允许一丁点的错误,一个斜杆/错误都会报500错误,校验特别严格!
而jsp中语法有错误,也会照样显示
6、代码测试一下thymeleaf的扩展标签:

@Controller
public class ItemController {

    @RequestMapping("index")
    public String index(ModelMap modelMap){

        modelMap.put("hello","hello html");//key和value
        return "index";
    }
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<body>
 sdafasfas
    <br/>
{hello}
<p th:text="${hello}"></p>
</body>
</html>

在这里插入图片描述
7、设置松校验(允许某些标签少一点一斜杆等的错误)和热部署(修改html页面的代码,快捷键Shift+Ctrl+F9提交,刷新页面就可以实时看到页面变化了,无需重启服务器!)

8、在gmall-web-util里加入以下依赖:

<dependencies>
    <dependency>
        <!--通用的util,要引入-->
        <groupId>com.atguigu.gmall</groupId>
        <artifactId>gmall-common-util</artifactId>
        <version>1.0-SNAPSHOT</version>
    </dependency>

    <!--spring boot 的亲儿子,自动跟随boot的版本号,无需在父依赖parent添加-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

    <!--thymeleaf的支持包,可以设置松校验、热部署-->
    <dependency>
        <groupId>net.sourceforge.nekohtml</groupId>
        <artifactId>nekohtml</artifactId>
    </dependency>
    <dependency>
        <groupId>xml-apis</groupId>
        <artifactId>xml-apis</artifactId>
    </dependency>
    <dependency>
        <groupId>org.apache.xmlgraphics</groupId>
        <artifactId>batik-ext</artifactId>
    </dependency>

</dependencies>

9、在properties文件加入:

# 关闭thymeleaf的缓存(热部署)
spring.thymeleaf.cache=false

# 松校验
spring.thymeleaf.mode=LEGACYHTML5

LEGACY
legacy遗产,即是继承的意思。
松校验,LEGACYHTML5的意思是继承html5

Spring Boot Thymeleaf项目是使用Spring Boot框架和Thymeleaf模板引擎来构建的。在配置Spring Boot Thymeleaf项目时,需要进行以下几个步骤: 1. 在pom.xml文件中引入Thymeleaf依赖。可以使用以下代码片段将Thymeleaf依赖添加到pom.xml文件中: ``` <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> ``` 这将确保项目中包含Thymeleaf所需的所有依赖项。\[2\] 2. 在application.properties或application.yml文件中添加Thymeleaf的配置。可以使用以下代码片段来配置Thymeleaf的相关属性: ``` spring.thymeleaf.prefix=classpath:/templates/ spring.thymeleaf.encoding=UTF-8 spring.thymeleaf.cache=false spring.thymeleaf.suffix=.html spring.thymeleaf.servlet.content-type=text/html ``` 这些配置将指定Thymeleaf模板文件的位置、编码方式、缓存设置等。\[1\] 3. 在项目中使用Thymeleaf模板引擎来创建和渲染页面。可以使用Thymeleaf的语法和标签来编写动态的HTML页面。在Spring Boot中,可以将Thymeleaf模板文件放置在src/main/resources/templates目录下,并使用@Controller注解的控制器类来处理请求并返回Thymeleaf模板。\[1\] 通过以上步骤,你就可以开始使用Spring Boot和Thymeleaf来构建动态的Web应用程序了。 #### 引用[.reference_title] - *1* *2* [springBoot整合thymeleaf(超简单)](https://blog.csdn.net/baobei_ll/article/details/124213027)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [springboot中使用thymeleaf](https://blog.csdn.net/qq_41378597/article/details/85644813)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值