基本搭建流程

1、在项目的pom.xml文件中添加依赖：

1
2
3
4
 <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2、在application.yaml文件下配置context-path：

1
2
3
4
server:
  port: 45031
  servlet:
    context-path: /MagazineCollector

注意在2.0.0 springboot版本后，context-path的写法如上

3、在resources目录下新建templates目录，在templates目录下新建index.html

4、编写controller类

1
2
3
4
5
6
7
8
@Controller
public class WebController {

    @RequestMapping(path = "/index", method = RequestMethod.GET)
    public String index() {
        return "/index";
    }
}

注意，如果是return “/index”，则需要是@Controller注解。

还有另外一种写法，使用ModelAndView，则可以使用@RestController注解

1
2
3
4
5
6
7
8
@RestController
public class WebTestController {

    @RequestMapping(path = "/index", method = RequestMethod.GET)
    public ModelAndView getIndex() {
        return new ModelAndView("/index");
    }
}

访问地址：http://localhost:45031/MagazineCollector/index即可访问index.html下内容

SpringBoot项目resources下static和templates目录的知识

1、SpringBoot默认资源处理

SpringBoot默认为我们提供了静态资源处理，使用 WebMvcAutoConfiguration 中的配置各种属性。
SpringBoot默认加载文件的路径是：

1
2
3
4
classpath:/META-INF/resources/
classpath:/resources/
classpath:/static/
classpath:/public/

2、静态资源和动态资源

SpringBoot项目下resources目录下，static目录默认存放的是项目的静态资源，如css、js、image等文件，也可以存放一些静态的html文件。而templates目录用于存放动态资源，如jsp页面等，或者是各种模板引擎的模板文件。动态页面需要先请求服务器，访问后台应用程序，然后再转向到页面，比如访问sjp。
SpringBoot建议不要使用jsp，默认使用Thymeleaf来做动态页面。

优先级顺序为：META/resources > resources > static > public

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

默认情况下, 网页存放于static目录下, 默认的”/“指向的是~/resouces/static/index.html文件
如果引入了thymeleaf, 则默认指向的地址为~/resouces/templates/index.html
在引入thymeleaf后, 如果仍需要访问~/static/index.html, 则可以使用重定向

1
2
3
4
@RequestMapping("/indexInStaticFolder")
public String getResourceInStaticFolder() {
    return "redirect:/index.html";
}

有兴趣可以了解一下redirect和forward的区别。

3、SpringBoot项目使用WebJars统一管理静态资源

先说一下什么是webjars？我们在Web开发中，前端页面中用了越来越多的js或css，如jQuery等等，平时我们是将这些Web资源拷贝到Java的目录下，这种通过人工方式拷贝可能会产生版本误差，拷贝版本错误，前端页面就无法正确展示。
WebJars 就是为了解决这种问题衍生的，将这些Web前端资源打包成Java的Jar包，然后借助Maven这些依赖库的管理，保证这些Web资源版本唯一性。
WebJars 就是将js, css 等资源文件放到 classpath:/META-INF/resources/webjars/ 中，然后打包成jar发布到maven仓库中。

(1)在web项目中使用jquery、bootstrap等资源时可以使用WebJars，WebJars能使Maven的依赖管理支持OSS的JavaScript库/CSS库，比如jQuery、Bootstrap等。

在pom.xml文件引入依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
 <!-- 引用bootstrap -->
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>3.3.7-1</version>
</dependency>

<!-- 引用jquery -->
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.1.1</version>
</dependency>

在html文件中引入以上资源

1
2
3
4
5
6
7
<head>
    <meta charset="UTF-8">
    <title>Dalaoyang</title>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css" />
    <script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>
</head>

(2)省略版本号
在pom.xml中引入locator

1
2
3
4
5
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>webjars-locator</artifactId>
    <version>0.34</version>
</dependency>

使用：

1
2
<script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>

参考资料

[1] Spring Boot 静态资源处理