static和templates文件夹的区别
本来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";
}
}
这些都是自己的一些心得体会可能有不正确的地方，大家可以提出来