基於Spring Boot、AngularJS、CSS3、HTML5的響應式檔案瀏覽管理器

我想大家應該都接觸過檔案管理系統，不管是Windows中的檔案管理工具還是基於瀏覽器的WEB檔案管理工具，功能大同小異。雖然檔案管理工具看似簡單，但真正實現起來還有點繁瑣，特別是介面這一塊，最近項目正好需要用到檔案管理模組，糾結了下是自己寫一個呢（基本不太現實，本人很懶--！）還是找一個開源的，網上看了一番不是介面太醜，就是太臃腫，正好最近在學習AngularJS，發現一款基於AngularJS的檔案管理系統，正好拿來練練手，於是自己簡單整合修改了下！

技術選型

好了，廢話不多說了，進入正題，介紹下用的到技術棧：

AngularJS：

一款前端MVC架構，也稱為MVVM架構(Model-View-ViewModel)，被收購後目前屬於Google公司，最大的好處在於它是基於模型驅動的，不像jQuery基於DOM驅動，不用自己去操作視圖，利用專屬的雙向繫結機制，自動根據模型同步更新到視圖，而且具有Router路由、Controller、Service等功能，對於實現單頁面、或者前後端分離應用是個不錯的選擇，但是學習曲線比較陡，相對有點複雜。

Spring Boot:

這東西貌似出來很久了，最近在學習Spring Cloud時候才去用了下，簡單來說就是我們以前使用Strtus覺得配置太複雜了，於是轉到了SpringMVC，有人覺得SpringMVC還是太複雜了，要配置一大堆XML和依賴管理，於是有了String Boot，幾個註解就能就搞定複雜的XML配置，而且不需要web容器環境，只需要裝個JDK就能跑（內嵌的嵌入式tomcat/jetty），打包出來就是jar檔案，還支援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方式

Xml

<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>
引用的話

Html

<!-- 第三方外掛程式 -->

<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"/>

運行

檢出項目 git clone https://git.oschina.net/alexyang/spring-boot-filemanager.git
再項目根目錄執行 mvn spring-boot:run 或運行SpringBootFileManagerApplication
編譯angular-filemanager
其實利用webjars可以做到用java去編譯，以後空了再弄吧。

編譯需要用到node.js和gulp模組
先安裝全域gulp模組 npm install -g gulp
然後在項目根目錄執行npm install
最後打包編譯到dist目錄下 gulp build