简介

在一次的突发奇想中，我决定使用阿里云-OSS搭建一个属于自己的云盘。本文是对这个项目的回顾。提个小插曲：通过调用阿里写好的接口，后端很快就写完了。反而是前端的数据渲染把我难倒了（前端对我来说太难了）。

本项目使用：Layui，SpringBoot，Linux
Gitee地址

后端

作为一个后端程序员，首先解决的肯定是后端–文件查询，文件上传，文件下载三个接口，因为他简单啊。

依赖

在和其他SpringBoot项目通用的依赖之外，还需要添加一个OSS依赖

1
2
3
4
5
<dependency>
    <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
    <version>3.11.1</version>
</dependency>

只需要添加一个特殊依赖就行，是不是很简单

配置OSSClient实例

开始编写接口之后，需要先进行一些准备工作：创建OSSClient实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@Configuration
public class OSSConfig {
    // oss地址，例：oss-cn-chengdu.aliyuncs.com
    @Value("${oss.end-point}")
    private String endPoint;
    // 你的AccessKeyID
    @Value("${oss.accesskey-id}")
    private String accesskeyId;
    // 你的AccessKey密钥
    @Value("${oss.accesskey-secret}")
    private String accesskeySecret;
    // 你查询的bucker名称
    @Value("${oss.bucket-name}")
    private String bucketName;
    // key可以理解文件名称，OSS的文件分级是通过'/'实现的，可以理解为 key = 文件夹名称 + "/" +文件名称
    private static String key = getKey();

    // 设置文件存储在 "年/月/日/” 目录下
    public static String getKey() {
        LocalDate date = LocalDate.now();
        String[] params = date.toString().split("-");
        key = params[0] + "/" + params[1] + "/" + params[2] + "/";
        return key;
    }

    // 创建OSSClient实例并注册到容器中
    @Bean
    // 使用多例模式，因为SpringBoot默认为单例模式，当建立连接再关闭之后，下一个程序就无法调用了
    @Scope(value = ConfigurableBeanFactory.SCOPE_PROTOTYPE )
    public OSS client(){
        return new OSSClientBuilder().build(endPoint, accesskeyId, accesskeySecret);
    }
}

文件上传

OSS官方文档

Controller层使用MultipartFile类型接受，再转为流式文件上传。

1
2
3
// 接口
public DataDo<?> upload(MultipartFile file) {
}

阿里云提供了两种简单的文件上传方式：

1
2
3
4
// 文件上传
client.putObject(new PutObjectRequest(bucketName, key, createSampleFile()));
// 流式上传
client.putObject(bucketName, key, new ByteArrayInputStream(content.getBytes()));

这里我使用流式上传的方式，方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
public boolean upload(MultipartFile multipartFile) {
        try {
            config.client().putObject(bucketName,
                    key + multipartFile.getOriginalFilename(),
                    multipartFile.getInputStream());
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            config.client().shutdown();
        }
        return true;
    }

如上，文件上传就写完了。你还可以给文件上传添加一个进度条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
public class FileWithProgress {

    /**
     * The uploading progress listener. Its progressChanged API is called by the SDK when there's an update.
     */
    static class PutObjectProgressListener implements ProgressListener {

        private long bytesWritten = 0;
        private long totalBytes = -1;
        private boolean succeed = false;

        @Override
        public void progressChanged(ProgressEvent progressEvent) {
            long bytes = progressEvent.getBytes();
            ProgressEventType eventType = progressEvent.getEventType();
            switch (eventType) {
                case TRANSFER_STARTED_EVENT:
                    System.out.println("Start to upload......");
                    break;

                case REQUEST_CONTENT_LENGTH_EVENT:
                    this.totalBytes = bytes;
                    System.out.println(this.totalBytes + " bytes in total will be uploaded to OSS");
                    break;

                case REQUEST_BYTE_TRANSFER_EVENT:
                    this.bytesWritten += bytes;
                    if (this.totalBytes != -1) {
                        int percent = (int) (this.bytesWritten * 100.0 / this.totalBytes);
                        System.out.println(bytes + " bytes have been written at this time, upload progress: " +
                                percent + "%(" + this.bytesWritten + "/" + this.totalBytes + ")");
                    } else {
                        System.out.println(bytes + " bytes have been written at this time, upload ratio: unknown" +
                                "(" + this.bytesWritten + "/...)");
                    }
                    break;

                case TRANSFER_COMPLETED_EVENT:
                    this.succeed = true;
                    System.out.println("Succeed to upload, " + this.bytesWritten + " bytes have been transferred in total");
                    break;

                case TRANSFER_FAILED_EVENT:
                    System.out.println("Failed to upload, " + this.bytesWritten + " bytes have been transferred");
                    break;

                default:
                    break;
            }
        }

