基于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 方式

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

运行

• 检出项目 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