整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
面完成了API服務(wù)(雖然這個API沒什么用)。接下去來個WEB服務(wù)，在前面項目中加上個頁面。這章目標(biāo)是通過訪問一個URL展示一個界面，從服務(wù)端傳遞參數(shù)值到界面中展示動態(tài)數(shù)據(jù)。這里還會涉及到webjars的應(yīng)用。
目錄與文件
在項目src/main/resources目錄下創(chuàng)建兩個目錄，分別是templates各static，templates 存放模板文件，static 存放靜態(tài)文件。
目錄
在static目錄放入一張圖片，圖片名稱為001.jpg，啟動項目。打開瀏覽器訪問http://localhost/001.jpg
訪問資源
spring boot會默認(rèn)從static查找靜態(tài)資源，在這里還可以放css，js，html等文件，都可以直接訪問到。但是，這里的html文件只能是靜態(tài)頁面，服務(wù)端不能傳值到界面中。
templates中加入一個index.html，內(nèi)容如下<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>這里是標(biāo)題</title> </head> <body> <div> <p>這是首頁</p> </div> </body> </html>
重啟服務(wù)，瀏覽器中訪問http://localhost/index.html
404
找不到頁面，如果index.html放到static目錄中是可以訪問的。templates目錄中的文件是不能直接訪問。下面講到這么訪問templates中的文件。
當(dāng)前目錄
目錄
使用模板
訪問templates文件，首先要引入模板引擎。這里使用thymeleaf，在pom.xml文件中包含thymeleaf組件。
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
如圖
增加package：com.biboheart.demos.web，在package中創(chuàng)建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函數(shù)，home返回"index"頁面，即templates/index.html模板生成的頁面。
重新啟動服務(wù)，在瀏覽器中訪問 http://localhost/home
home頁面
這時候，頁面展示的是index.html的內(nèi)容。向頁面?zhèn)髦?/p>
這里用Model對象傳值到模板中
調(diào)整controller的實現(xiàn)
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";
}
}
在函數(shù)中增加兩個參數(shù)，Model model用于向模板傳遞值，name用于接收請求參數(shù)。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>這里是標(biāo)題</title>
</head>
<body>
<div>
<p>這是首頁</p>
<p>歡迎你：<span th:text="${name}"></span></p>
</div>
</body>
</html>
重新啟動服務(wù)，在瀏覽器中訪問http://localhost/home?name=biboheart
參數(shù)
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>這里是標(biāo)題</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效果
模板中包含靜態(tài)資源
將靜態(tài)資源001.jpg圖片在模板中顯示，修改后index.html文件如下
我們開發(fā)Web應(yīng)用的時候，會用到大量的js、css、image、html等靜態(tài)資源資源。
靜態(tài)資源映射
默認(rèn)情況下，我們只需要將靜態(tài)資源放在一下幾個目錄中就可以直接通過url在瀏覽器中訪問了。
如果這四個目錄中有相同的靜態(tài)資源文件，那么優(yōu)先訪問哪個目錄下面的資源啊？
靜態(tài)資源的默認(rèn)訪問優(yōu)先級：/META-INF/resources/>/resources/>/static/>/public/
在四個目錄中都放一個static.html的文件，每個html文件中都說明自己所在的目錄，訪問結(jié)果如下：
SpringBoot關(guān)于靜態(tài)資源的訪問涉及到了application.properties中的兩個屬性：
# 默認(rèn)值為 /* spring.mvc.static-path-pattern= #這里設(shè)置靜態(tài)資源匹配的url-pattern # 默認(rèn)值為 classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/ spring.resources.static-locations= #這里設(shè)置要指向的路徑，多個使用英文逗號隔開，在前面的優(yōu)先級高
此時，我們豁然開朗，知道默認(rèn)情況下靜態(tài)資源為什么放在/META-INF/resources/、/resources/、/static/、/public/這四個目錄了，還有這四個目錄訪問的優(yōu)先級是怎么來的了。
修改靜態(tài)資源映射的方法：
spring.mvc.static-path-pattern=/mystatic/* spring.resources.static-locations= classpath:mystatic/
在resources資源目錄中創(chuàng)建一個mystatic目錄，在該目錄下面創(chuàng)建一個static.html文件，訪問結(jié)果如下：
注意：還可以設(shè)置外部磁盤目錄，設(shè)置方式不變，格式如下：file:d/mystatic/。
WebJars
WebJars將前端資源（css,js,image,html等等）打包到j(luò)ar中，然后使用基于JVM的包管理器（比如 Maven、Gradle 等）管理前端依賴的方案。SpringBoot中也可以通過WebJars來訪問靜態(tài)資源。
SpringBoot默認(rèn)將/webjars/**映射到 classpath:/META-INF/resources/webjars/。
所以默認(rèn)情況下我們需要訪問WebJars中的資源，需要將其jar包放到classpath:/META-INF/resources/webjars/目錄中。
我們來使用一下WebJars:
<dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>2.1.1</version> </dependency>
<script src="/webjars/jquery/2.1.1/jquery.js"></script>
版本號統(tǒng)一管理
如果我們有很多頁面都是用了WebJars中的資源，而我們現(xiàn)在要升級WebJars的版本，豈不是要在每個頁面中都改動一下，這樣很麻煩啊，有沒有簡單的方法啊。此時，我們可以進(jìn)行版本號統(tǒng)一管理。
<dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator</artifactId> </dependency>
<script src="/webjarslocator/jquery/jquery.js"></script>
靜態(tài)資源版本管理
當(dāng)我們資源內(nèi)容發(fā)生變化時，由于瀏覽器緩存，用戶本地的靜態(tài)資源還是舊的資源，為了防止這種情況導(dǎo)致的問題，我們可能會手動在請求url的時候加個版本號或者其他方式。
<script type="text/javascript" src="/lavor.js?v=1.1"></script>
SpringMVC提供了兩種方式可以幫助我們很容易地解決這類問題。
MD5方式
spring.resources.chain.strategy.content.enabled=true spring.resources.chain.strategy.content.paths=/**
<script src="${urls.getForLookupPath('/lavor.js') }"></script>
<script src="/lavor-fdfa0502716d517c6cad4f2536aa02a1.js"></script>
請求/lavor-fdfa0502716d517c6cad4f2536aa02a1.js，我們MD5配置的paths=/**，所以SpringMVC會嘗試url中是否包含-，如果包含會去掉后面這部分，然后去映射的目錄（如webapp根目錄，上面提到的四大靜態(tài)映射目錄）查找/lavor.js文件，如果能找到就返回。
版本號方式
spring.resources.chain.strategy.fixed.enabled=true #版本號處理的路徑 spring.resources.chain.strategy.fixed.paths=/** # 版本號，可以為所處理路徑中的資源加上/v1.1目錄前綴 spring.resources.chain.strategy.fixed.version=v1.1
<script src="${urls.getForLookupPath('/lavor.js') }"></script>
<script src="/v1.1/lavor.js"></script>
請求/v1.1/lavor.js，會查看v1.1是不是版本號，如果是就去掉前綴目錄，直接查找/lavor.js。
注意：我們發(fā)現(xiàn)如果添加了webapp目錄，那么該目錄也可以存放靜態(tài)資源，并且默認(rèn)情況下訪問優(yōu)先級比/META-INF/resources/還要高。
我們先用1分鐘簡單了解一下Spring Boot。
百科給的定義是：Spring Boot是由Pivotal團(tuán)隊提供的全新框架，其設(shè)計目的是用來簡化新Spring應(yīng)用的初始搭建以及開發(fā)過程。該框架使用了特定的方式來進(jìn)行配置，從而使開發(fā)人員不再需要定義樣板化的配置。通過這種方式，Spring Boot致力于在蓬勃發(fā)展的快速應(yīng)用開發(fā)領(lǐng)域(rapid application development)成為領(lǐng)導(dǎo)者。
特點：
1. 創(chuàng)建獨立的Spring應(yīng)用程序
2. 嵌入的Tomcat，無需部署WAR文件
3. 簡化Maven配置
4. 自動配置Spring
5. 提供生產(chǎn)就緒型功能，如指標(biāo)，健康檢查和外部配置
6. 絕對沒有代碼生成并且對XML也沒有配置要求 [1]
說了一分鐘廢話了，下面用九分鐘說一下springboot的基本使用。
1.訪問start.spring.io 輸入包名項目名，添加基本依賴web (選Full stack web...) 生成工程
2.導(dǎo)入工程將下載后的項目解壓
使用idea/eclipse的導(dǎo)入 import -> exist maven project. IEDA下是自帶maven插件的，eclipse的話得自己配置一下。自己配置的方法也很簡單，此處不做介紹
3.編寫接口
建包controller，寫TestRestController類
4.啟動項目
行主類：項目名+Application的main方法
前臺輸入：localhost:8080/test即可顯示：call success!
總結(jié)：沒錯，第一個springboot的demo就這么完成了。是不是很6很簡單很暴力。分分鐘我們就開發(fā)了一個項目，提供了一個接口。別人也可以通過訪問這個接口獲取到我們提供的數(shù)據(jù)了。比起之前的springmvc項目開始前的還需要配置各種xml的是不是爽多了。
1.springboot推薦前臺使用thymeleaf模板
pom.xml文件中引入thymeleaf依賴：
(ps通過： mvnrepository.com 或 search.maven.org 可以找到所需依賴的dependency)
<!-- thymeleaf 模板相關(guān) -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2.在自帶的application.properties中對thymeleaf進(jìn)行配置
### 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的接口，并提供數(shù)據(jù)
寫前臺hello.html
接收并顯示數(shù)據(jù)。thymeleaf的用法跟jsp差不多。能完成所有jsp能完成的事
訪問接口后前臺顯示：訪問路徑為 192.168.0.77:8080/sbDemo/hello
注：路徑前面對應(yīng)你的配置文件application.properties中server的ip,port,context-path.
補充：html中需要引用css與js文件時，如果css和js不是直接在static下，而是在static下的文件夾中。在后臺需要配置對靜態(tài)資源的引用，否則訪問不到資源文件。添加配置后，html中就可以用@{...}來引用static下的js/css/img等資源。當(dāng)然，如果你只提供接口提供數(shù)據(jù)不涉及頁面的話就不需要這些了。
前臺引用如圖：
1.pom.xml中引入相關(guān)數(shù)據(jù)庫如mysql驅(qū)動依賴和mybatis依賴：
<!-- mysql 數(shù)據(jù)庫相關(guān) -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<!-- mybatis 依賴相關(guān) -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.1.1</version>
</dependency>
引入數(shù)據(jù)庫依賴后，在application.properties中配置數(shù)據(jù)庫連接
2.編寫Dao層從數(shù)據(jù)庫獲取數(shù)據(jù)，并測試
建庫后，插入表數(shù)據(jù)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層獲取表數(shù)據(jù)，類中引用Mapper注解即可。(當(dāng)然，也可以選擇用mapper.xml文件的形式，此處不介紹。)
測試類測試能不能獲取到數(shù)據(jù)，用自帶的src/test/java即可：
測試成功結(jié)果如下:
這時候就可以寫controller、service、dao層的調(diào)用關(guān)系了。
此時，前臺的數(shù)據(jù)就可以顯示為從數(shù)據(jù)庫獲取的數(shù)據(jù)了。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
