cover

题记

我想大家应该都接触过文件管理系统,不管是Windows中的文件管理器还是基于浏览器的WEB文件管理器,功能大同小异。虽然文件管理器看似简单,但真正实现起来还有点繁琐,特别是界面这一块,最近项目正好需要用到文件管理模块,纠结了下是自己写一个呢(基本不太现实,本人很懒--!)还是找一个开源的,网上看了一番不是界面太丑,就是太臃肿,正好最近在学习AngularJS,发现一款基于AngularJS的文件管理系统,正好拿来练练手,于是自己简单集成修改了下!

技术选型

好了,废话不多说了,进入正题,介绍下用的到技术栈:

AngularJS:

一款前端MVC框架,也称为MVVM框架(Model-View-ViewModel),被收购后目前属于Google公司,最大的好处在于它是基于模型驱动的,不像jQuery基于DOM驱动,不用自己去操作视图,利用独有的双向绑定机制,自动根据模型同步更新到视图,而且具有Router路由、ControllerService等功能,对于实现单页面、或者前后端分离应用是个不错的选择,但是学习曲线比较陡,相对有点复杂。

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、tar.gz、rar)
  • 支持设置文件权限(UNIX chmod格式)
  • 移动端支持
  • 支持OFFICE等文档在线预览(原生HTML,非转码成PDF)
  • 即将支持OFFICE等文档在线编辑以及协同写作(估计下一版本吧)

关于OFFCE等文档在线预览

新版支持office 等文档在线预览和(编辑),主要还是感谢onlyoffice这个产品,目前自己部署的话是免费滴。 具体配置方式如下:

  • 部署好onlyoffice,建议是用Docker方式,可自行百度,这里不在重复写教程了

  • 部署好以后,把application.properties里的files.docservice.url.api配置成onlyofficeAPI的地址,以及需要把fileServer.domain配置成文件管理服务所在的全域名

    fileServer.domain配置千万不能配置127或者local等,原因是docker中的onlyoffice如果会访问到本机

项目说明

项目结构如下图,很简单:

主要的三个模块:

app angular-filemanager源代码目录
SpringBootFileManagerApplication.java API接口类,也是SpringBoot启动类:

dist 打包编译好的angular-filemanager压缩文件
index.html 项目访问入口文件,启动后直接ip:8080访问

大家会发现前端难道就只有两个文件,jQuery、bootstrap、angularjs这些依赖难道又不需要?当然不是,这里我们为了精简(装逼),用到了webjarswebjars把常用的第三方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.jsgulp模块
  • 先安装全局gulp模块 npm install -g gulp
  • 然后在项目根目录执行npm install
  • 最后打包编译到dist目录下 gulp build
支付宝扫码打赏 微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

扫描二维码,分享此文章

杨少凡's Picture
杨少凡

殿堂级渣洼工程师,现居重庆,目前就职于人和集团电商部。

Chongqing「重庆」 http://shaofan.org