『原创』『教程』给兰空图床添加一个后台获取Tonken功能

前言

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

经过一段时间的折腾，在自己组装的all in one上搭建了兰空图床，利用兰空pro插件可以实现粘贴上传到图床并直接插入文章

但是兰空图床免费版的token需要使用第三方请求来获取，非常的不方便

所以我就自己在后台程序中加了一个post请求，使用异步请求来获取token

实现效果

实现教程

添加代码

直接在 /resources/views/common/api.blade.php 文件里合适的位置添加以下代码

{hide}

<div>
                <p class="text-lg text-gray-700 font-semibold">Tonken获取</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: #337ab7;border-color: #2e6da4;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>
                </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>

优化了一下，添加了一个复制按钮，并且用原生JS重构了一下，避免引用的jQuery失效

<div>
                <p class="text-lg text-gray-700 font-semibold">Tonken获取</p>
                <form id="token" action="{{ request()->getSchemeAndHttpHost() }}/api/v1/tokens" method="POST">
                    <div class="my-2 text-sm">
                        <div style="display:inline-flex;position:relative">
                            <div class="px-4 py-3 text-right sm:px-6" style="color:#555;background:#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 rounded-md" style="color:#fff;background:#337ab7;border-color:#2e6da4;margin-left:10px">
                                <div>点击获取</div>
                            </a>
                        </div>
                        <div class="list-group">
                            <x-code style="white-space: nowrap;">
                                <span style="color:tomato;user-select:none">token：</span>
                                <span id="tokenCode" style="display:inline-block;margin-right:5px"></span>
                                <button type="button" id="copyBtn" style="display:none;padding:2px 8px;background:#28a745;color:white;border:none;border-radius:3px;cursor:pointer;font-size:12px">复制</button>
                            </x-code>
                        </div>
                    </div>
                </form>
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        var btn = document.querySelector('.button'),
                            code = document.getElementById('tokenCode'),
                            copy = document.getElementById('copyBtn'),
                            userEmail = '{{ Auth::user()->email }}';
                        btn.addEventListener('click', function(e) {
                            e.preventDefault();
                            var txt = btn.querySelector('div');
                            txt.textContent = '获取中...';
                            btn.style.pointerEvents = 'none';
                            fetch(document.getElementById('token').action, {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json'
                                    },
                                    body: JSON.stringify({
                                        email: userEmail,
                                        password: document.getElementById('password').value
                                    })
                                })
                                .then(function(r) {
                                    return r.json()
                                })
                                .then(function(d) {
                                    if (d.status) {
                                        code.textContent = 'Bearer ' + d.data.token;
                                        copy.style.display = 'inline-block';
                                    } else {
                                        code.textContent = d.message === "Too Many Attempts." ? '请求过于频繁，请稍后再试！' :
                                            d.message === "password 不能为空。" ? '密码不能为空！' :
                                            d.message === "The email address or password is incorrect." ? '请确认密码是否正确！' :
                                            d.message || '请求失败，请重试！';
                                        copy.style.display = 'none';
                                    }
                                })
                                .catch(function() {
                                    code.textContent = '网络错误，请检查连接！';
                                    copy.style.display = 'none'
                                })
                                .finally(function() {
                                    txt.textContent = '点击获取';
                                    btn.style.pointerEvents = 'auto'
                                });
                        });
                        copy.addEventListener('click', function(e) {
                            e.preventDefault();
                            var text = code.textContent;
                            if (!text || /密码|请求|网络错误/.test(text)) return;
                            var inp = document.createElement('textarea');
                            inp.value = text;
                            document.body.appendChild(inp);
                            inp.select();
                            document.execCommand('copy');
                            document.body.removeChild(inp);
                            var old = copy.textContent;
                            copy.textContent = '已复制';
                            copy.style.background = '#218838';
                            setTimeout(function() {
                                copy.textContent = old;
                                copy.style.background = '#28a745'
                            }, 1000);
                        });
                    });
                </script>
            </div>

{/hide}

添加位置

刷新后台

建议使用强制刷新Ctrl+F5

结语

其实实现原理很简单，就是使用jQuery的Ajax来获取的

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