Spring.Boot Web 模板引擎和首页为什么默认的是index.html页面呀《课时十》

简介: Spring.Boot Web 模板引擎和首页为什么默认的是index.html页面呀《课时十》

Spring.Boot Web 模板引擎和首页为什么默认的是index.html页面呀!

本博文重点解决的是两个问题:

问题一:为什么SpringBoot定制的首页是index.html页面?

问题二:什么是模板引擎,以及模板引擎的语法结构级如何使用?


在解决上面两个问题在下面的表中推荐四个官网便于各位读者在后面自己深入的学习:

image.png

解决问题一:为什么SpringBoot定制的首页是index.html页面?在Idea中ctrl+N搜索下面图片的内容

上面的字母又是搜索的目标信息

 

在打开上面的类:按住 Ctrl+R 键搜索getIndexHtml(Resource location)

 private Resource getIndexHtml(String location) {
            return this.getIndexHtml(this.resourceLoader.getResource(location));
        }
        private Resource getIndexHtml(Resource location) {
            try {
                Resource resource = location.createRelative("index.html");
                if (resource.exists() && resource.getURL() != null) {
                    return resource;
                }
            } catch (Exception var3) {
            }
            return null;
        }

结论一: Resource resource = location.createRelative("index.html");

从SpringBoot源码中得出结论SpringBoot默认页面是index.html

接下来测试以下:

看图中的代码等下运行结果出来后可以解释为什么SpringBoot默认的页面是index.html页面

package com.spring.springboot0907web;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
//深入源码
@SpringBootApplication
public class Springboot0907WebApplication {
    public static void main(String[] args) {
        //调用  SpringApplication.run 来启用
        SpringApplication.run(Springboot0907WebApplication.class, args);
    }
}

这第一个问题已经得到了解决哦在学习SpringBoot中多看源码的内容介绍

 

问题二:什么是模板引擎,以及模板引擎的语法结构级如何使用?

先思考这个问题为什么要学习模板引擎?

前端交给我们的页面,是htmI页面。 如果是我们以前开发,我们需要把他们转成jsp页面,jsp好处就是当我们查出一-些数据转发到JSP页面以后,

我们可以用jsp轻松实现数据的显示,及交互等。jsp支持非常强大的功能,包括能写Java代码,但是呢,我们现在的这种情况,

SpringBoot这个项目首先是以jar的方式,不是war,我们用的还是嵌入式的Tomcat,所以呢,他现在默认是不支持jsp的。

那不支持jsp,如果我们直接用纯静态页面的方式,那给我们开发会带来非常大的麻烦,那怎么办呢,SpringBoot推荐你可以来使用模板引擎。

那么这模板弓|擎,我们其实大家听到很多,其实jsp就是一个模板弓|擎,还有以用的比较多的

freemarker,包括SpringBoot给我们推荐的Thymeleaf,模板弓|擎有非常多,

但再多的模板引擎,他们的思想都是一样的。


所以学习这项技术的目的是什么呢?


为了是解决SpringBoot这项技术默认是不支持jsp的,那接下来看我如何实现。

第一步:导入依赖 去官网找到对应的依赖

 <!--Thymeleaf  说明基于3.0.1 模板引擎-->
        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf-spring5</artifactId>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf.extras</groupId>
            <artifactId>thymeleaf-extras-java8time</artifactId>
        </dependency>
    </dependencies>

第二部分:到官网中学习


https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#messages

进入官网去学习

<!--语法格式:xmlns:th="http://www.thymeleaf.org">引入链接 -->

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

模板引擎放入的文件夹

下面是Thymeleaf的html放在的文件夹在哪里

@ConfigurationProperties(
    prefix = "spring.thymeleaf"
)
public class ThymeleafProperties {
    private static final Charset DEFAULT_ENCODING;
    public static final String DEFAULT_PREFIX = "classpath:/templates/";
    public static final String DEFAULT_SUFFIX = ".html";
    private boolean checkTemplate = true;
    private boolean checkTemplateLocation = true;
    private String prefix = "classpath:/templates/";
    private String suffix = ".html";
    private String mode = "HTML";
    private Charset encoding;
    private boolean cache;
    private Integer templateResolverOrder;
    private String[] viewNames;
    private String[] excludedViewNames;
    private boolean enableSpringElCompiler;
    private boolean renderHiddenMarkersBeforeCheckboxes;
    private boolean enabled;
    private final ThymeleafProperties.Servlet servlet;
    private final ThymeleafProperties.Reactive reactive;
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>Good Thymes Virtual Grocery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" media="all" 
          href="../../css/gtvg.css" th:href="@{/css/gtvg.css}" />
  </head>
  <body>
    <p th:text="#{home.welcome}">Welcome to our grocery store!</p>
  </body>
</html>

官网案例:

<html xmlns:th="http://www.thymeleaf.org">
  • 简单的表达:
  • 变量表达式:${...}
  • 选择变量表达式:*{...}
  • 消息表达式:#{...}
  • 链接 URL 表达式:@{...}
  • 片段表达式:~{...}


