You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
4.1 KiB
127 lines
4.1 KiB
1 week ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>验证码测试</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
padding: 20px;
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
max-width: 600px;
|
||
|
|
margin: 0 auto;
|
||
|
|
background: white;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
|
|
}
|
||
|
|
.captcha-container {
|
||
|
|
margin: 20px 0;
|
||
|
|
padding: 20px;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
.captcha-image {
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
border-radius: 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
button {
|
||
|
|
background: #007bff;
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
padding: 10px 20px;
|
||
|
|
border-radius: 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
margin: 10px 5px;
|
||
|
|
}
|
||
|
|
button:hover {
|
||
|
|
background: #0056b3;
|
||
|
|
}
|
||
|
|
.error {
|
||
|
|
color: red;
|
||
|
|
margin: 10px 0;
|
||
|
|
}
|
||
|
|
.success {
|
||
|
|
color: green;
|
||
|
|
margin: 10px 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1>验证码显示测试</h1>
|
||
|
|
|
||
|
|
<div class="captcha-container">
|
||
|
|
<h3>验证码图片：</h3>
|
||
|
|
<img id="captchaImage" class="captcha-image" alt="验证码" style="display: none;" />
|
||
|
|
<div id="captchaPlaceholder">点击按钮获取验证码</div>
|
||
|
|
<br>
|
||
|
|
<button onclick="getCaptcha()">获取验证码</button>
|
||
|
|
<button onclick="refreshCaptcha()">刷新验证码</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="status"></div>
|
||
|
|
<div id="response"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
let currentCaptchaId = '';
|
||
|
|
|
||
|
|
async function getCaptcha() {
|
||
|
|
try {
|
||
|
|
document.getElementById('status').innerHTML = '<div class="success">正在获取验证码...</div>';
|
||
|
|
|
||
|
|
const response = await fetch('http://localhost:8080/api/auth/captcha', {
|
||
|
|
method: 'GET',
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/json'
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
if (!response.ok) {
|
||
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||
|
|
}
|
||
|
|
|
||
|
|
const data = await response.json();
|
||
|
|
console.log('验证码响应:', data);
|
||
|
|
|
||
|
|
if (data.code === 200 && data.data) {
|
||
|
|
const captchaImage = document.getElementById('captchaImage');
|
||
|
|
const placeholder = document.getElementById('captchaPlaceholder');
|
||
|
|
|
||
|
|
captchaImage.src = data.data.captcha_image;
|
||
|
|
captchaImage.style.display = 'block';
|
||
|
|
placeholder.style.display = 'none';
|
||
|
|
|
||
|
|
currentCaptchaId = data.data.captcha_id;
|
||
|
|
|
||
|
|
document.getElementById('status').innerHTML = '<div class="success">验证码获取成功！</div>';
|
||
|
|
document.getElementById('response').innerHTML = `
|
||
|
|
<h4>响应数据：</h4>
|
||
|
|
<pre>${JSON.stringify(data, null, 2)}</pre>
|
||
|
|
`;
|
||
|
|
} else {
|
||
|
|
throw new Error(data.message || '获取验证码失败');
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('获取验证码失败:', error);
|
||
|
|
document.getElementById('status').innerHTML = `<div class="error">获取验证码失败: ${error.message}</div>`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function refreshCaptcha() {
|
||
|
|
getCaptcha();
|
||
|
|
}
|
||
|
|
|
||
|
|
// 页面加载时自动获取验证码
|
||
|
|
window.onload = function() {
|
||
|
|
getCaptcha();
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|