aaronxu/Linux-book
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

08-12-周三_16-44-56

Browse Source
This commit is contained in:
AaronXu
2026-08-12 16:44:57 +08:00
parent 56dd5b5adf
commit 460e9c7393
12 changed files with 1047 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files
03.数据库/03.数据库开发项目代码示例/01.笔记网站/admin_notes.php
+227
View File
@@ -0,0 +1,227 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>笔记管理 - 后台 - 笔记小站</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar">
<a class="navbar-brand" href="index.html"><span class="logo-icon">📝</span> 笔记小站</a>
<div class="navbar-actions" id="navbarActions"></div>
</nav>
<div class="admin-layout">
<aside class="admin-sidebar">
<nav class="admin-nav">
<a class="admin-nav-item" href="admin_categories.php">
<span>📂</span> 分类管理
</a>
<a class="admin-nav-item active" href="admin_notes.php">
<span>📝</span> 笔记管理
</a>
<a class="admin-nav-item" href="admin_comments.php">
<span>💬</span> 评论管理
</a>
<a class="admin-nav-item" href="admin_users.php">
<span>👥</span> 用户管理
</a>
</nav>
</aside>
<main class="admin-main">
<div class="admin-panel">
<div class="admin-panel-header">
<h3>📝 笔记管理</h3>
<button class="btn btn-primary btn-sm" onclick="openNoteModal(0)">+ 新增笔记</button>
</div>
<div class="admin-panel-body">
<table class="admin-table">
<thead>
<tr>
<th>ID</th>
<th>标题</th>
<th>分类</th>
<th>作者</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!--
========================================
后端循环输出 <tr>，示例：
<tr>
<td>1</td>
<td>如何搭建个人博客</td>
<td>📂 技术笔记</td>
<td>admin</td>
<td>2026-01-10</td>
<td class="actions">
<button class="btn btn-sm" onclick="openNoteModal(1)">编辑</button>
<button class="btn btn-sm btn-danger" onclick="deleteNote(1)">删除</button>
</td>
</tr>
========================================
-->
</tbody>
</table>
</div>
</div>
</main>
</div>
<!-- ==================== 新增 / 编辑笔记 模态框 ==================== -->
<div class="modal-overlay" id="noteModal" style="display:none;">
<div class="form-modal" onclick="event.stopPropagation()" style="width:580px;max-width:95vw;">
<h3 id="noteModalTitle">新增笔记</h3>
<input type="hidden" id="fnid" value="0">
<div class="form-group">
<label>标题</label>
<input type="text" id="fntitle" placeholder="请输入笔记标题">
</div>
<div class="form-group">
<label>分类</label>
<select id="fncat">
<!--
========================================
后端循环输出 <option>，示例：
<option value="1">📂 技术笔记</option>
<option value="2">📂 生活随笔</option>
========================================
-->
</select>
</div>
<div class="form-group">
<label>内容</label>
<textarea id="fncontent" rows="8" placeholder="请输入笔记内容"></textarea>
</div>
<div class="form-actions">
<button class="btn" onclick="closeNoteModal()">取消</button>
<button class="btn btn-primary" onclick="saveNote()">保存</button>
</div>
</div>
</div>
<!-- ==================== 删除确认模态框 ==================== -->
<div class="modal-overlay" id="deleteModal" style="display:none;">
<div class="form-modal" onclick="event.stopPropagation()">
<h3>⚠️ 确认删除</h3>
<input type="hidden" id="deleteId" value="">
<p style="margin-bottom:16px;">确定要删除该笔记吗？此操作不可恢复。</p>
<div class="form-actions">
<button class="btn" onclick="closeDeleteModal()">取消</button>
<button class="btn btn-danger" onclick="confirmDeleteNote()">确认删除</button>
</div>
</div>
</div>
<div class="toast-container" id="toastContainer"></div>
<script src="js/common.js"></script>
<script>
/* ==================== 笔记模态框 ==================== */
/**
* 打开新增 / 编辑笔记弹窗
* @param {number} id - 笔记 ID，0 = 新增，>0 = 编辑
*/
function openNoteModal(id) {
var titleEl = document.getElementById('noteModalTitle');
var nidEl = document.getElementById('fnid');
var titleVal = document.getElementById('fntitle');
var catVal = document.getElementById('fncat');
var contentVal = document.getElementById('fncontent');
if (id === 0) {
titleEl.textContent = '新增笔记';
nidEl.value = '0';
titleVal.value = '';
catVal.value = '';
contentVal.value = '';
} else {
titleEl.textContent = '编辑笔记';
nidEl.value = id;
// TODO: 开发者自行拉取笔记数据并填入
// titleVal.value = data.title;
// catVal.value = data.categoryId;
// contentVal.value = data.content;
}
document.getElementById('noteModal').style.display = 'flex';
}
/** 关闭笔记模态框 */
function closeNoteModal() {
document.getElementById('noteModal').style.display = 'none';
document.getElementById('fnid').value = '0';
}
/** 保存笔记 */
function saveNote() {
var id = document.getElementById('fnid').value;
var title = document.getElementById('fntitle').value.trim();
var catId = document.getElementById('fncat').value;
var content = document.getElementById('fncontent').value.trim();
if (!title || !content) { showToast('请填写标题和内容', 'error'); return; }
// TODO: 发送请求到后端保存
// fetch('/function/admin.php', {
// method: 'POST',
// headers: { 'Content-Type': 'application/json' },
// body: JSON.stringify({
// action: id === '0' ? 'addNote' : 'editNote',
// id: id === '0' ? null : parseInt(id),
// title: title,
// categoryId: parseInt(catId),
// content: content
// })
// }).then(...)
console.log('保存笔记:', { id, title, catId, content: content.slice(0, 50) + '...' });
closeNoteModal();
showToast('保存成功', 'success');
// window.location.reload();
}
/* ==================== 删除确认 ==================== */
function deleteNote(id) {
document.getElementById('deleteId').value = id;
document.getElementById('deleteModal').style.display = 'flex';
}
function closeDeleteModal() {
document.getElementById('deleteModal').style.display = 'none';
}
function confirmDeleteNote() {
var id = document.getElementById('deleteId').value;
// TODO: 发送删除请求
console.log('删除笔记, id:', id);
closeDeleteModal();
showToast('已删除', 'info');
// window.location.reload();
}
/* ==================== 点击遮罩关闭 ==================== */
document.getElementById('noteModal').addEventListener('click', function(e) {
if (e.target === this) closeNoteModal();
});
document.getElementById('deleteModal').addEventListener('click', function(e) {
if (e.target === this) closeDeleteModal();
});
</script>
</body>
</html>