[学习]SpringBoot从0开始-02

最新推荐文章于 2022-08-28 08:41:45 发布

happyegg

最新推荐文章于 2022-08-28 08:41:45 发布

阅读量102

点赞数

分类专栏：编程技术文章标签： spring boot java html

本文链接：https://blog.csdn.net/happyegg/article/details/120608228

版权

编程技术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1 前言

1.1 本篇文章内容

引入前端页面，因为SpringBoot项目默认推荐使用的前端引擎是thymeleaf，本章使用thymeleaf为前端依赖建立项目
本篇文章介绍以下知识点：

如何引入thymeleaf依赖
如何创建前端页面
如何控制显示前端页面
引入配置页面
thymeleaf几个简单语法的作用

1.2 前提依赖

1.2.1 外部依赖

外部依赖与SpringBoot从0开始-01一样。

1.2.2 文章依赖

SpringBoot从0开始-01，点击这里查看

1.3 内容结构

与第一章一致

2 主要操作步骤

2.1 创建项目至controller

项目名称定为：SprBoot02。详细步骤见SpringBoot从0开始-01，章节2.1 至2.4

2.2 POM中引入thymeleaf依赖

在pom.xml中，
在节点之内，添加thymeleaf 依赖

        <!--引入thymeleaf 依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

添加完成后，包括第一章的依赖，dependencies下的代码如下：

    <!-- Spring Boot web依赖 -->
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!--引入thymeleaf 依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

    </dependencies>

2.3 创建前端页面模板

创建templates目录
右键选择resources目录，New > Directory，输入新目录名templates
创建index.html
右键选择上一步创建的目录templates，New > HTML File，输入文件名：index.
创建完成之后，项目的文件目录如下
在index.html中，输入以下内容

<!doctype html>

<!--注意：引入thymeleaf的名称空间-->
<!doctype html>

<!--注意：引入thymeleaf的名称空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Document</title>
</head>
<body>
<p th:text="'hello 这是thymeleaf效果'">hello 静态 html显示</p>
<table border="1">
    <tr><td>文章：</td><td>SpringBoot从0开始-02</td></tr>
    <tr><td>后端：</td><td>SpringBoot</td></tr>
    <tr><td>前端：</td><td>thymeleaf</td></tr>
</table>
</body>
</html>

2.4 创建配置文件

在resources目录下创建application.properties
右键选择resources > New > File
创建一个空白文件，文件名为：application.properties
创建完成后，项目文件目录结构如下
在application.properties中，输入以下内容

#thymeleaf
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.cache=false

2.5 修改MyController.java文件

在文件中添加

    @RequestMapping("/home")
    public String index() {
        return "/index";
    }

添加完成后，该Java文件内容如下

package com.sprbtest.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class MyController {
    @ResponseBody
    @RequestMapping("/hello")
    public String hello(){
        return "hello world!!";
    }

    //SpringBoot从0开始-02增加内容 start
    @RequestMapping("/home")
    public String index() {
        return "/index";
    }
    //SpringBoot从0开始-02增加内容 end
}

2.6 运行及查看结果

如01文章所示，运行MyHelloWorld.main()启动SpringBoot服务，在页面分别输入以下两个不同的链接

http://localhost:8080/hello
http://localhost:8080/home
可以看到，链接1和01文章的结果一样，链接2显示了页面的内容。
以下是链接2的显示内容

3 文件目录结构说明

本章仅展示新增及改动文件

文件或目录名称	类型	新增 or 改动	说明
\pom.xml	文件	改动	增加了对thymeleaf的依赖说明
\src\main\resources\ templates\index.html	文件	新增	thymeleaf前端页面文件
\src\main\resources\ application.properties	文件	新增	项目的配置文件，本章仅包含对thymeleaf的部分配置
src\main\java\com\sprbtest\ controller\MyController.java	文件	改动	增加对页面url请求的处理，把请求转向前端页面展示

4 主要代码说明

主要代码说明仅对新增文件及改动部分进行解说，其他信息可从之前的文章进行阅读。

4.1 pom文件

pom文件作用就是引用各个依赖包，本章中新增加thymeleaf作为前端部分，所以增加的依赖，仅是针对thymeleaf引入依赖包。
代码比较简单，就只增加以下信息

        <!--引入thymeleaf 依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

4.2 index.html文件 - thymeleaf

虽然后缀名是html，但这不是普通的静态html文件，而是加载了thymeleaf语法的“类html”文件，关于thymeleaf的介绍，有一个特性比较重要

Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。使用thymeleaf创建的html模板可以在浏览器里面直接打开（展示静态数据），这有利于前后端分离。

本章绝大多数语句都是标准html语句，仅有以下几个地方是与thymeleaf有关的。

引入thymeleaf的名称空间，必须在文件头注明，否则框架无法解析thymeleaf，只会以静态html来解析。

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

th命名空间的使用

<p th:text="'hello 这是thymeleaf效果'">hello 静态 html显示</p>

这个语句中，可以看到有2个不同的内容描述，【hello 这是thymeleaf效果】与【hello 静态 html显示】，一个使用th命名空间赋值，一个是正常的html内容。

区别是，如果是以动态页面加载，thymeleaf会展示th命名空间内容。如果是以静态html打开，则只会显示正常的html内容。
以下是运行结果比较。

通过动态服务器展示结果

在这里插入图片描述
通过直接打开静态html页面展示效果

其他的语法都为正常的html语法，本文不再做介绍

4.3 application.properties - 项目配置文件

本章新增了一个项目配置文件application.properties，该文件对整个项目都起到配置的作用，本章主题为引入前端，所添加的配置均与前端相关。各配置说明如下

配置项	说明
spring.thymeleaf.prefix	页面映射路径，如本章中，html文件路径在/templates/下面
spring.thymeleaf.suffix	构建URL时附加到查看名称的后缀，本章使用后缀为html
spring.thymeleaf.mode	模板模式，一般使用html5
spring.thymeleaf.encoding	模板编码，常用就是UTF-8
spring.thymeleaf.cache	关闭页面缓存， cache属性默认值是true，把他设置为false，便于我们进行调试，不必每次修改都重启一遍项目。

4.4 修改MyController.java

Controller为控制器，本章新增加一个public String index()的方法，与之前的public String hello()共存。hello()方法直接返回内容，而inde()返回的是指向页面的信息。两者的不同，通过注解【@ResponseBody】来达到不同的目的

public class MyController {
    @ResponseBody
    @RequestMapping("/hello")
    public String hello(){
        return "hello world!!";
    }

    //SpringBoot从0开始-02增加内容 start
    @RequestMapping("/home")
    public String index() {
        return "/index";
    }
    //SpringBoot从0开始-02增加内容 end
}

动手改一改，试试把@ResponseBody注解添加到public String index()运行，看看有什么效果？

5 配套代码下载

如果对文中的代码有疑问，可以下载源代码参考

happyegg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[学习]SpringBoot从0开始-02

文章目录1 临时1 前言1.1 本章内容1.2 前提依赖1.2.1 外部依赖1.2.2 文章依赖1.3 内容结构2 主要操作步骤2.1 创建项目至controller2.2 POM中引入thymeleaf依赖2.2 创建前端页面模板1 临时学习资料超详细！4小时开发一个SpringBoot+vue前后端分离博客项目！！https://segmentfault.com/a/11900000227770091 前言1.1 本章内容引入前端页面，因为SpringBoot项目默认推荐使用的前端引擎是t
复制链接

扫一扫