        public boolean isSucceed() {
            return succeed;
        }
    }

    /**
     * The downloading progress listener. Its progressChanged API is called by the SDK when there's an update.
     */
    static class GetObjectProgressListener implements ProgressListener {

        private long bytesRead = 0;
        private long totalBytes = -1;
        private boolean succeed = false;

        @Override
        public void progressChanged(ProgressEvent progressEvent) {
            long bytes = progressEvent.getBytes();
            ProgressEventType eventType = progressEvent.getEventType();
            switch (eventType) {
                case TRANSFER_STARTED_EVENT:
                    System.out.println("Start to download......");
                    break;

                case RESPONSE_CONTENT_LENGTH_EVENT:
                    this.totalBytes = bytes;
                    System.out.println(this.totalBytes + " bytes in total will be downloaded to a local file");
                    break;

                case RESPONSE_BYTE_TRANSFER_EVENT:
                    this.bytesRead += bytes;
                    if (this.totalBytes != -1) {
                        int percent = (int) (this.bytesRead * 100.0 / this.totalBytes);
                        System.out.println(bytes + " bytes have been read at this time, download progress: " +
                                percent + "%(" + this.bytesRead + "/" + this.totalBytes + ")");
                    } else {
                        System.out.println(bytes + " bytes have been read at this time, download ratio: unknown" +
                                "(" + this.bytesRead + "/...)");
                    }
                    break;

                case TRANSFER_COMPLETED_EVENT:
                    this.succeed = true;
                    System.out.println("Succeed to download, " + this.bytesRead + " bytes have been transferred in total");
                    break;

                case TRANSFER_FAILED_EVENT:
                    System.out.println("Failed to download, " + this.bytesRead + " bytes have been transferred");
                    break;

                default:
                    break;
            }
        }

        public boolean isSucceed() {
            return succeed;
        }
    }

    public boolean upload(MultipartFile multipartFile) {
        try {
            config.client().putObject(new PutObjectRequest(bucketName,
                    key + multipartFile.getOriginalFilename(),
                    multipartFile.getInputStream()).<PutObjectRequest>withProgressListener(new
                    PutObjectProgressListener()));
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            config.client().shutdown();
        }
        return true;
    }
}

只需要将上面的类复制过去，并把上传方式改为

1
2
3
4
config.client().putObject(new PutObjectRequest(bucketName,
                    key + multipartFile.getOriginalFilename(),
                    multipartFile.getInputStream()).<PutObjectRequest>withProgressListener(new
                    PutObjectProgressListener()));

上传时就可以在控制台看到进度输出了。

文件列表

阿里云提供了很多OSS查询文件的接口->OSS列举文件，这里简单调用其中一个

1
2
3
4
5
// prefix为前缀，如果传入prefix，就匹配前缀查询，不传入就查询所有
// 因为我的前端使用树形接口展示，一次取出所有结果并自带查询，所以不传前缀也没有问题
ObjectListing objectListing = config.client().listObjects(bucketName, prefix);
List<OSSObjectSummary> sums = objectListing.getObjectSummaries();
// 如上，只需要两行代码，查询结果就出来了

文件下载

文件下载需要在文件列表查询返回的结果上进行，但是也只需要两行代码就能完成

1
2
3
4
5
public DataDo<?> getFile(String key) {
    // 设置url过期时间为一小时
    Date expiration = new Date(System.currentTimeMillis() + 3600 * 1000);
    return DataDo.ok(config.client().generatePresignedUrl(bucketName, key, expiration));
}

上述代码将根据文件的key返回一个一小时内有效的临时链接来提供给访客访问。

简单的三个接口就写完了，实在太简单，都不知道能写什么了。接下来进入对我来说最难的一部分–前端。

前端

我的前端页面基于Layui，使用了Y-admin后台管理模板来实现，同时使用treetable-lay来实现列表展示，效果如下:

20201120091222

树形表格treeTable实现了layui数据表格的大部分功能，并且在用法上与几乎数据表格一致， 支持懒加载、复选框联动(半选)、拖拽列宽、固定表头等功能。

treetable-lay

下载treeTable.js放在layui目录下，导入treeTable.js

1
<script src="/layui/treeTable.js"></script>

跟Layui的数据表格一样，在body部分添加一个表格，然后使用js进行渲染

