（2）SpringBoot跳转界面：访问static和templates目录下的文件

最新推荐文章于 2025-11-01 11:56:13 发布

原创最新推荐文章于 2025-11-01 11:56:13 发布 · 3.5k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#spring boot #java

本文详细介绍了在SpringBoot项目中如何访问静态和动态文件，包括static目录下的静态文件和templates目录下的thymeleaf动态文件。通过浏览器直接访问和编写控制器类两种方式进行了演示。

一、新建一个SpringBoot项目

1、导入相关依赖（此处省略）

2、项目目录

在这里插入图片描述
可以看到resources下有两个文件夹static和templates，分别存放项目的静态和动态文件

二、static目录

1、创建一个staticfirst.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
    <h1>For the static files</h1>
    <h2>my first SpringBoot</h2>
</body>
</html>

1.1通过网址进行访问

http://localhost:8089/staticfirst.html

注意：这里根据自己设置的端口号进行访问，一般默认为8080。若不确定可以在控制台查看输出，如下图

在这里插入图片描述

在浏览器中进行访问：

在这里插入图片描述

1.2、通过接口访问

创建一个controller包编写一个HelloController控制类

在这里插入图片描述

HelloController控制类：

package com.tracy.springbootdemo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * Created by Tracy on 2020/3/20 12:23
 */
@Controller
public class HelloController {

    @RequestMapping("hello")
    public String toHello() {
        return "staticfirst.html";
    }
}

在浏览器中发起hello请求：

http://localhost:8089/hello

在这里插入图片描述
访问成功！

三、使用thymeleaf动态访问

1.1、pom.xml中导入thymeleaf的相关依赖

在pom.xml的dependencies中写入如下代码：

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

接下来properties中设置thymeleaf相关属性

<!--   布局功能支持程序，thymeleaf3版本以上 layout2以上     -->
       <thymeleaf.version>3.0.11.RELEASE</thymeleaf.version>
       <thymeleaf-layout-dialect.version>2.1.1</thymeleaf-layout-dialect.version>

1.2、在templates下创建thymfirst.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
    <h1>For the thymeleaf</h1>
    <h2>my first SpringBoot</h2>
</body>
</html>

1.3、编写HelloController类

package com.tracy.springbootdemo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * Created by Tracy on 2020/3/20 12:23
 */
@Controller
public class HelloController {

//    @RequestMapping("hello")
//    public String toHello() {
//        return "staticfirst.html";
//    }

    @RequestMapping("hello")
    public String toHello() {
        return "thymfirst";   //注意：通过thymeleaf访问的界面不应添加后缀
    }
}

1.4、动态访问界面

方法一：

继续在浏览器器中发起以下请求：

http://localhost:8089/hello

访问结果：
在这里插入图片描述
发起请求成功！

方法二：

I、在容器中添加组件

创建config包编写MySpringBootConfig类，并实现WebMvcConfigurer接口

一般情况下我们访问界面都是访问根目录，或者是根目录下的index.html文件，所以这里将这两个请求加入组件容器中：

package com.tracy.springbootdemo.config;

import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * Created by Tracy on 2020/3/20 12:26
 */
@Component
public class MySpringBootConfig implements WebMvcConfigurer {

    @Bean
    public WebMvcConfigurer webMvcConfigurer() {
        return  new WebMvcConfigurer() {
            @Override
            public void addViewControllers(ViewControllerRegistry registry) {
            //通过根目录进行访问，跳转至thymfirst.html界面
                registry.addViewController("/").setViewName("thymfirst");
           //通过index.html访问，仍然跳转至thymfirse.html界面
           //注意SetViewName方法就是访问的动态界面名，所以不添加后缀
                registry.addViewController("index.html").setViewName("thymfirst");
            }
        };
    }
}

II、判断组件是否成功添加到容器中

在这里插入图片描述

package com.tracy.springbootdemo;

import org.springframework.context.ApplicationContext;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;

@SpringBootTest
class SpringbootDemoApplicationTests {

    @Autowired
    ApplicationContext ioc;

    @Test
    void contextLoads() {
        //检测是否含有该组件
        System.out.println(ioc.containsBean("webMvcConfigurer"));
    }

}