|
|
<?php
|
|
|
include("config.php");
|
|
|
$errors = [];
|
|
|
|
|
|
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['submit'])) {
|
|
|
|
|
|
$book_name = trim($_POST["name"]);
|
|
|
$price = trim($_POST["price"]);
|
|
|
$uploadtime = trim($_POST["uploadtime"]);
|
|
|
$type = trim($_POST["type"]);
|
|
|
$total = trim($_POST["total"]);
|
|
|
|
|
|
if (empty($book_name)) {
|
|
|
$errors[] = "书名不能为空";
|
|
|
}
|
|
|
if (!is_numeric($price) || $price <= 0) {
|
|
|
$errors[] = "价格必须是有效的正数";
|
|
|
}
|
|
|
if (empty($uploadtime) || !strtotime($uploadtime)) {
|
|
|
$errors[] = "请输入有效的日期时间";
|
|
|
}
|
|
|
if (empty($type)) {
|
|
|
$errors[] = "请输入书籍类别";
|
|
|
}
|
|
|
if (!is_numeric($total) || $total <= 0 || $total != round($total)) {
|
|
|
$errors[] = "入库总量必须是正整数";
|
|
|
}
|
|
|
|
|
|
if (empty($errors)) {
|
|
|
// 防止SQL注入，使用预处理语句
|
|
|
$stmt = mysqli_prepare($connect, "INSERT INTO info_book (name, price, uploadtime, type, total, leave_number) VALUES (?, ?, ?, ?, ?, ?)");
|
|
|
mysqli_stmt_bind_param($stmt, "sdssii", $book_name, $price, $uploadtime, $type, $total, $total);
|
|
|
|
|
|
if (mysqli_stmt_execute($stmt)) {
|
|
|
echo "<script>alert('添加成功！');window.location.href='add_book.php';</script>";
|
|
|
exit;
|
|
|
} else {
|
|
|
$errors[] = "数据库错误: " . mysqli_stmt_error($stmt);
|
|
|
}
|
|
|
mysqli_stmt_close($stmt);
|
|
|
}
|
|
|
}
|
|
|
?>
|
|
|
<!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/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
|
<script>
|
|
|
tailwind.config = {
|
|
|
theme: {
|
|
|
extend: {
|
|
|
colors: {
|
|
|
primary: '#3b82f6',
|
|
|
secondary: '#10b981',
|
|
|
accent: '#8b5cf6',
|
|
|
danger: '#ef4444',
|
|
|
warning: '#f59e0b',
|
|
|
info: '#06b6d4',
|
|
|
light: '#f8fafc',
|
|
|
dark: '#1e293b'
|
|
|
},
|
|
|
fontFamily: {
|
|
|
sans: ['Inter', 'system-ui', 'sans-serif']
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style type="text/tailwindcss">
|
|
|
@layer utilities {
|
|
|
.content-auto {
|
|
|
content-visibility: auto;
|
|
|
}
|
|
|
.card-shadow {
|
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
|
}
|
|
|
.hover-lift {
|
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
|
}
|
|
|
.hover-lift:hover {
|
|
|
transform: translateY(-2px);
|
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
|
}
|
|
|
.input-focus {
|
|
|
@apply focus:ring-2 focus:ring-primary/50 focus:border-primary transition duration-200;
|
|
|
}
|
|
|
.btn-effect {
|
|
|
@apply transform hover:scale-105 active:scale-95 transition duration-200;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body class="bg-gray-50 font-sans text-gray-800">
|
|
|
<div class="container mx-auto px-4 py-8 max-w-6xl">
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
|
|
|
<div class="p-6 border-b border-gray-200">
|
|
|
<h2 class="text-xl font-bold text-gray-800 flex items-center">
|
|
|
<i class="fa fa-plus-circle text-primary mr-2"></i>新书入库
|
|
|
</h2>
|
|
|
</div>
|
|
|
<div class="p-6 md:p-8">
|
|
|
<div class="flex flex-col lg:flex-row gap-8">
|
|
|
<div class="w-full lg:w-2/3">
|
|
|
<?php if (!empty($errors)): ?>
|
|
|
<div class="bg-red-50 border-l-4 border-red-400 p-4 mb-6 rounded">
|
|
|
<div class="flex">
|
|
|
<div class="flex-shrink-0">
|
|
|
<i class="fa fa-exclamation-circle text-red-500"></i>
|
|
|
</div>
|
|
|
<div class="ml-3">
|
|
|
<h3 class="text-sm font-medium text-red-800">请修正以下错误</h3>
|
|
|
<div class="mt-2 text-sm text-red-700 space-y-1">
|
|
|
<?php foreach ($errors as $error): ?>
|
|
|
<p><?php echo $error; ?></p>
|
|
|
<?php endforeach; ?>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<?php endif; ?>
|
|
|
<form name="bookForm" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" class="space-y-6">
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
|
<div>
|
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">书名</label>
|
|
|
<div class="relative">
|
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
|
<i class="fa fa-book text-gray-400"></i>
|
|
|
</div>
|
|
|
<input type="text" id="name" name="name" required placeholder="请输入书名"
|
|
|
value="<?php echo isset($book_name) ? htmlspecialchars($book_name) : ''; ?>"
|
|
|
class="pl-10 block w-full rounded-md border-gray-300 shadow-sm input-focus py-2.5">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
<label for="price" class="block text-sm font-medium text-gray-700 mb-1">价格</label>
|
|
|
<div class="relative">
|
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
|
<i class="fa fa-cny text-gray-400"></i>
|
|
|
</div>
|
|
|
<input type="number" id="price" name="price" step="0.01" min="0.01" required
|
|
|
placeholder="请输入价格" value="<?php echo isset($price) ? htmlspecialchars($price) : ''; ?>"
|
|
|
class="pl-10 block w-full rounded-md border-gray-300 shadow-sm input-focus py-2.5">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
<label for="uploadtime" class="block text-sm font-medium text-gray-700 mb-1">入库日期</label>
|
|
|
<div class="relative">
|
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
|
<i class="fa fa-calendar text-gray-400"></i>
|
|
|
</div>
|
|
|
<input type="datetime-local" id="uploadtime" name="uploadtime" required
|
|
|
value="<?php echo isset($uploadtime) ? date('Y-m-d\TH:i', strtotime($uploadtime)) : date('Y-m-d\TH:i'); ?>"
|
|
|
class="pl-10 block w-full rounded-md border-gray-300 shadow-sm input-focus py-2.5">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
<label for="type" class="block text-sm font-medium text-gray-700 mb-1">所属类别</label>
|
|
|
<div class="relative">
|
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
|
<i class="fa fa-tags text-gray-400"></i>
|
|
|
</div>
|
|
|
<input type="text" id="type" name="type" required placeholder="请输入书籍类别"
|
|
|
value="<?php echo isset($type) ? htmlspecialchars($type) : ''; ?>"
|
|
|
class="pl-10 block w-full rounded-md border-gray-300 shadow-sm input-focus py-2.5">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="md:col-span-2">
|
|
|
<label for="total" class="block text-sm font-medium text-gray-700 mb-1">入库总量</label>
|
|
|
<div class="relative">
|
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
|
<i class="fa fa-cubes text-gray-400"></i>
|
|
|
</div>
|
|
|
<input type="number" id="total" name="total" min="1" required placeholder="请输入入库数量"
|
|
|
value="<?php echo isset($total) ? htmlspecialchars($total) : ''; ?>"
|
|
|
class="pl-10 block w-full rounded-md border-gray-300 shadow-sm input-focus py-2.5">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="flex justify-end space-x-4 pt-4 border-t border-gray-100">
|
|
|
<button type="reset" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 btn-effect">
|
|
|
<i class="fa fa-refresh mr-1"></i> 重置
|
|
|
</button>
|
|
|
<button type="submit" name="submit" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 btn-effect">
|
|
|
<i class="fa fa-check mr-1"></i> 提交入库
|
|
|
</button>
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
<div class="w-full lg:w-1/3 space-y-6">
|
|
|
<div class="bg-blue-50 border border-blue-100 rounded-lg p-5 hover-lift">
|
|
|
<h3 class="text-lg font-semibold text-blue-800 mb-3 flex items-center">
|
|
|
<i class="fa fa-info-circle mr-2"></i>入库指南
|
|
|
</h3>
|
|
|
<ul class="space-y-2 text-sm text-blue-700">
|
|
|
<li class="flex items-start">
|
|
|
<i class="fa fa-check-circle text-blue-500 mt-1 mr-2"></i>
|
|
|
<span>请确保填写的信息准确无误</span>
|
|
|
</li>
|
|
|
<li class="flex items-start">
|
|
|
<i class="fa fa-check-circle text-blue-500 mt-1 mr-2"></i>
|
|
|
<span>入库后将无法修改书籍的基本信息</span>
|
|
|
</li>
|
|
|
<li class="flex items-start">
|
|
|
<i class="fa fa-check-circle text-blue-500 mt-1 mr-2"></i>
|
|
|
<span>入库总量必须为正整数</span>
|
|
|
</li>
|
|
|
<li class="flex items-start">
|
|
|
<i class="fa fa-check-circle text-blue-500 mt-1 mr-2"></i>
|
|
|
<span>价格请精确到小数点后两位</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="bg-purple-50 border border-purple-100 rounded-lg p-5 hover-lift">
|
|
|
<h3 class="text-lg font-semibold text-purple-800 mb-3 flex items-center">
|
|
|
<i class="fa fa-tags mr-2"></i>类别参考
|
|
|
</h3>
|
|
|
<div class="grid grid-cols-2 gap-2">
|
|
|
<span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">文学</span>
|
|
|
<span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">科技</span>
|
|
|
<span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">计算机</span>
|
|
|
<span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">历史</span>
|
|
|
<span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">经济</span>
|
|
|
<span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">哲学</span>
|
|
|
<span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">医学</span>
|
|
|
<span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">教育</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="bg-white border border-gray-200 rounded-lg p-5 hover-lift">
|
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
|
|
|
<i class="fa fa-bar-chart mr-2"></i>入库统计
|
|
|
</h3>
|
|
|
<div class="space-y-4">
|
|
|
<div class="flex items-center justify-between">
|
|
|
<div>
|
|
|
<p class="text-sm text-gray-500">本月入库</p>
|
|
|
<p class="text-xl font-bold text-gray-800 mt-1">128 本</p>
|
|
|
</div>
|
|
|
<div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center">
|
|
|
<i class="fa fa-calendar text-blue-500 text-xl"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center justify-between">
|
|
|
<div>
|
|
|
<p class="text-sm text-gray-500">本周入库</p>
|
|
|
<p class="text-xl font-bold text-gray-800 mt-1">32 本</p>
|
|
|
</div>
|
|
|
<div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center">
|
|
|
<i class="fa fa-clock-o text-green-500 text-xl"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center justify-between">
|
|
|
<div>
|
|
|
<p class="text-sm text-gray-500">今日入库</p>
|
|
|
<p class="text-xl font-bold text-gray-800 mt-1">5 本</p>
|
|
|
</div>
|
|
|
<div class="w-16 h-16 rounded-full bg-yellow-100 flex items-center justify-center">
|
|
|
<i class="fa fa-today text-yellow-500 text-xl"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="p-6 border-t border-gray-200 bg-gray-50">
|
|
|
<h3 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
|
|
|
<i class="fa fa-history text-primary mr-2"></i>最近入库记录
|
|
|
</h3>
|
|
|
<div class="overflow-x-auto">
|
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
|
<thead class="bg-gray-100">
|
|
|
<tr>
|
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">书名</th>
|
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类别</th>
|
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">入库日期</th>
|
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数量</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
|
<div class="flex items-center">
|
|
|
<div class="flex-shrink-0 h-8 w-8 bg-blue-100 rounded-md flex items-center justify-center">
|
|
|
<i class="fa fa-book text-blue-500"></i>
|
|
|
</div>
|
|
|
<div class="ml-3">
|
|
|
<div class="text-sm font-medium text-gray-900">Python数据分析实战</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">计算机</span>
|
|
|
</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-05-28</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">20</td>
|
|
|
</tr>
|
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
|
<div class="flex items-center">
|
|
|
<div class="flex-shrink-0 h-8 w-8 bg-green-100 rounded-md flex items-center justify-center">
|
|
|
<i class="fa fa-book text-green-500"></i>
|
|
|
</div>
|
|
|
<div class="ml-3">
|
|
|
<div class="text-sm font-medium text-gray-900">人类简史</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">历史</span>
|
|
|
</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-05-27</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">15</td>
|
|
|
</tr>
|
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
|
<div class="flex items-center">
|
|
|
<div class="flex-shrink-0 h-8 w-8 bg-purple-100 rounded-md flex items-center justify-center">
|
|
|
<i class="fa fa-book text-purple-500"></i>
|
|
|
</div>
|
|
|
<div class="ml-3">
|
|
|
<div class="text-sm font-medium text-gray-900">活着</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">文学</span>
|
|
|
</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-05-26</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">30</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<footer class="mt-12 py-6 border-t border-gray-200">
|
|
|
<div class="container mx-auto px-4">
|
|
|
<div class="flex flex-col md:flex-row justify-between items-center">
|
|
|
<div class="mb-4 md:mb-0">
|
|
|
<div class="flex items-center space-x-2">
|
|
|
<i class="fa fa-book text-primary text-xl"></i>
|
|
|
<span class="font-bold text-lg">图书管理系统</span>
|
|
|
</div>
|
|
|
<p class="text-gray-500 mt-1 text-sm">智能、高效的图书馆管理解决方案</p>
|
|
|
</div>
|
|
|
<div class="text-gray-500 text-sm">
|
|
|
© 2025 图书管理系统. 保留所有权利.
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
|
|
|
<script>
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
const inputs = document.querySelectorAll('input');
|
|
|
inputs.forEach(input => {
|
|
|
if (input.value.trim() !== '') {
|
|
|
input.classList.add('border-primary');
|
|
|
}
|
|
|
|
|
|
input.addEventListener('focus', function() {
|
|
|
this.classList.add('border-primary');
|
|
|
});
|
|
|
|
|
|
input.addEventListener('blur', function() {
|
|
|
if (this.value.trim() === '') {
|
|
|
this.classList.remove('border-primary');
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
