Baidu cloud high imitation project based on Spring Boot

Recommend a cloud disk open source project that is rarely known as a substitute for a certain degree of cloud.

The project uses the most popular front-end and back-end separation architecture for development and deployment, and aims to provide users and enterprises with a simple and convenient file storage solution that can manage files with a complete directory structure system. The following technology stacks are mainly used:

Front end: Element UI, Vue, Node.js, Webpack

Backend: MySQL, Spring Boot, MyBatis, JPA, JWT

01.   Function screenshot

Page Layout

The page layout is divided into three areas, namely the menu bar, file operations, and navigation area.

Netdisk homepage

The left menu bar can be collapsed, and the table operation column can be collapsed, which can control the display and hiding of the columns in the current table.

Batch operation function

File View-List Mode

File View-Grid Mode

File View-   Timeline Mode

Create folder

File icon size adjustment

File move

File online decompression

File upload in fragments

Files are uploaded in multiple pieces, integrated with simiple-uplader's file second upload and breakpoint resume functions.

Drag and drop upload

Screenshot paste upload

After directly using any screenshot tool to take a screenshot, use Ctrl + V in the drag area to paste the image, and click Upload Image to upload it.

File recycle bin

File single and batch sharing

You can choose the expiration time and whether you need to extract the code:

Provide quick copy link and extract code to others:

The effect of pasting the sharing link and extracting the code is similar to that of Baidu Cloud:


Others view the shared content, and support the function of saving to the network disk:

List of shared files

Support to quickly copy the current sharing link and extraction code in the list, and mark the sharing time and expiration status:

Video online preview

When the file type is video, click to open the preview window and display the playlist. It supports fast forward, rewind, pause, double-speed playback, full-screen playback, download video, and collapse playlists.

Audio online playback

02.   How to install

Environmental preparation

The compilation and operation of the source code depends on the following development environment. The version numbers listed below are for reference only:

  • JDK version: 8 +
  • MySQL version: 5+
  • Node.js version: 12.12.1
  • Nginx version: 1.17.3
  • Git version: 2.24.0

Code download

Download the front-end and back-end code separately. For the open source address, you can follow the WeChat public account "Wang Guan GitHub" and reply "0603" to download.

Compile and run

Enter the root directory of the background code and click install.bat to compile. After the compilation is completed, a release package will be generated.

The release package is independent, and you can copy it to any place with a Java environment for execution.

Enter the bin directory, as shown below:

From the above figure, you can see that there are 4 start and stop scripts, and their functions are as follows:

  • linux restart script:
  • linux startup script:
  • linux stop script:
  • Windows startup script: winstart.bat

Windows environment start and stop

After clicking winstart.bat in the windows environment, a Spring Boot startup black window will appear. This window cannot be closed. Closing means the end of the program. When the following words appear, the background has been successfully started.

Linux environment start and stop

In the Linux environment, the specific operation is not described here, you can view:

Front-end code compilation

First execute the following command in the foreground code directory to compile

npm install

Foreground development environment operation

This method is suitable for development and execution of commands

npm run serve

After the operation is completed, the access path will be displayed on the interface, which can be accessed through the browser

Foreground production environment operation

Execute npm run build deployment: After packaging, the folder dist will be generated, the files under the dist folder will be placed in the nginx/html directory, and nginx/conf/nginx.conf will be configured. The specific configuration is as follows:

server {        listen       80;    server_name localhost; #将localhost修改为您证书绑定的域名,例如。         location / {            root   html;            index  index.html index.htm;      try_files  $uri $uri/ /index.html; #可以防止页面刷新404        }     location /api/{      #proxy_set_hearder host $host;      #proxy_set_header X-forwarded-for $proxy_add_x_forwarded_for;      #proxy_set_header X-real-ip $remote_addr;            # 配置此处用于获取客户端的真实IP      proxy_set_header Host $http_host;      proxy_set_header X-Real-IP $remote_addr;      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;      proxy_set_header X-Forwarded-Proto $scheme;      proxy_pass  http://localhost:8080/;    }               error_page   500 502 503 504  /50x.html;        location = /50x.html {            root   html;        }    }

Browser access

The following interface appears, indicating that you are done

By the way, if you want to use MySql as the project database, you can switch the project to the production environment configuration. Please refer to:

For this open source project, you can follow the official account "Wandering GitHub" and reply "0603" to download.

Finally, to prevent you from not being able to find this article, you can bookmark and like it so that you can read it easily. Welcome to follow the official account and visit GitHub (ggGithub).

Recommended reading

1. What fun projects are there on GitHub?

2. The hottest GitHub projects in May

3. This remote desktop software is open source

4. Inventory of Baidu's 4 awesome open source projects