spring-boot入門(三)使用HTML視圖

#spring-boot入門(三)使用HTML作爲展示視圖

前後端分離能使項目整體開發效率提高,後端無需再像寫jsp一樣將原本的html改寫爲jsp,加入jstl表達式或者一些java代碼,這對於前端或者後端來說都是一件痛苦的事情。要做到真正的前後端分離,後端只需提供相應的restful接口返回前端請求的數據,同時前後端應用也可以完全分開。
這裏作爲例子展示,將html模板文件與後端工程置於同一工程裏面。

1.搭建基本框架

  • 引入spring boot相關依賴
  • 配置視圖前後綴
  • 編寫控制層
  • 啓動主類

這些東西在前面都已經說過,不再過多闡述,唯一需要注意的是,html作爲靜態資源需放在resources/static目錄下。

控制層,返回視圖到index.html

@RestController
public class IndexController {

    @RequestMapping("/")
    public ModelAndView index() {
        return new ModelAndView("index");
    }

}

html模板代碼index.html,文件位於/resources/static目錄下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
-----hello jasonLin!------
</body>
</html>

資源訪問路徑配置:

#MVC
spring.mvc.view.prefix=/
spring.mvc.view.suffix=.html

pom.xml只需一個依賴即可

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

工程結構如下,紅線劃掉的可以忽略:
這裏寫圖片描述

##2.打包運行

注意要想打包成一個可以執行的jar文件,需加入spring boot的一個插件

            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>

用壓縮軟件打開jar包可以看到資源文件已經被打包到jar包中。

進入jar包所在目錄,運行 java -jar命令啓動應用:
這裏寫圖片描述

可以看到工程已經成功啓動,端口號8089。訪問http://localhost:8089/
這裏寫圖片描述

到此已經能訪問我們的html頁面。

finally:

  • 將html前端的靜態資源文件放於後端工程中不是一個好的選擇,但是能夠快速開發一個web項目。
  • /resources/static靜態資源的默認請求路徑爲/
  • 使用內嵌的容器,避免服務器端繁瑣的配置,直接運行java -jar就能運行是不是很easy

3.更改靜態資源默認的訪問路徑

上面說到/resources/static靜態資源的默認請求路徑爲/ 。假如我的靜態資源位於/resources/static/dist目錄下,但是我不想將請求改爲/dist(這裏要注意一下html中引用其它資源的相對路徑如果是./xxx 在本地更改真個文件加的路徑引用的資源文件是能夠正常定位,但是在web容器中./xxx需改爲/dist/xxx ,這裏涉及到web根路徑和本地文件路徑的問題)可以在application.properties加如下配置:
spring.resources.static-locations=classpath:/static/dist/
這樣當我們訪問/ 時實際定位的資源文件位置是/resources/static/dist 這樣就避免了當更改資源文件的位置時需要更改html中的全部引用。

controller:

@RestController
public class IndexController {

    @RequestMapping("/")
    public ModelAndView index() {
        return new ModelAndView("index");
    }

    @RequestMapping("/homeAction")
    public ModelAndView home() {
        return new ModelAndView("home");
    }
}

resource:

這裏寫圖片描述

application.properties:

這裏寫圖片描述

html:

這裏寫圖片描述

打包運行,訪問http://localhost:8089/homeAction
這裏寫圖片描述

到這裏一個能訪問靜態模板資源文件的應用雛形已經具備,一個web項目不僅僅只是視圖的訪問,還設計到數據庫鏈接、權限過濾、異常處理等等,接下來將講解使用spring boot與數據庫的交互。
以上完整代碼放於:https://github.com/Json-Lin/spring-boot-practice/tree/master/spring-boot-paractice-html

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