springboot中static文件夹和templates文件夹的区别（进行页面跳转后css样式丢失的解决办法）

static和templates文件夹的区别总体认识static目录templates目录测试在没有导入thymeleaf模板情况下static下的dyk.htmltemplates下的dyk.htmltemplates下的dyk1.html结果导入thymeleaf模板情况下没有使用thymeleaf模板情况下接口跳转使用了thymeleaf模板情况下接口跳转总结css样式丢失的问题首先是资源的

向天再借500年

7031人浏览 · 2021-05-23 11:05:04

向天再借500年 · 2021-05-23 11:05:04 发布

本来springboot就刚学了点皮毛，如今被赶鸭子上架做一个大创项目，也是遇到了很多困难，其中碰到的就是关于static和templates文件夹存放静态资源，然后进行跳转后，发现只有html代码了，查看了许多大佬的博客也是耗费了很长时间解决，下面是我的一些体会。

总体认识

首先有个大概的了解，SpringBoot项目创建后,resources下默认有两个文件夹static和template.一般static存放静态资源,template存放动态资源.

static目录

static目录是用来保存静态文件的目录, 比如JS, CSS样式, 图片等, 是不需要服务器进行数据绑定的页面.

此文件下都是静态资源文件，最主要的一个特点，可以通过浏览器地址栏，直接访问；

templates目录

template目录是用来保存动态模版文件的目录, 比如Freemarker, JSP, Thymeleaf等需要服务器动态渲染数据的文件.
由于页面渲染需要服务器中的数据, 所以该文件必须经过Controller控制器进行Model数据绑定后, 由服务器进行跳转. 所以直接访问是无意义的, 也访问不到.
模板文件夹，该文件下的页面不能通过地址栏地址直接访问，需要经过Controller类来访问，需要在application.properties中配置对应的模板引擎

测试

在没有导入thymeleaf模板情况下

在static和templates目录下同时建立两个html，取相同的名字dyk.html,内容不一样，再在templates下创建一个dyk1.html
在这里插入图片描述

static下的dyk.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>static文件夹</title>
</head>
<body>
<h1>static</h1>
</body>
</html>

templates下的dyk.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>templates</title>
</head>
<body>
<h1>templates</h1>
</body>
</html>

templates下的dyk1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>templatesdyk1111111</h1>
</body>
</html>

启动springboot，访问

结果

在这里插入图片描述

可以发现static目录下的dyk.html被访问了,而访问dyk1.html直接就404了

导入thymeleaf模板情况下

依赖

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

</dependency>

再次直接在浏览器地址栏输入dyk.html,dyk1.html

在这里插入图片描述

发现会和没加thymeleaf模板情况下一样，但是我们接下来通过接口来测试

没有使用thymeleaf模板情况下接口跳转

package com.blb.test.Controller;

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

@Controller
public class TestController {
    @RequestMapping("/dyk")
    public String test(){
        return "dyk.html";
    }

    @RequestMapping("/dyk1")
    public String test1(){
        return "dyk1.html";
    }

}

访问/dyk
在这里插入图片描述
访问/dyk1

可见在没使用thymeleaf模板情况还是只能访问static目录下的

使用了thymeleaf模板情况下接口跳转

package com.blb.test.Controller;

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

@Controller
public class TestController {
    @RequestMapping("/dyk")
    public String test(){
        return "dyk";
    }

    @RequestMapping("/dyk1")
    public String test1(){
        return "dyk1";
    }

}

在浏览器地址访问dyk结果如下
在这里插入图片描述
这样就发现区别了默认访问的templates下的dyk.html

总结

静态页面的return默认是跳转到/static/目录下，当在pom.xml中引入了thymeleaf
组件，动态跳转会覆盖默认的静态跳转，默认就会跳转到/templates/下，注意看两
者return代码也有区别，动态没有html后缀

然后再来看下我这个项目遇到的问题

css样式丢失的问题

在这里插入图片描述

首先是资源的路径问题

一开始把代码粘进idea的时候，它默认帮我们全部改成了相对路径
例如

<script src="js/flexible.js"></script>
    <script src="../static/js/echarts.min.js"></script>
    <!-- 先引入jquery -->
    <script src="../static/js/jquery.js"></script>
    <!-- 必须先引入china.js 这个文件 因为中国地图需要 -->
    <script src="../static/js/china.js"></script>
    <script src="../static/js/index.js"></script>

这样是错误的

<link rel="stylesheet" href="css/index.css" />


<script src="js/flexible.js"></script>
    <script src="js/echarts.min.js"></script>
    <!-- 先引入jquery -->
    <script src="js/jquery.js"></script>
    <!-- 必须先引入china.js 这个文件 因为中国地图需要 -->
    <script src="js/china.js"></script>
    <script src="js/index.js"></script>

后面这个才是正确的，直接从static目录下的下一级文件夹开始写起即可

SpringBoot框架是约定大于高于配置，约定静态资源的路径要在static目录下，因此我们最开始的根路径要从static目录下的第一个目录开始写。

其次@RequestMapping()导致的问题

package com.blb.dachuang.controller;

import com.blb.dachuang.entity.User;
import com.blb.dachuang.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/user")
public class UserController {
    @Autowired
    UserService userService;

    @PostMapping("/login")
    public String login(){
        return "history";
    }

    @PostMapping("/regist")
    public String regist(User user){
        return userService.register(user);
    }
}

在这里插入图片描述

在这里插入图片描述
因为类上加了这个@RequestMapping("/user")后发现，它在资源路径上也加了这个路径导致资源请求失败，然后导致资源失败

因此把这个删了之后
在这里插入图片描述
资源就好了全部请求到了，样式也都有了

模板页面之间的跳转

一开始用a标签跳转时
错误的使用

<li><a href="history.html">历史数据</a></li>

在这里插入图片描述

这个只有在html放在静态资源里面能跳
而在templates再写普通的a标签就会报错

<ul class="res">
			 <li><a th:href="@{/toIndexPage}" class="active">主页</a></li>
			<li><a th:href="@{/toHistoryPage}">历史数据</a></li>
			<li><a th:href="@{/toCurrentPage}">实时数据</a></li>
			<li><a th:href="@{/toLoginPage}">登录</a> | <a th:href="@{/toRegisterPage}">注册</a></li>

package com.blb.dachuang.controller;

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

@Controller
public class MainController {
    @RequestMapping("/toHistoryPage")
    public String toHistoryPage(){

            return "history";

    }

    @RequestMapping("/toLoginPage")
    public String toLoginPage(){
        return "login";
    }

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


    @RequestMapping("/toRegisterPage")
    public String toRegisterPage(){
        return "register";
    }

    @RequestMapping("/toCurrentPage")
    public String toCurrentPage(){
        return "current";
    }
}