1
<table id="treeFiles" lay-filter="files"></table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
layui.config({
            base: '/layui/'
        }).use(['layer', 'util', 'treeTable'], function () {
            var treeTable = layui.treeTable;
            var $ = layui.jquery;

            // 渲染树形表格
            var tree = treeTable.render({
                elem: '#treeFiles',
                height: 'full-21',
                url: '/file/files',
                // toolbar: '#toolbar',
                tree: {
                    iconIndex: 0, // 折叠图标显示在第几列
                    isPidData: true, // 是否是id、pid形式数据
                    idName: 'id', // id字段名称
                    pidName: 'parentId', // pid字段名称
                    getIcon: 'ew-tree-icon-style2' // 图标
                },
                cols: [
                    [{
                        field: 'name',
                        title: '文件名',
                    }, {
                        field: 'size',
                        title: '大小',
                        templet: '#fileSize',
                        width: 100,
                        sort: true,
                        align: 'center',
                    }, {
                        field: 'storageClass',
                        title: '存储类型',
                        templet: '#fileStorageClass',
                        width: 100,
                        align: 'center',
                    }, {
                        field: 'lastModified',
                        title: '最后更新',
                        sort: true,
                        autoSort: true,
                        width: 200,
                        templet: '#lastModified',
                        align: 'center',
                    }, {
                        fixed: 'right',
                        title: '下载',
                        toolbar: '#bar',
                        width: 100,
                        align: 'center',
                    }]
                ],
            });

设置完成后，还需要对后端返回数据进行修改，具体参考FileWithProgress.java。这里描述一下我的大致思路：

  1. 通过List的取出存在的年月日三类数据，并设置普通数据的”parentId”为所属时间，”id”为取出’/‘的key，例如：2020/11/01/abc.pdf,”parentId”为”20201101”，”id”为”202011101abc.pdf”
  2. 设置年的”parentId”为0，”id”为年，例如：2020–那么他的”parentId”为0，”id”为”2020”
  3. 设置月的”parentId”为所属年份，“id”为年+月，例如：2020/11–”parentId”为”2020”，”id”为”202011”
  4. 设置日的”parentId”为所属年份，“id”为年+月，例如：2020/11–”parentId”为”2020”，”id”为”202011”
  5. 添加年月日数据后，清空存储年月日的变量，为下一次列表查询做准备。

注意：treeTable要求返回code为0

文件下载按钮

相信大家已经看到之前的js渲染列表有一行下载按钮，这就是提供的文件下载按钮了。

和之前一样，先在body部分添加

1
<script type="text/html" id="toolbar"></script>

然后在之前的渲染下方添加按钮监听事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
treeTable.on('tool(treeFiles)', function (obj) {
                layer.confirm('请确认是否下载',function (index) {
                    var data = obj.data;
                    var key = data.key;
                    if (key != null) {
                        $.ajax({
                            type: 'GET',
                            url: '/file/file',
                            data: {
                                key: key
                            },
                            dataType: 'json',
                            success: function (data) {
                                window.location.href = data.data;
                            }
                        })
                    }
                    layer.close(index);
                })
            });

当点击按钮后，将文件对应的key传给后端，获取返回的临时url，通过跳转url的方式下载文件。文件下载部分就完成了。

文件上传页面

基于Layui的使用，我设置两种文件上传的方式（拖拽上传单个/从列表选择多个文件一次性上传），界面如下：

20201120093637

这个很简单了，直接复制Layui官方文档就行，链接->Layui-文件上传

我的代码参考->upload.html

项目部署

第一步：项目打包

点击Idea项目右方侧边栏的maven，点开Lifecycle，先点击clean（清楚原有target目录），再点击package。接下来就可以在target目录看到jar包了。

20201120094922

20201120095016

第二步：上传到服务器，如果想部署到服务器的话，通过你自己的方式把jar文件上传到服务器，本地启动就跳过本步骤，看下一步

第三步：切换到项目所在目录，启动项目:

1
java -jar *.jar // *.jar就是你的jar包的名字

启动成功后，你就可以在[ip:port]访问这个项目了，例如本地启动就可以在[127.0.0.1:8080]访问

配置nginx（可选）

配置nginx的配置文件，参考nginx配置ssl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
server{
    listen 443 ssl;
    # https
    server_name 你的域名

    charset utf-8;

    # 证书第一个文件地址
    ssl_certificate /usr/local/nginx/ssl/file.shiming.online/1_file.shiming.online_bundle.crt;
    # 证书第二个文件地址
    ssl_certificate_key /usr/local/nginx/ssl/file.shiming.online/2_file.shiming.online.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_prefer_server_ciphers on;

    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # 跳转到你的项目地址
        proxy_pass http://127.0.0.1:8090/;

    }
}

server {
    listen 80;
    server_name 你的域名;
    # 转为https
    rewrite ^/(.*) https://file.shiming.online/$1 permanent;
}