feat: 初始化 SpringBoot + 前端全栈博客项目

2026-10-22 06:29:05 +00:00
commit cb08080ca7
5 changed files with 180 additions and 0 deletions
@@ -0,0 +1,80 @@
+<!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>