  • 字面量
  • 文本字面量:'one text', 'Another one!',…
  • 数字文字:0, 34, 3.0, 12.3,...
  • 布尔文字:true,false
  • 空文字:null
  • 文字标记:one, sometext, main,…


  • 文字操作:
  • 字符串连接:+
  • 字面替换:|The name is ${name}|
  • 算术运算:
  • 二元运算符:+, -, *, /,%
  • 减号(一元运算符):-
  • 布尔运算:
  • 二元运算符:and,or
  • 布尔否定(一元运算符)!:,not


比较和平等:

比较器:>, <, >=, <=( gt, lt, ge, le)

等式运算符:==, !=( eq, ne)

条件运算符:

如果-那么:(if) ? (then)

如果-那么-否则:(if) ? (then) : (else)

默认:(value) ?: (defaultvalue)

特殊代币:

无操作:_

上面是Thymeleaf学习的基本的语法结构:

th:元素名


总结:<!--所有的Html元素都可以被thymeleaf 替换接管: th元素名-->

 

官网的内容介绍

<!DOCTYPE html>
<!--语法格式:xmlns:th="http://www.thymeleaf.org">引入链接 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>滴滴</title>
</head>
<body>
<h1>thymeleaf 模板学习</h1>
<!--所有的Html元素都可以被thymeleaf 替换接管: th元素名-->
<!--/*@thymesVar id="msg" type="java"*/-->
<div th:text="${msg}"></div>
<!--不转义-->
<div th:utext="${msg}"></div>
<!--遍历数据-->
<!--th:each每次遍历都会生成当前这个标签:官网#9-->
<!--/*@thymesVar id="users" type="java"*/-->
<!--th:each 遍历元素-->
<h4 th:each="user :${users}" th:text="${user}"></h4>
<!--/*@thymesVar id="dogs" type="java"*/-->
<h4 th:each="dog :${dogs}" th:text="${dog}"></h4>
<!--<h4>-->
<!--    &lt;!&ndash;行内写法:官网#12&ndash;&gt;-->
<!--    <span th:each="user:${users}">[[${user}]]</span>-->
<!--</h4>-->
</body>
</html>
  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::                (v2.7.3)
2022-09-12 21:26:55.519  INFO 27412 --- [           main] c.s.s.Springboot0907WebApplication       : Starting Springboot0907WebApplication using Java 1.8.0_171 on HELLOWWORLD with PID 27412 (D:\maven-workspace\spaceVideospringboot\springboot0907-web\target\classes started by MZFAITHDREAM in D:\maven-workspace\spaceVideospringboot\springboot0907-web)
2022-09-12 21:26:55.519  INFO 27412 --- [           main] c.s.s.Springboot0907WebApplication       : No active profile set, falling back to 1 default profile: "default"
2022-09-12 21:26:56.271  INFO 27412 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat initialized with port(s): 8080 (http)
2022-09-12 21:26:56.271  INFO 27412 --- [           main] o.apache.catalina.core.StandardService   : Starting service [Tomcat]
2022-09-12 21:26:56.271  INFO 27412 --- [           main] org.apache.catalina.core.StandardEngine  : Starting Servlet engine: [Apache Tomcat/9.0.65]
2022-09-12 21:26:56.521  INFO 27412 --- [           main] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring embedded WebApplicationContext
2022-09-12 21:26:56.521  INFO 27412 --- [           main] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 971 ms
2022-09-12 21:26:56.774  INFO 27412 --- [           main] o.s.b.a.w.s.WelcomePageHandlerMapping    : Adding welcome page: class path resource [public/index.html]
2022-09-12 21:26:56.932  INFO 27412 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 8080 (http) with context path ''
2022-09-12 21:26:56.941  INFO 27412 --- [           main] c.s.s.Springboot0907WebApplication       : Started Springboot0907WebApplication in 1.722 seconds (JVM running for 2.646)

运行结果

package com.spring.springboot0907web.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.Arrays;
//在templates下的只能controller
//需要模板引擎 thymeleof
@Controller
public class IndexController {
    @RequestMapping("/test")
    public String index(Model model){
        model.addAttribute("msg","<h2>Hellow Mode SpringBoot</h2>");
        model.addAttribute("msg","<h1>Hellow Mode SpringBoot</h1>");
        model.addAttribute("users", Arrays.asList("小明","小王","消费"));
        model.addAttribute("dogs",Arrays.asList("效果","小明","王大陆","王晓蓉"));
        return "test";
    }
}

使用一

<!--所有的Html元素都可以被thymeleaf 替换接管: th元素名-->
<!--/*@thymesVar id="msg" type="java"*/-->
<div th:text="${msg}"></div>
<!--不转义-->
<div th:utext="${msg}"></div>

使用二

<!--遍历数据-->
<!--th:each每次遍历都会生成当前这个标签:官网#9-->
<!--/*@thymesVar id="users" type="java"*/-->
<!--th:each 遍历元素-->
<h4 th:each="user :${users}" th:text="${user}"></h4>

使用三

<!--/*@thymesVar id="dogs" type="java"*/-->
<h4 th:each="dog :${dogs}" th:text="${dog}"></h4>

使用四

<!--<h4>-->
<!--    &lt;!&ndash;行内写法:官网#12&ndash;&gt;-->
<!--    <span th:each="user:${users}">[[${user}]]</span>-->
<!--</h4>-->
相关文章
|
3天前
|
前端开发 Java 测试技术
Java一分钟之Spring MVC:构建Web应用
【5月更文挑战第15天】Spring MVC是Spring框架的Web应用模块,基于MVC模式实现业务、数据和UI解耦。常见问题包括:配置DispatcherServlet、Controller映射错误、视图解析未设置、Model数据传递遗漏、异常处理未配置、依赖注入缺失和忽视单元测试。解决这些问题可提升代码质量和应用性能。注意配置`web.xml`、`@RequestMapping`、`ViewResolver`、`Model`、`@ExceptionHandler`、`@Autowired`,并编写测试用例。
51 3
|
3天前
|
Java 应用服务中间件 测试技术
深入探索Spring Boot Web应用源码及实战应用
【5月更文挑战第11天】本文将详细解析Spring Boot Web应用的源码架构,并通过一个实际案例,展示如何构建一个基于Spring Boot的Web应用。本文旨在帮助读者更好地理解Spring Boot的内部工作机制,以及如何利用这些机制优化自己的Web应用开发。
29 3
|
3天前
|
Web App开发 API
通过html页面方式访问www.iximo.com的方式(原创)
通过html页面方式访问www.iximo.com的方式(原创)
16 2
|
3天前
|
关系型数据库 MySQL
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
|
1天前
|
Java 数据库连接 数据库
spring--为web(1),富士康java面试题整理
spring--为web(1),富士康java面试题整理
|
1天前
|
JavaScript Java 测试技术
《手把手教你》系列技巧篇(四十六)-java+ selenium自动化测试-web页面定位toast-下篇(详解教程)
【5月更文挑战第10天】本文介绍了使用Java和Selenium进行Web自动化测试的实践,以安居客网站为例。最后,提到了在浏览器开发者工具中调试和观察页面元素的方法。
11 2
|
1天前
|
Android开发
Android WindowFeature小探究,Android客户端Web页面通用性能优化实践
Android WindowFeature小探究,Android客户端Web页面通用性能优化实践
|
2天前
|
Web App开发 JavaScript 测试技术
《手把手教你》系列技巧篇(四十五)-java+ selenium自动化测试-web页面定位toast-上篇(详解教程)
【5月更文挑战第9天】本文介绍了在Appium中处理App自动化测试中遇到的Toast元素定位的方法。Toast在Web UI测试中也常见,通常作为轻量级反馈短暂显示。文章提供了两种定位Toast元素的技巧.
10 0
|
3天前
|
存储 人工智能 测试技术
python自动化测试实战 —— CSDN的Web页面自动化测试
python自动化测试实战 —— CSDN的Web页面自动化测试
194 0
|
3天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?