基於Spring Boot、AngularJS、CSS3、HTML5的響應式檔案瀏覽管理器
題記
我想大家應該都接觸過檔案管理系統,不管是Windows中的檔案管理器還是基於瀏覽器的WEB檔案管理器,功能大同小異。雖然檔案管理器看似簡單,但真正實現起來還有點繁瑣,特別是介面這一塊,最近專案正好需要用到檔案管理模組,糾結了下是自己寫一個呢(基本不太現實,本人很懶--!)還是找一個開源的,網上看了一番不是介面太醜,就是太臃腫,正好最近在學習AngularJS,發現一款基於AngularJS的檔案管理系統,正好拿來練練手,於是自己簡單整合修改了下!
技術選型
好了,廢話不多說了,進入正題,介紹下用的到技術棧:
AngularJS:
一款前端MVC框架,也稱為MVVM框架 (Model-View-ViewModel)
Router
路由、 Controller
、 Service
等功能,對於實現單頁面、或者前後端分離應用是個不錯的選擇,但是學習曲線比較陡,相對有點複雜。
Spring Boot:
這東西貌似出來很久了,最近在學習Spring Cloud時候才去用了下,簡單來說就是我們以前使用Strtus覺得配置太複雜了,於是轉到了SpringMVC,有人覺得SpringMVC還是太複雜了,要配置一大堆XML和依賴管理,於是有了String Boot,幾個註解就能就搞定複雜的XML配置,而且不需要web容器環境,只需要裝個JDK就能跑(內嵌的嵌入式 tomcat/jetty
Groovy
語法,夠簡潔了吧,真是懶人必備,懶人改變世界!之所以選它是因為是前後端分離專案,後端只需要系統API介面,而SpringBoot是提供REST
API最佳選擇(現在流行的微服務!--)。
環境依賴:
Maven
JDK1.7+
Servlet3.0
Node.js
Gulp
功能介紹
- 多語言支援
- 支援多種檔案列表佈局(圖示/詳細列表)
- 多檔案上傳
- 支援檔案搜尋
- 複製、移動、重新命名
- 刪除、修改、預覽、下載
- 直接壓縮、解壓縮zip檔案(目前僅支援zip,後續擴充套件)
- 支援設定檔案許可權(UNIX chmod格式)
- 移動端支援
專案說明
專案結構如下圖,很簡單:
主要的三個模組:
app
angular-filemanager原始碼目錄
SpringBootFileManagerApplication.java
API介面類,也是SpringBoot啟動類:
dist
打包編譯好的angular-filemanager壓縮檔案
index.html
專案訪問入口檔案,啟動後直接ip:8080訪問
大家會發現前端難道就只有兩個檔案, jQuery、bootstrap、angularjs
這些依賴難道又不需要?當然不是,這裡我們為了精簡(裝逼),用到了 webjars
, webjars
把常用的第三方js外掛和類庫打包成了 jar
包的形式,我們可以通過引用jar包的方式引用第三方js外掛
首先得配置依賴,官方支援多種構建工具 maven、gradle
等,這裡我們使用 Maven
方式
<dependency>
<groupId>org.webjars</groupId>
<artifactId>angularjs</artifactId>
<version>1.5.0</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>angular-translate</artifactId>
<version>2.9.1</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>ng-file-upload</artifactId>
<version>12.0.1</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>2.2.0</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.6</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootswatch-paper</artifactId>
<version>3.3.5+4</version>
</dependency>
引用的話
<!-- 第三方外掛 -->
<script src="webjars/angularjs/1.5.0/angular.min.js"></script>
<script src="webjars/angular-translate/2.9.1/angular-translate.min.js"></script>
<script src="webjars/ng-file-upload/12.0.1/ng-file-upload.min.js"></script>
<script src="webjars/jquery/2.2.0/jquery.min.js"></script>
<script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="webjars/bootswatch-paper/3.3.5+4/css/bootstrap.min.css"/>
執行
編譯angular-filemanager
其實利用webjars可以做到用java去編譯,以後空了再弄吧。
- 編譯需要用到
node.js
和gulp
模組 - 先安裝全域性gulp模組
npm install -g gulp
- 然後在專案根目錄執行
npm install
- 最後打包編譯到dist目錄下
gulp build