[学习]SpringBoot从0开始-02

文章目录

• 1 前言
• • 1.1 本篇文章内容
  • 1.2 前提依赖
  • • 1.2.1 外部依赖
    • 1.2.2 文章依赖
  • 1.3 内容结构
• 2 主要操作步骤
• • 2.1 创建项目至controller
  • 2.2 POM中引入thymeleaf依赖
  • 2.3 创建前端页面模板
  • 2.4 创建配置文件
  • 2.5 修改MyController.java文件
  • 2.6 运行及查看结果
• 3 文件目录结构说明
• 4 主要代码说明
• • 4.1 pom文件
  • 4.2 index.html文件 - thymeleaf
  • 4.3 application.properties - 项目配置文件
  • 4.4 修改MyController.java
• 5 配套代码下载

1 前言 1.1 本篇文章内容

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

1. 如何引入thymeleaf依赖
2. 如何创建前端页面
3. 如何控制显示前端页面
4. 引入配置页面
5. 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 依赖

        
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        

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

    
    
        
            org.springframework.boot
            spring-boot-starter-web
        

        
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        

    

2.3 创建前端页面模板

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

    
    
    
    


hello 静态 html显示

    
文章：
SpringBoot从0开始-02
    
后端：
SpringBoot
    
前端：
thymeleaf

2.4 创建配置文件

1. 在resources目录下创建application.properties
   右键选择resources > New > File
   创建一个空白文件，文件名为：application.properties
   创建完成后，项目文件目录结构如下
   
2. 在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服务，在页面分别输入以下两个不同的链接

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

3 文件目录结构说明

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

文件或目录名称	类型	新增 or 改动	说明
pom.xml	文件	改动	增加了对thymeleaf的依赖说明
srcmainresources templatesindex.html	文件	新增	thymeleaf前端页面文件
srcmainresources application.properties	文件	新增	项目的配置文件，本章仅包含对thymeleaf的部分配置
srcmainjavacomsprbtest controllerMyController.java	文件	改动	增加对页面url请求的处理，把请求转向前端页面展示

4 主要代码说明

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

4.1 pom文件

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

        
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        

4.2 index.html文件 - thymeleaf

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

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

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

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

• th命名空间的使用

hello 静态 html显示

这个语句中，可以看到有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 配套代码下载

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