我是这样使用SpringBoot(WEB服务)

面完成了API服务(虽然这个API没什么用)。接下去来个WEB服务，在前面项目中加上个页面。这章目标是通过访问一个URL展示一个界面，从服务端传递参数值到界面中展示动态数据。这里还会涉及到webjars的应用。

目录与文件

在项目src/main/resources目录下创建两个目录，分别是templates各static，templates 存放模板文件，static 存放静态文件。

在static目录放入一张图片，图片名称为001.jpg，启动项目。打开浏览器访问http://localhost/001.jpg

访问资源

spring boot会默认从static查找静态资源，在这里还可以放css，js，html等文件，都可以直接访问到。但是，这里的html文件只能是静态页面，服务端不能传值到界面中。

 templates中加入一个index.html，内容如下<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>这里是标题</title>
</head>
<body>
 <div>
 <p>这是首页</p>
 </div>
</body>
</html>

重启服务，浏览器中访问http://localhost/index.html

404

找不到页面，如果index.html放到static目录中是可以访问的。templates目录中的文件是不能直接访问。下面讲到这么访问templates中的文件。

当前目录

使用模板

访问templates文件，首先要引入模板引擎。这里使用thymeleaf，在pom.xml文件中包含thymeleaf组件。

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

如图

增加package：com.biboheart.demos.web，在package中创建class：PageController

package com.biboheart.demos.web;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class PageController {
 @RequestMapping(value = {"/", "/home"})
 public String home() {
 return "index";
 }
}

@Controller表示这是一个SpringMVC的控制器

@RequestMapping(value = {"/", "/home"}) 表示访问路径"/"或"/home"都指向home函数，home返回"index"页面，即templates/index.html模板生成的页面。

重新启动服务，在浏览器中访问 http://localhost/home

home页面

这时候，页面展示的是index.html的内容。向页面传值

这里用Model对象传值到模板中

调整controller的实现

package com.biboheart.demos.web;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class PageController {
 @RequestMapping(value = {"/", "/home"})
 public String home(Model model, String name) {
 model.addAttribute("name", name);
 return "index";
 }
}

在函数中增加两个参数，Model model用于向模板传递值，name用于接收请求参数。model.addAttribute("name", name);将接收到的值通过model传递到模板中。

模板文件index.html中接收并显示name的值。

<!DOCTYPE html>
<html lang="zh-CN"
 xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8">
 <title>这里是标题</title>
</head>
<body>
 <div>
 <p>这是首页</p>
 <p>欢迎你：<span th:text="${name}"></span></p>
 </div>
</body>
</html>

重新启动服务，在浏览器中访问http://localhost/home?name=biboheart

参数

index.html中的<span th:text="${name}"></span>，展示Model中的name的值。使用webjars

在pom.xml中包含webjars，并且包含jquery，bootstrap

 <dependency>
 <groupId>org.webjars</groupId>
 <artifactId>webjars-locator</artifactId>
 <version>0.34</version>
 </dependency>
 <dependency>
 <groupId>org.webjars</groupId>
 <artifactId>jquery</artifactId>
 <version>3.3.1</version>
 </dependency>
 <dependency>
 <groupId>org.webjars</groupId>
 <artifactId>bootstrap</artifactId>
 <version>3.3.7-1</version>
 </dependency>

界面中使用bootstrap

<!DOCTYPE html>
<html lang="zh-CN"
 xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8">
 <title>这里是标题</title>
 <script src="/webjars/jquery/jquery.min.js"></script>
 <script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
 <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css"/>
</head>
<body>
 <div class="container">
 <div class="jumbotron">
 <h1>欢迎你：<span th:text="${name}"></span></h1>
 <p>这是首页</p>
 </div>
 </div>
</body>
</html>

重新启动项目，在浏览器中访问http://localhost/home?name=biboheart

bootstrap效果

模板中包含静态资源

将静态资源001.jpg图片在模板中显示，修改后index.html文件如下

我们开发Web应用的时候，会用到大量的js、css、image、html等静态资源资源。

静态资源映射

默认情况下，我们只需要将静态资源放在一下几个目录中就可以直接通过url在浏览器中访问了。

/META-INF/resources/
/resources/
/static/
/public/

如果这四个目录中有相同的静态资源文件，那么优先访问哪个目录下面的资源啊？

静态资源的默认访问优先级：/META-INF/resources/>/resources/>/static/>/public/

在四个目录中都放一个static.html的文件，每个html文件中都说明自己所在的目录，访问结果如下：

SpringBoot关于静态资源的访问涉及到了application.properties中的两个属性：

# 默认值为 /*
spring.mvc.static-path-pattern= #这里设置静态资源匹配的url-pattern
# 默认值为 classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/ 
spring.resources.static-locations= #这里设置要指向的路径，多个使用英文逗号隔开，在前面的优先级高

