81 lines
3.6 KiB
HTML
81 lines
3.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>我的个人技术博客</title>
|
||
|
|
<style>
|
||
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
|
body { font-family: -apple-system, sans-serif; background: #f8fafc; color: #1e293b; padding: 40px 20px; }
|
||
|
|
.container { max-width: 800px; margin: 0 auto; }
|
||
|
|
header { margin-bottom: 30px; text-align: center; }
|
||
|
|
h1 { font-size: 28px; color: #0f172a; margin-bottom: 8px; }
|
||
|
|
p.desc { color: #64748b; font-size: 14px; }
|
||
|
|
.form-box { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); margin-bottom: 30px; }
|
||
|
|
input, textarea { width: 100%; padding: 10px; margin-bottom: 12px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px; }
|
||
|
|
button { background: #3b82f6; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-weight: bold; }
|
||
|
|
button:hover { background: #2563eb; }
|
||
|
|
.post-card { background: white; padding: 24px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); margin-bottom: 20px; transition: transform 0.2s; }
|
||
|
|
.post-card:hover { transform: translateY(-2px); }
|
||
|
|
.post-title { font-size: 20px; font-weight: bold; color: #1e293b; margin-bottom: 8px; }
|
||
|
|
.post-meta { font-size: 12px; color: #94a3b8; margin-bottom: 14px; }
|
||
|
|
.post-content { color: #334155; line-height: 1.6; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<header>
|
||
|
|
<h1>⚡ 旺总的技术全栈博客</h1>
|
||
|
|
<p class="desc">基于 Spring Boot 3 + Vue 架构 · Docker 容器驱动 · CI/CD 自动部署</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="form-box">
|
||
|
|
<input type="text" id="title" placeholder="文章标题...">
|
||
|
|
<input type="text" id="author" placeholder="作者名 (默认: 旺总)" value="旺总">
|
||
|
|
<textarea id="content" rows="3" placeholder="写点什么..."></textarea>
|
||
|
|
<button onclick="publish()">发布新文章</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="posts">加载中...</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const API_URL = '/api/posts';
|
||
|
|
|
||
|
|
async function loadPosts() {
|
||
|
|
try {
|
||
|
|
const res = await fetch(API_URL);
|
||
|
|
const data = await res.json();
|
||
|
|
document.getElementById('posts').innerHTML = data.map(p => `
|
||
|
|
<div class="post-card">
|
||
|
|
<div class="post-title">${p.title}</div>
|
||
|
|
<div class="post-meta">👤 ${p.author || '旺总'} · 📅 ${p.date || '刚刚'}</div>
|
||
|
|
<div class="post-content">${p.content}</div>
|
||
|
|
</div>
|
||
|
|
`).join('');
|
||
|
|
} catch (e) {
|
||
|
|
document.getElementById('posts').innerHTML = '<p style="color:red">无法连接后端 API</p>';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function publish() {
|
||
|
|
const title = document.getElementById('title').value;
|
||
|
|
const author = document.getElementById('author').value;
|
||
|
|
const content = document.getElementById('content').value;
|
||
|
|
if (!title || !content) return alert('标题和内容不能为空！');
|
||
|
|
|
||
|
|
await fetch(API_URL, {
|
||
|
|
method: 'POST',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify({ title, author, content, date: new Date().toLocaleDateString() })
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('title').value = '';
|
||
|
|
document.getElementById('content').value = '';
|
||
|
|
loadPosts();
|
||
|
|
}
|
||
|
|
|
||
|
|
loadPosts();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|