我是這樣使用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訪問數據庫

您的項目需求