前言
由于一直使用 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
。
结语
其实实现原理很简单,就是使用 jQuery 的 Ajax 来获取 token。
之前看到有人搭建了一个专门用来获取兰空图床 token 的程序,我觉得太麻烦了,所以才有了这个简便的想法。
最佳标题:
如何使用 Ajax 实现兰空图床的 Token 获取