題記

我想大家應該都接觸過檔案管理系統，不管是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 方式

<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