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.
126 lines
4.1 KiB
126 lines
4.1 KiB
<!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>
|
|
|