此时，我们豁然开朗，知道默认情况下静态资源为什么放在/META-INF/resources/、/resources/、/static/、/public/这四个目录了，还有这四个目录访问的优先级是怎么来的了。

修改静态资源映射的方法：

我们可以修改这两个属性来改变静态资源的映射，比如我们的所有静态资源都在mystatic目录中，并且我们希望访问静态资源的的url都带有/mystatic/这个目录前缀:

spring.mvc.static-path-pattern=/mystatic/*
spring.resources.static-locations= classpath:mystatic/

在resources资源目录中创建一个mystatic目录，在该目录下面创建一个static.html文件，访问结果如下：

继承WebMvcConfigurerAdapter类，并且重写addResourceHandlers方法就行，该操作与上面的方法得到的效果是一样的

注意：还可以设置外部磁盘目录，设置方式不变，格式如下：file:d/mystatic/。

WebJars

WebJars将前端资源（css,js,image,html等等）打包到jar中，然后使用基于JVM的包管理器（比如 Maven、Gradle 等）管理前端依赖的方案。SpringBoot中也可以通过WebJars来访问静态资源。

SpringBoot默认将/webjars/**映射到 classpath:/META-INF/resources/webjars/。

/webjars/**：表示/webjars/目录下的所有文件，及存在其目录下的jar包中的所有文件。

所以默认情况下我们需要访问WebJars中的资源，需要将其jar包放到classpath:/META-INF/resources/webjars/目录中。

我们来使用一下WebJars:

在pom.xml中引入jquery的WebJars，默认会被放在classpath:/META-INF/resources/webjars/目录中

 <dependency>
 <groupId>org.webjars</groupId>
 <artifactId>jquery</artifactId>
 <version>2.1.1</version>
 </dependency>

在前端webjars.html页面中引入jquery

<script src="/webjars/jquery/2.1.1/jquery.js"></script>

访问页面webjars.html，查看源码，可以链接到jquery.js的内容

版本号统一管理

如果我们有很多页面都是用了WebJars中的资源，而我们现在要升级WebJars的版本，岂不是要在每个页面中都改动一下，这样很麻烦啊，有没有简单的方法啊。此时，我们可以进行版本号统一管理。

在pom.xml中引入jquery的WebJars的基础上添加：

 <dependency>
 <groupId>org.webjars</groupId>
 <artifactId>webjars-locator</artifactId>
 </dependency>

添加版本号统一管理的控制器

在页面中引入jquery的方式如下：

<script src="/webjarslocator/jquery/jquery.js"></script>

静态资源版本管理

当我们资源内容发生变化时，由于浏览器缓存，用户本地的静态资源还是旧的资源，为了防止这种情况导致的问题，我们可能会手动在请求url的时候加个版本号或者其他方式。

<script type="text/javascript" src="/lavor.js?v=1.1"></script>

SpringMVC提供了两种方式可以帮助我们很容易地解决这类问题。

MD5方式

修改application.properties配置文件

spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**

添加@ControllerAdvice注解，返回ResourceUrlProvider的对象，这样所有通过控制器返回的模板页面（jsp,thymeleaf,freeemarker等）就都可以在页面中使用该对象了

在控制器返回的模板页面中，添加以下信息，我们这里的返回页面时jsp页面，lavor.js是webapp目录下面的js脚本文件。

<script src="${urls.getForLookupPath('/lavor.js') }"></script>

通过浏览器访问控制器的请求url，查看页面源代码

<script src="/lavor-fdfa0502716d517c6cad4f2536aa02a1.js"></script>

请求/lavor-fdfa0502716d517c6cad4f2536aa02a1.js，我们MD5配置的paths=/**，所以SpringMVC会尝试url中是否包含-，如果包含会去掉后面这部分，然后去映射的目录（如webapp根目录，上面提到的四大静态映射目录）查找/lavor.js文件，如果能找到就返回。

版本号方式

修改application.properties配置文件，注意MD5方式中的是content，这里是fixed

spring.resources.chain.strategy.fixed.enabled=true
#版本号处理的路径
spring.resources.chain.strategy.fixed.paths=/**
# 版本号，可以为所处理路径中的资源加上/v1.1目录前缀
spring.resources.chain.strategy.fixed.version=v1.1

添加@ControllerAdvice注解，返回ResourceUrlProvider的对象，这样所有通过控制器返回的模板页面（jsp,thymeleaf,freeemarker等）就都可以在页面中使用该对象了

在控制器返回的模板页面中，添加以下信息，我们这里的返回页面时jsp页面，lavor.js是webapp目录下面的js脚本文件.

<script src="${urls.getForLookupPath('/lavor.js') }"></script>

通过浏览器访问控制器的请求url，查看页面源代码

<script src="/v1.1/lavor.js"></script>

请求/v1.1/lavor.js，会查看v1.1是不是版本号，如果是就去掉前缀目录，直接查找/lavor.js。

注意：我们发现如果添加了webapp目录，那么该目录也可以存放静态资源，并且默认情况下访问优先级比/META-INF/resources/还要高。

pring Boot 介绍

我们先用1分钟简单了解一下Spring Boot。

百科给的定义是：Spring Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。通过这种方式，Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者。

特点：

1. 创建独立的Spring应用程序

2. 嵌入的Tomcat，无需部署WAR文件

3. 简化Maven配置

4. 自动配置Spring

5. 提供生产就绪型功能，如指标，健康检查和外部配置

6. 绝对没有代码生成并且对XML也没有配置要求 [1]

说了一分钟废话了，下面用九分钟说一下springboot的基本使用。

一、生成springboot项目并提供接口

1.访问start.spring.io 输入包名项目名，添加基本依赖web (选Full stack web...) 生成工程

2.导入工程将下载后的项目解压

使用idea/eclipse的导入 import -> exist maven project. IEDA下是自带maven插件的，eclipse的话得自己配置一下。自己配置的方法也很简单，此处不做介绍

3.编写接口

建包controller，写TestRestController类

4.启动项目

行主类：项目名+Application的main方法

前台输入：localhost:8080/test即可显示：call success!

总结：没错，第一个springboot的demo就这么完成了。是不是很6很简单很暴力。分分钟我们就开发了一个项目，提供了一个接口。别人也可以通过访问这个接口获取到我们提供的数据了。比起之前的springmvc项目开始前的还需要配置各种xml的是不是爽多了。

二、springboot访问html页面

1.springboot推荐前台使用thymeleaf模板

pom.xml文件中引入thymeleaf依赖：

(ps通过： mvnrepository.com 或 search.maven.org 可以找到所需依赖的dependency)

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

2.在自带的application.properties中对thymeleaf进行配置

### server config

server.ip=192.168.0.77

server.port=8080

server.servlet.context-path: /sbDemo

### themeleaf

spring.thymeleaf.prefix=classpath:/templates/pages/

spring.thymeleaf.suffix=.html

spring.thymeleaf.mode=HTML5

spring.thymeleaf.encoding=UTF-8

spring.thymeleaf.content-type=text/html

spring.thymeleaf.cache=false

3.后台与html交互

controller类

在Controller写前往html的接口，并提供数据

写前台hello.html

接收并显示数据。thymeleaf的用法跟jsp差不多。能完成所有jsp能完成的事

访问接口后前台显示：访问路径为 192.168.0.77:8080/sbDemo/hello

注：路径前面对应你的配置文件application.properties中server的ip,port,context-path.

补充：html中需要引用css与js文件时，如果css和js不是直接在static下，而是在static下的文件夹中。在后台需要配置对静态资源的引用，否则访问不到资源文件。添加配置后，html中就可以用@{...}来引用static下的js/css/img等资源。当然，如果你只提供接口提供数据不涉及页面的话就不需要这些了。

前台引用如图：

三、springboot访问数据库

1.pom.xml中引入相关数据库如mysql驱动依赖和mybatis依赖：

<groupId>mysql</groupId>

<artifactId>mysql-connector-java</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-jdbc</artifactId>

</dependency>

<groupId>org.mybatis.spring.boot</groupId>

<artifactId>mybatis-spring-boot-starter</artifactId>

</dependency>

引入数据库依赖后，在application.properties中配置数据库连接

2.编写Dao层从数据库获取数据，并测试

建库后，插入表数据sql：

DROP TABLE IF EXISTS `users`;

CREATE TABLE `users` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`name` varchar(40) DEFAULT NULL,

`age` int(11) DEFAULT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

-- ----------------------------

-- Records of users

-- ----------------------------

INSERT INTO `users` VALUES ('1', '东邪', '41');

INSERT INTO `users` VALUES ('2', '吸毒', '42');

建立dao层获取表数据，类中引用Mapper注解即可。(当然，也可以选择用mapper.xml文件的形式，此处不介绍。)

测试类测试能不能获取到数据，用自带的src/test/java即可：

测试成功结果如下:

这时候就可以写controller、service、dao层的调用关系了。

此时，前台的数据就可以显示为从数据库获取的数据了。

在线咨询

上一篇：巧用CSS3-Animation动画，实现小程序弹幕效果
下一篇：新手入门HTML5开发，你必须先搞懂这6个问题

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

我是这样使用SpringBoot(WEB服务)

pring Boot 介绍

一、生成springboot项目并提供接口

二、springboot访问html页面

三、springboot访问数据库

您的项目需求