找到你中意的模板

我这里下载下来后的文件结构如下图

spring boot 实现网页截图 spring boot做一个网页_spring

新建一个Springboot项目

spring boot 实现网页截图 spring boot做一个网页_静态资源_02


注意这里没有引用Thymeleaf

找到下面的static

spring boot 实现网页截图 spring boot做一个网页_静态资源_03


把下载的网页模板赋值到static文件夹里面

spring boot 实现网页截图 spring boot做一个网页_spring_04

spring boot 实现网页截图 spring boot做一个网页_静态资源_05


运行springBoot项目后,根据你模板的主页是那个html文件访问就好了,比如本次演示的是

spring boot 实现网页截图 spring boot做一个网页_spring_06


就是访问下面的网址

spring boot 实现网页截图 spring boot做一个网页_spring_07


spring boot 实现网页截图 spring boot做一个网页_静态资源_08


我们如此方便就能跑起来,主要是因为我们SpringBoot的静态资源都能让页面请求到,这里不仅仅是html文件,还包括css js 图片等其他静态资源。网页中关于静态资源的请求 如下:

spring boot 实现网页截图 spring boot做一个网页_spring_09

SpringBoot中关于如何寻找静态资源的配置是 spring.mvc.static-path-pattern

这个配置项是告诉springboot,应该以什么样的方式去寻找资源。默认配置为 /* 。换句话说,只有静态资源满足什么样的匹配条件,Spring Boot才会处理静态资源请求

但是你会发现这样的网页其实就是一个html文件,我们平常访问网页其实是一个请求,后端解析后给我们返回相应html文件,那么我们需要一个控制类

spring boot 实现网页截图 spring boot做一个网页_静态资源_10


另外最开始放在静态static文件夹的html文件应该放入template文件夹

spring boot 实现网页截图 spring boot做一个网页_spring boot 实现网页截图_11


此时再直接访问html文件就没用了

spring boot 实现网页截图 spring boot做一个网页_spring boot 实现网页截图_12


而访问我们再控制类加入的路径就好了

spring boot 实现网页截图 spring boot做一个网页_静态资源_13


但这里会有个问题,就是网页跳转的时候,比如index.html里面的a标签,你再点击时候就会出现

spring boot 实现网页截图 spring boot做一个网页_html_14


spring boot 实现网页截图 spring boot做一个网页_html_15


原因就是 这个标签直接请求了一个静态html文件,但是我们在static里面已经不存在这些html了,那么为了响应这个请求,我们可以改一改网页的标签

spring boot 实现网页截图 spring boot做一个网页_html_16


改为

<li><a href='/single'><span>About</span></a></li>

这样我们打开网页上面的About标签,请求就是http://localhost:8080/single
了,之后在控制类里面添加新的映射就好了

@RequestMapping("/single")
	public String getSingle(Model model)  {
		
		return "single";
	}

如果我们需要对网页加入一些动态的数据,可以直接使用Thymeleaf模板

只需要在pom.xml加上依赖

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

然后再每个html文件里面加上的html标签加上

<html lang="en"  xmlns:th="https://www.thymeleaf.org">

我这里是改了改网页标题

spring boot 实现网页截图 spring boot做一个网页_静态资源_17


代码如下

<title th:text="${Myown}">zTopModel - Free Responsive Html5 Templates</title>

控制类变为

spring boot 实现网页截图 spring boot做一个网页_spring boot 实现网页截图_18


主要代码如下

@RequestMapping("/")
	public String getIndex(Model model)  {
		model.addAttribute("Myown","我们自己的数据");
		return "index";
	}

spring boot 实现网页截图 spring boot做一个网页_spring_19

OK了吧,还算简单了