coder/tech-forum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化技术论坛与技术分享网站

Browse Source 
功能模块:
- 技术交流: 发帖、评论回复、点赞收藏、标签分类
- 工具分享: 创建主题、子主题分支、问题追问、关注功能
- 用户系统: 用户名+邮箱(必填)+手机(可选)+密码确认

页面:
- 首页: 帖子列表、热门标签、工具分享主题
- 登录/注册页
- 发帖页
- 帖子详情页
- 主题详情页
- 用户主页

技术栈:
- Flask + Tailwind CSS
- JSON文件存储
- JWT认证
- 响应式设计

端口: 19004
This commit is contained in:
hubian
2026-04-08 12:35:09 +08:00
commit 7f8fbc9605
12 changed files with 2490 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
frontend/login.html Normal file
View File

@@ -0,0 +1,124 @@
<!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>
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
<style>
.gradient-bg { background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); }
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="min-h-screen flex">
<!-- 左侧装饰 -->
<div class="hidden lg:flex lg:w-1/2 gradient-bg items-center justify-center p-12">
<div class="text-white max-w-md">
<h1 class="text-4xl font-bold mb-6">👨‍💻 技术论坛</h1>
<p class="text-xl mb-4">技术交流 & 工具分享</p>
<ul class="space-y-3 text-white/90">
<li class="flex items-center gap-2">
<i class="ri-checkbox-circle-line"></i>
技术交流讨论
</li>
<li class="flex items-center gap-2">
<i class="ri-checkbox-circle-line"></i>
工具框架分享
</li>
<li class="flex items-center gap-2">
<i class="ri-checkbox-circle-line"></i>
问题追问解答
</li>
</ul>
</div>
</div>
<!-- 右侧表单 -->
<div class="w-full lg:w-1/2 flex items-center justify-center p-8">
<div class="w-full max-w-md">
<div class="text-center mb-8">
<h2 class="text-2xl font-bold text-gray-800">欢迎回来</h2>
<p class="text-gray-500 mt-2">登录您的账号</p>
</div>
<form id="loginForm" class="space-y-5">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">用户名/邮箱</label>
<div class="relative">
<i class="ri-user-line absolute left-3 top-3 text-gray-400"></i>
<input type="text" id="username" placeholder="请输入用户名或邮箱"
class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
<div class="relative">
<i class="ri-lock-line absolute left-3 top-3 text-gray-400"></i>
<input type="password" id="password" placeholder="请输入密码"
class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
</div>
</div>
<button type="submit"
class="w-full py-3 gradient-bg text-white rounded-lg font-medium hover:opacity-90 transition-opacity">
登录
</button>
</form>
<div class="mt-6 text-center">
<p class="text-gray-500">
还没有账号？
<a href="/register" class="text-blue-500 hover:text-blue-600 font-medium">立即注册</a>
</p>
</div>
<div id="errorMsg" class="mt-4 p-3 bg-red-50 text-red-500 rounded-lg text-sm hidden"></div>
</div>
</div>
</div>
<script>
// 检查是否已登录
if (localStorage.getItem('token')) {
window.location.href = '/';
}
document.getElementById('loginForm').addEventListener('submit', async (e) => {
e.preventDefault();
const username = document.getElementById('username').value.trim();
const password = document.getElementById('password').value;
if (!username || !password) {
showError('请填写用户名和密码');
return;
}
try {
const res = await fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password })
});
const data = await res.json();
if (data.success) {
localStorage.setItem('token', data.token);
localStorage.setItem('user', JSON.stringify(data.user));
window.location.href = '/';
} else {
showError(data.error);
}
} catch (err) {
showError('网络错误，请重试');
}
});
function showError(msg) {
const el = document.getElementById('errorMsg');
el.textContent = msg;
el.classList.remove('hidden');
}
</script>
</body>
</html>