spring boot之整合頁面

阿新 • • 發佈：2018-12-27

上篇部落格把正常spring後臺應用都整合進來，搭建成功，但是還沒有頁面應用啊，這兒有個思路，一是可以自己搞個web系統，把spring boot專案當做純粹的後臺提供服務的java專案，web系統通過http client的方式來呼叫；二是直接就在spring boot的基礎上進行開發（新穎）。

目前Spring官方已經不推薦使用JSP來開發WEB了，而是推薦使用如下幾種模板引擎來開發：

Thymeleaf(Spring官方推薦)
FreeMarker
Velocity
Groovy
Mustache

目前業界使用最廣泛的還是FreeMaker和Velocity。
依賴包為：

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

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

這兒我們先成功的搭建一套再說，我們先用freemaker搭建一下：
在src/main/resources下新建一個templates的資料夾（spring boot預設存放模板的路徑）；
在templates下新建hello.ftl（注意字尾），內容如下：

<html>
<head></head>
<body>
    Welcome
    <p>當前時間為：${vv}</p>
</body>
</html>

Controller為：

//注意不是restController 

@Controller
//@RequestMapping("/*")
public class testController {

//在application.properties中定義了vv=a
     @Value("${vv}")
     private String vv; 

    @RequestMapping(value="/hello")
    //注意這兒沒有@responseBody
    public String welcome(ModelMap map){
        Date date = new Date();
        //獲取配置檔案中的資訊vv
        System.out.println(vv);
        //傳到template模板中（會把模板中能找到的所有的ftl檔案中的名稱都替換掉）
         map.addAttribute("vv", date.toString());
        //返回頁面hello.ftl
        return "hello";
    }

}

很簡單吧，這麼快就搭建完成了；主要還是spring boot把這種定義進行規範了，我們只要按照模板規定的做法進行使用就很快；

現在頁面有了，當然得有js和css以及圖片等靜態資源啊，哪有沒渲染的空頁面玩的，彆著急，spring boot也規範好了。

Spring Boot預設提供靜態資源目錄位置需置於classpath下，目錄名需符合如下規則（/**對應的，也就是說訪問時在根目錄下：http://localhost:2600/就訪問到這級目錄了）：

/static
/public
/resources
/META-INF/resources
或者可以更改預設路徑：http://www.cnblogs.com/magicalSam/p/7189476.html
舉例：我們可以在src/main/resources/目錄下建立static，在該位置放置一個圖片檔案。啟動程式後，嘗試訪問http://localhost:8080/D.jpg。如能顯示圖片，配置成功。不過這種理論上是正確的，但我並沒有測試成功，在/static下建了個images資料夾，放個d.jpg檔案，訪問：http://localhost:8080/images/D.jpg

一般情況下我們把頁面放在templates中，靜態資源放在static中就OK了，頁面引用這些靜態資源時,注意相對路徑，因為/static為/*，所以不需要引用到static那級；
像上面的目錄機構，/images/d.jpg就可以了
還有另外一種引用靜態檔案的方法，使用webjars

WebJars是一個很神奇的東西，可以讓大家以jar包的形式來使用前端的各種框架、元件。

什麼是WebJars

什麼是WebJars？WebJars是將客戶端（瀏覽器）資源（JavaScript，Css等）打成jar包檔案，以對資源進行統一依賴管理。WebJars的jar包部署在Maven中央倉庫上。

為什麼使用

我們在開發Java web專案的時候會使用像Maven，Gradle等構建工具以實現對jar包版本依賴管理，以及專案的自動化管理，但是對於JavaScript，Css等前端資源包，我們只能採用拷貝到webapp下的方式，這樣做就無法對這些資源進行依賴管理。那麼WebJars就提供給我們這些前端資源的jar包形勢，我們就可以進行依賴管理。

如何使用

1、 WebJars主官網查詢對於的元件，比如Vuejs

<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>vue</artifactId>
    <version>1.0.21</version>
</dependency>

2、頁面引入

<link th:href="@{/webjars/bootstrap/3.3.6/dist/css/bootstrap.css}" rel="stylesheet"></link>

就可以正常使用了！

spring boot之整合頁面

spring boot之整合頁面

Spring Boot 之整合 EazyUI 打造 Web 應用

spring boot之整合shiro實現使用者認證、授權

spring boot之整合kafka

小代學Spring Boot之整合MyBatis

Spring Boot之Swagger2整合

spring boot之自定義錯誤頁面

Spring Boot 之annotation註解

spring boot 之熱部署(三)

Spring-boot 之 Swagger2（打造不一樣的api）

Spring-boot之jQuery File Upload後臺配置方法

spring Boot .yml頁面

從零一起學Spring Boot之LayIM項目長成記（一）初見 Spring Boot

從零一起學Spring Boot之LayIM項目長成記（五）websocket

從零一起學Spring Boot之LayIM項目長成記（六）單聊群聊的實現

Spring Boot 之 HelloWorld詳解

spring boot 跳轉頁面和熱加載的坑

Spring Boot之Hello World

Spring boot + Freemarker 整合

spring boot之入門配置（一）

spring boot之整合頁面

相關推薦