Response File browser Manager based on spring Boot, Angularjs, CSS3, HTML5

I think everyone should have contacted the file management system, whether it's a file manager in Windows or a browser-based Web File Manager, with similar functionality. Although the file manager seems simple, but the real implementation is still a bit cumbersome, especially the interface of this piece, the recent project just need to use the file management module, tangled up under is their own write a it (basically not too realistic, I am very lazy--! Or to find an open source, online to see a bit is not too ugly interface, is too bloated, just recently in learning Angularjs, found a angularjs based on the file management system, just take to practice practicing, so their simple integration modified under!

Technology selection

Well, nonsense not much said, to get to the point, introduced under the technology stack:

Angularjs:

A front-end MVC framework, also known as the MVVM Framework (Model-view-viewmodel), is now owned by Google, and the biggest benefit is that it is model-based, unlike jquery based on DOM-driven, without having to manipulate the view itself. Using the unique two-way binding mechanism, automatically updates to the view according to the model, and has router routing, Controller, service and other functions, for the implementation of single page, or front and back end separation application is a good choice, but the learning curve is relatively steep, a little more complex.

Spring Boot:

This thing seems to come out for a long time, recently in the learning Spring cloud time to use the next, simple is that we used to strtus feel configuration is too complicated, and then turned to SPRINGMVC, some people think SPRINGMVC is too complex, To configure a lot of XML and dependency management, so with string Boot, a few annotations can handle complex XML configurations, and do not require a web container environment, just install a JDK to run (embedded Tomcat/jetty), packaged out is a jar file, Also support groovy grammar, concise enough, it is a must, lazy people change the world! It was chosen because it was a back-and-forth separation project, and the backend needed only the system API interface, while Springboot was the best choice for the rest API (now a popular micro-service!--).

Environmental dependency:

Maven
jdk1.7+
Servlet3.0
Node.js
Gulp

function Introduction

Separation of the front and back ends for easy integration into your familiar language project
Support selection callback, such as bullet box file selection
Multi-language support
Supports multiple file list layouts (Icon/detail list)
Multiple file uploads
Support File Search
Copy, move, rename
Delete, modify, preview, download

Direct compression, decompression zip file (currently only supports ZIP, subsequent extensions)
Support for setting file permissions (UNIX chmod format)

Mobile End Support

Project description

The project structure is the following diagram, very simple:

The main three modules:

App Angular-filemanager Source code directory
Springbootfilemanagerapplication.java API Interface class, also Springboot startup class:

Dist package compiled Angular-filemanager compressed files
Index.html Project Access entry file, direct ip:8080 access after startup

You will find that the front end is only two files, JQuery, bootstrap, angularjs these dependencies do not need? Of course not, here we in order to streamline (install force), used to webjars,webjars the commonly used Third-party JS Plug-ins and class library packaged into the form of a jar package, we can refer to the way the jar package to reference the third party JS plug-in first to configure dependencies, the official support of a variety of build tools maven, Gradle Wait, here we use the Maven method

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>
Quote words

Html

<!--third-party plug-in-->

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

Run

Check out the project git clone https://git.oschina.net/alexyang/spring-boot-filemanager.git
Re-project root directory execution mvn Spring-boot:run or run springbootfilemanagerapplication
Compiling Angular-filemanager
In fact, the use of webjars can be done with Java to compile, later empty to get it again.

The Node.js and gulp modules are needed for compilation
First install the Global Gulp module NPM install-g Gulp
Then perform NPM install in the project root directory
Finally packaged into the Dist directory Gulp build