首先webjars其实就是以jar包的形式来引入静态资源,官网在此传送门 我们可以看到这里边的静态资源,点击这个maven就会出现maven的坐标

spring boot项目怎么加入前端页面 springboot的前端页面_spring


spring boot项目怎么加入前端页面 springboot的前端页面_静态资源_02


这样就可以直接在pom文件里边导入静态资源

当然我们自己写好的前端静态页面是要放入classpath:/templats/这个目录下的,没有templates可以手动建一个.

首先我们导入坐标

spring boot项目怎么加入前端页面 springboot的前端页面_spring boot_03

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

然后我们新建静态模板HTML页面,

spring boot项目怎么加入前端页面 springboot的前端页面_spring_04


比如我们在里边写一个success.html做测试,这样thymeleaf会自动解析帮忙寻找success.html去跳转

spring boot项目怎么加入前端页面 springboot的前端页面_spring boot_05

controller层这么写,注意这次是没有@ResponseBody这个注解的,主要是这样才可以跳转页面,否则是会把success直接打印到屏幕上的.

然后我们启动服务器

spring boot项目怎么加入前端页面 springboot的前端页面_spring boot_06


可以看到成功跳转

之前我们在写javaweb的时候使用的jsp,jsp支持很多嵌入的代码,比如c:for each c:if 这些可以很简单的在前端进行遍历的标签,在springboot弃用了jsp而改用thymeleaf然后在前端页面加入头,它的作用是可以给你thymeleaf的语法提示

spring boot项目怎么加入前端页面 springboot的前端页面_spring boot_07

xmlns:th="http://www.thymeleaf.org"

controller层呢,我们给他传入参数就用一个map来存入

spring boot项目怎么加入前端页面 springboot的前端页面_静态资源_08


前端页面这里使用th:text="{ }"它的作用是给这个代码所在的标签里边填入数据,比如这个例子就是把后台的map里边的hello拿出来放入div中,后台的hello的值就是你好,就是这么传递过来的

spring boot项目怎么加入前端页面 springboot的前端页面_spring boot_09


这样就会发现又可以像jsp一样愉快的传递数据了,thymeleaf的标签远不止这一个,他有很多的标签可供使用,我们可以参考thymeleaf官网 传送门

spring boot项目怎么加入前端页面 springboot的前端页面_静态资源_10


点击doc可以查看文档

spring boot项目怎么加入前端页面 springboot的前端页面_前端页面_11


可在线读也可保存到本地

spring boot项目怎么加入前端页面 springboot的前端页面_spring boot_12


里边有各种解释,当然还是要考验英文水平的哈