前言

由于一直使用 GitHub + jsdelivr 的免费图床,自从去年 jsdelivr 挂了之后,博客的图片就无法加载了,所以只好自己搭建图床。

经过一段时间的折腾,我在自己组装的 all in one 服务器上搭建了兰空图床,并利用兰空 Pro 插件实现了粘贴上传到图床并直接插入文章的功能。

然而,兰空图床免费版的 token 需要使用第三方请求来获取,非常不方便。因此,我在后台程序中添加了一个 POST 请求,使用异步请求来获取 token。

实现效果

实现教程

添加代码

/resources/views/common/api.blade.php 文件中合适的位置添加以下代码:

<div>
    <p class="text-lg text-gray-700 font-semibold">Token 获取</p>
    <script src="//lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
    <form id="token" action="{{ request()->getSchemeAndHttpHost() }}/api/v1/tokens" method="POST">
        <div class="my-2 text-sm">
            <div class="form-group qqlogin" style="display: none;">
                <div class="input-group-addon">邮箱</div>
                <input type="email" id="email" name="email" value="{{ Auth::user()->email }}">
            </div>
            <div style="display: inline-flex;position: relative;">
                <div class="px-4 py-3 text-right sm:px-6" style="color: #555;background-color: #eee;border: 1px solid #ccc;">密码</div>
                <input type="password" id="password" name="password" placeholder="输入你的密码">
                <a href="javascript:;" class="button px-4 py-3 sm:px-6" style="color: #fff;background-color: #8abcd1;border-color: #d0dfe6;margin-left:10px;">
                    <div>点击获取</div>
                </a>
            </div>
            <div class="list-group">
                <x-code>
                    <span style="color:tomato;user-select: none;">token:</span><span id="tokenCode"></span>
                </x-code>
            </div>
        </div>
    </form>
    <script>
        $(document).ready(function() {
            $("#token .button").click(function() {
                var url = $("#token").attr("action");
                var email = $("#email").val();
                var password = $("#password").val();
                $.ajax({
                    type: 'post',
                    url: url,
                    data: {
                        email: email,
                        password: password
                    },
                    success: function(data) {
                        if (data.status == true) {
                            $("#tokenCode").html('Bearer ' + data.data.token)
                        } else {
                            if (data.message == "password 不能为空。") {
                                $("#tokenCode").html("密码不能为空!")
                            } else if (data.message == "The email address or password is incorrect.") {
                                $("#tokenCode").html("请确认密码是否正确!")
                            }
                        }
                    },
                    error: function() {
                        $("#tokenCode").html("请求过于频繁,请稍后再试!")
                    }
                });

            });
        });
    </script>
</div>

添加位置

刷新后台

建议使用强制刷新 Ctrl+F5

结语

其实实现原理很简单,就是使用 jQueryAjax 来获取 token。

之前看到有人搭建了一个专门用来获取兰空图床 token 的程序,我觉得太麻烦了,所以才有了这个简便的想法。


最佳标题:

如何使用 Ajax 实现兰空图床的 Token 获取

标签:

END
本文作者:
文章标题: 给兰空图床添加一个后台获取Tonken功能
本文地址: https://www.haovps.top/archives/240.html
版权说明:若无注明,本文皆 高性能VPS推荐与IT技术博客 | Haovps.Top 原创,转载请保留文章出处。
cc
最后修改:2024 年 07 月 17 日
如果觉得我的文章对你有用,请随意赞赏