IntelliJ+Springboot+动态网页+静态资源_intellij 前后端静态网页-CSDN博客

本文链接：https://blog.csdn.net/u2mithrandir/article/details/117328259

上一篇讲了使用IntelliJ开发基于Springboot的WebAPI服务。那如果要开发一个完整的MVC架构的网站呢？这里讲一下View部分的开发。
首先，项目结构：

static：存放js, css, images等静态资源。当然也可以存放html，不过这里的html是静态的，无法接受后台数据进行动态显示。
templates：存放动态网页html，这里的html可以接受后台数据进行动态显示。怎么显示，之后会详细讲解。

这里我们以动态网页为例。（静态网页就不用加载下面的package，页面放在static中，其他是一样的）

在pow.xml中加入thymeleaf模块。

<!--thymeleaf 网页模版-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

在controller中直接返回html文件的名称，字符串形式。

@Controller
@RequestMapping("/stage")
public class StageController {
    @RequestMapping(value = "/index", method = {RequestMethod.GET})
    public String Index(HttpServletRequest request) {
        request.setAttribute("title", "照片幻听片演示");
        return "index";
    }
}

其中给页面变量title后台赋值，那么前端index.html可以使用title在显示后台数据了。
注意，这里必须使用@Controller，而不是@RestController，后者只能返回json字符串，不能返回页面。同时也不能像WebAPI中在function前添加@ResponseData，否则就会直接返回"index"字符串而不会去templates文件夹里找index.html了。

页面文件的写法：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>SpringBoot Template Demo</title>
        <link rel="stylesheet" type="text/css" href="/css/index.css" />
        <script src="/js/jquery-2.1.4.min.js"></script>
        <script src="/js/index.js"></script>
    </head>
    <body>
        <div>
            <span class="templateText" th:text="${title}"></span>
            <img id="imgContainer" class="showImg" src="/images/img0.JPG" />
        </div>
    </body>
</html>

这里要注意的点：
a) 必须在html标签里定义th，并在页面控件中使用th:XXX="${xxx}"这样的格式来访问后台数据。
b) 页面中需要访问的静态资源，路径从static之后开始，前面必须加/。
c) 特别需要注意的是: 静态资源路径中的每个字符都是大小写敏感的。比如img0.JPG，如果写成了img0.jpg，在IntelliJ调试时是可以正常显示的，但是一旦使用artifact打包成了JAR，发布到server运行时就显示404了。因为img0.JPG是被包进了JAR压缩包，访问时不是直接走OS的file server，需要Springboot解包，而解包时大小写是敏感的。file server大小写不敏感，所以IntelliJ调试时直接访问的file server路径，是正常显示的。这个特别坑！花了大半天才搞明白…吐