173 lines
8.1 KiB
HTML
173 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>测试前端连接</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body class="bg-gray-100 min-h-screen">
|
|
<div class="container mx-auto px-4 py-8">
|
|
<div class="max-w-2xl mx-auto">
|
|
<h1 class="text-3xl font-bold text-center mb-8">翻译应用测试页面</h1>
|
|
|
|
<!-- 后端连接测试 -->
|
|
<div class="bg-white rounded-lg shadow p-6 mb-6">
|
|
<h2 class="text-xl font-semibold mb-4">后端连接测试</h2>
|
|
<button id="testHealth" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 mr-2">
|
|
测试健康检查
|
|
</button>
|
|
<button id="testSupabase" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
|
|
测试Supabase连接
|
|
</button>
|
|
<div id="healthResult" class="mt-4 p-3 rounded bg-gray-50"></div>
|
|
</div>
|
|
|
|
<!-- 用户注册测试 -->
|
|
<div class="bg-white rounded-lg shadow p-6 mb-6">
|
|
<h2 class="text-xl font-semibold mb-4">用户注册测试</h2>
|
|
<form id="registerForm" class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">邮箱</label>
|
|
<input type="email" id="email" required
|
|
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">密码</label>
|
|
<input type="password" id="password" required
|
|
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">姓名</label>
|
|
<input type="text" id="fullName"
|
|
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">电话</label>
|
|
<input type="tel" id="phone"
|
|
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
<button type="submit" class="w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
|
|
注册用户
|
|
</button>
|
|
</form>
|
|
<div id="registerResult" class="mt-4 p-3 rounded bg-gray-50"></div>
|
|
</div>
|
|
|
|
<!-- 用户登录测试 -->
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<h2 class="text-xl font-semibold mb-4">用户登录测试</h2>
|
|
<form id="loginForm" class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">邮箱</label>
|
|
<input type="email" id="loginEmail" required
|
|
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">密码</label>
|
|
<input type="password" id="loginPassword" required
|
|
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
<button type="submit" class="w-full bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600">
|
|
登录
|
|
</button>
|
|
</form>
|
|
<div id="loginResult" class="mt-4 p-3 rounded bg-gray-50"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const API_BASE = 'http://localhost:3001';
|
|
|
|
// 显示结果的函数
|
|
function showResult(elementId, data, isSuccess = true) {
|
|
const element = document.getElementById(elementId);
|
|
element.className = `mt-4 p-3 rounded ${isSuccess ? 'bg-green-50 text-green-800' : 'bg-red-50 text-red-800'}`;
|
|
element.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
|
|
}
|
|
|
|
// 测试健康检查
|
|
document.getElementById('testHealth').addEventListener('click', async () => {
|
|
try {
|
|
const response = await fetch(`${API_BASE}/health`);
|
|
const data = await response.json();
|
|
showResult('healthResult', data, response.ok);
|
|
} catch (error) {
|
|
showResult('healthResult', { error: error.message }, false);
|
|
}
|
|
});
|
|
|
|
// 测试Supabase连接
|
|
document.getElementById('testSupabase').addEventListener('click', async () => {
|
|
try {
|
|
const response = await fetch(`${API_BASE}/api/test/supabase`);
|
|
const data = await response.json();
|
|
showResult('healthResult', data, response.ok);
|
|
} catch (error) {
|
|
showResult('healthResult', { error: error.message }, false);
|
|
}
|
|
});
|
|
|
|
// 处理注册表单
|
|
document.getElementById('registerForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const formData = {
|
|
email: document.getElementById('email').value,
|
|
password: document.getElementById('password').value,
|
|
fullName: document.getElementById('fullName').value,
|
|
phone: document.getElementById('phone').value
|
|
};
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/api/test/register`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(formData)
|
|
});
|
|
|
|
const data = await response.json();
|
|
showResult('registerResult', data, response.ok);
|
|
|
|
if (response.ok) {
|
|
document.getElementById('registerForm').reset();
|
|
}
|
|
} catch (error) {
|
|
showResult('registerResult', { error: error.message }, false);
|
|
}
|
|
});
|
|
|
|
// 处理登录表单
|
|
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const formData = {
|
|
email: document.getElementById('loginEmail').value,
|
|
password: document.getElementById('loginPassword').value
|
|
};
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/api/test/login`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(formData)
|
|
});
|
|
|
|
const data = await response.json();
|
|
showResult('loginResult', data, response.ok);
|
|
|
|
if (response.ok) {
|
|
document.getElementById('loginForm').reset();
|
|
}
|
|
} catch (error) {
|
|
showResult('loginResult', { error: error.message }, false);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |