SpringBoot之開發web頁面

IDEA創建的Springboot web工程如圖做所示

會發現,springboot的工程中並沒有傳統java web項目中的WEB-INF目錄以及下面的web.xml文件

這讓人一頭霧水,以前做java web無論使用什麼框架還沒見過不寫web.xml的

 

兩種web開發思想:

前後端完全分離和使用模板開發;這裏主要介紹下前後端分離這種方式的開發。

1-前後端分離開發

使用這種方式開發web項目,後端全部開發成rest API,前端交給專業的前端開發工程師去開發,後端和前端之前完全解耦,前端工程師可以根據自己的喜好選擇前端開發框架,例如angular、react、vue等。

靜態資源存放路徑:src\main\resources\static\index.html

靜態資源訪問路徑:http://localhost:8080/index.html

js、css、圖片等靜態資源的訪問方式閾值類似;

動態請求全部按照restAPI的方式進行進行響應。

2-使用模板開發

@RequestMapping(value="/") 
public String defaultHandler(){ 
    return "thymeleaf"; 
}

這個例子的是意思是對於所有的請求都將會返回名爲thymeleaf的模板文件

 

Thymeleaf的介紹

簡單說, Thymeleaf 是一個跟 Velocity、FreeMarker 類似的模板引擎,它可以完全替代 JSP 。相較與其他的模板引擎,它有如下三個極吸引人的特點:

  • Thymeleaf 在有網絡和無網絡的環境下皆可運行,即它可以讓美工在瀏覽器查看頁面的靜態效果,也可以讓程序員在服務器查看帶數據的動態頁面效果。這是由於它支持 html 原型,然後在 html 標籤裏增加額外的屬性來達到模板+數據的展示方式。瀏覽器解釋 html 時會忽略未定義的標籤屬性,所以 thymeleaf 的模板可以靜態地運行;當有數據返回到頁面時,Thymeleaf 標籤會動態地替換掉靜態內容,使頁面動態顯示。

  • Thymeleaf 開箱即用的特性。它提供標準和spring標準兩種方言,可以直接套用模板實現JSTL、 OGNL表達式效果,避免每天套模板、該jstl、改標籤的困擾。同時開發人員也可以擴展和創建自定義的方言。

  • Thymeleaf 提供spring標準方言和一個與 SpringMVC 完美集成的可選模塊,可以快速的實現表單綁定、屬性編輯器、國際化等功能。

<!-- pom.xml -->

<properties>
    <java.version>1.8</java.version>
    <!-- 替換成3.0版本-->
    <thymeleaf.version>3.0.0.RELEASE</thymeleaf.version>
    <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
</properties>

<dependencies>

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

</dependencies>
#application.properties配置

server.port=80

spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.check-template=true
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5

注意點:

  • html文件都放在resource目錄下的 templates 文件下
  • 靜態資源,比如css,js,都是放在 resource 目錄下的static文件夾下

 

freemarker 和 thymeleaf 用哪個

freemarker 不足:

thymeleaf由於使用了標籤屬性做爲語法,模版頁面直接用瀏覽器渲染,使得前端和後端可以並行開發。

freemarket使用</>這樣的語法,就無法直接使瀏覽器渲染出原本頁面的樣子。

thymeleaf優點:

    靜態html嵌入標籤屬性,瀏覽器可以直接打開模板文件,便於前後端聯調。
    springboot官方推薦方案。

thymeleaf缺點:

    模板必須符合xml規範

比較下兩者

1.從寫code的習慣角度可能 freemarker更習慣於我們的思維
2.不過從前後分離開發的角度看thymeleaf更合適,值的綁定都是基於html的dom元素屬性的,適合前後聯調。
 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章