????????前文講解了swagger測試服務控制器，實現了數據庫數據訪問，這些功能都是運行在后臺服務器上，實際用戶并不能直接調用接口獲取數據，即使用戶能夠利用接口獲取到數據，數據也是結構化數據，不能爭取轉化成用戶使用的數據狀態，因此，生動形象的用戶界面也是軟件開發中不可獲取的重要內容。

????????此文講解給項目配置靜態資源訪問目錄、包括css、js、img、html等文件的訪問目錄。

圖1、項目目錄

1、創建目錄

????????如圖1所示，項目靜態資源目錄是放到“src/main/resources”中，springboot默認配置的/**映射到/static（或/public ，/resources，/META-INF/resources），此處利用默認路徑”/static”,創建項目目錄

（1）創建“static”文件夾

右鍵點擊“src/main/resources”中，彈出菜單中選擇“new” à “Folder”，輸入文件夾名稱 “static”，點擊“finish”按鈕

（2）在“static”創建文件夾“assets”，后期在介紹spring security時再介紹這個文件夾的開關作用。創建方法參考（1）；

（3）在“assets”下，分別創建“css”、“js”、“img”文件夾，創建方法參考（1）；

圖2、添加靜態資源后項目目錄

2、添加靜態資源

????????頁面開發，不管使用那種技術，都需要引入對應的技術文件，本文以jQuery為例，講解靜態資源文件配置和訪問。

? ? ? ? (1) 在“js”文件夾下，添加“jquery.min.js”文件

? ? ? ? (2) 在“css”文件夾下，添加“demo.css”文件

? ? ? ? (3) 在“img”文件夾下，添加“海豚.png”文件

備注：目錄下文件為舉例，學友可以自行添加

圖3、靜態資源目錄

3、測試靜態資源訪問

????????項目啟動后，使用瀏覽器訪問目錄資源，詳細如下：

? ? ? ? （1）訪問“jquery.min.js”文件

瀏覽器中輸入地址http://localhost:2885/assets/js/jquery.min.js，返回如圖4所示。

圖4、js文件返回圖

? ? ? ? （2）訪問“demo.css”文件

瀏覽器中輸入地址http://localhost:2885/assets/css/demo.css，返回如圖5所示。

圖5、css文件返回圖

? ? ? ? （3）訪問“海豚.png”文件

瀏覽器中輸入地址http://localhost:2885/assets/img/海豚.png，返回如圖6所示。

圖6、img文件返回圖

到此，springboot添加資源訪問目錄及目錄測試講解就結束了，供大家學習參考。

??????下文講解項目添加spring security，實現系統資源的保護及系統訪問登錄授權等功能。