使用雨云对象存储搭建下载站？接上期

PatrickYao0422

已于 2024-08-14 23:12:27 修改

阅读量875

点赞数 23

文章标签：服务器运维

于 2024-08-14 22:21:08 首次发布

本文链接：https://blog.csdn.net/2301_76197567/article/details/141112324

版权

1.个性化域名

有没有发现，每次我们需要请求对象存储里的资源，都需要加上"https://cn-sy1.rains3.com"？

我们可以个性化我们的域名！

1.获得域名

我们有两种解决方案：

A 使用雨云的二级域名

优点 - 成本低，操作方便

缺点 - 使用公用顶域，不够个性化

打开域名服务 | 雨云 (rainyun.com)，可以看到，2000分就可以兑换一个二级域名。

子域名自选，注意不要和别人的重复。

主域名也自选，CDN加速可选可不选。

重点：

记录值相当于是一个别名，需要输入API端点地址，不要加https，例如：

cn-sy1.rains3.com

B 使用其他平台注册顶域

优点 - 个性化，自由度高

缺点 - 需要备案

注册并备案后，打开域名的DNS管理界面（不同厂商有差异）。

添加一条解析：

类型：cname

主机名自选，比如down就可以用down.xxx.xxx访问

记录值：同雨云二级域名的格式

2.绑定域名

打开存储桶的域名管理界面：

添加你的域名，过一会就可以生效。

2.下载站搭建

1.HTML a标签下载特性

首先我们需要了解HTML<a>标签的一个小特性。

以ex.cn为例，如果ex.cn/page1.html想要下载ex.cn/yac.txt，那么加上download属性：

<a href="https://ex.cn/yac.txt" download>Download</a>

就可以下载。

但如果是ex.cn/page2.html下载node.com/yac.txt，同样加上download：

<a href="https://node.com/yac.txt" download>Download</a>

就只会跳转到相应文件，而不会下载。

这是因为，浏览器为了保护用户下载安全，跨源下载是不会生效的。

下面我们做个小实验：

<a href="https://node.com/yac.zip" download>Download</a>

你就会水灵灵的发现，怎么又可以下载了？

这是因为，当遇到浏览器可以解析的文件类型才会展示，如果像exe,7z这样的二进制文件，就会抛给电脑解析，就下载下来了！

所以，我们可以把要下载的文件打包成zip，就可以了！

2.使用bootstrap优化用户体验

除了网站功能丰富，一个好的样式也会让用户赏心悦目。我们将使用bootstrap优化用户体验。

清单：

CSS

https://cdn.staticfile.net/twitter-bootstrap/3.3.7/css/bootstrap.min.css

JS 1

https://cdn.staticfile.net/twitter-bootstrap/3.3.7/js/bootstrap.min.js

JS 2

https://cdn.staticfile.net/jquery/2.1.1/jquery.min.js

完整HTML代码，不过多解释了：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta charset="utf-8">
        <title>NiceSoft download website</title>

        <link rel="stylesheet" text="text/css" href="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.net/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <br>
            <div class="jumbotron">
                <h1>NiceSoft download website</h1>
                <p>You can download many software here!</p>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <h3>Visual Studio Code</h3>
                    <p>A STRONG text editor!Supports many language!</p>
                    <a href="https://cn-sy1.rains3.com/nicesoft/vscode/win64_u.exe" download>win64 user</a>
                    &nbsp;
                    <a href="https://cn-sy1.rains3.com/nicesoft/vscode/win64_s.exe" download>win64 system</a>
                </div>
                <div class="col-sm-4">
                    <h3>Notepad++</h3>
                    <p>Like VSCode,it is also a strong editor!</p>
                    <a href="https://cn-sy1.rains3.com/nicesoft/npd_plusplus/win64.exe" download>win64</a>
                </div>
            </div>
        </div>
    </body>
</html>

效果如图：（推荐使用高版本浏览器，否则可能会出现CSS无法加载等问题。）

感觉非常的Pro啊！

当然，你也可以学习reCAPTCHA（不推荐，要科学上网，推荐Cloudflare的Turnstile）防止bot刷流量；也可以加上密码保护，只有特定的人可以访问……

Turnstile可以看官方文档：cloudflare.com

密码保护提供一个模板：

<input type="text" id="password_enter">
<button onclick="verify('https://...')">Submit</button>
<script>
function verify(target) {
    if (document.getElementById("password_enter").value == 123456) {
        window.location.href= target;
    } else {
        alert("Wrong password!");
    }
}
</script>

这样也不太安全，密码直接暴露在JS文件中。

注意第二行verify后面的一定要是单引号！

有条件可以购买个服务器，然后学习后端技术，保护数据安全！