AI导哈

图书管理系统

基于Supabase的现代化Web图书管理系统，支持多图书馆管理、图书CRUD操作、实时数据同步和响应式设计。

  • by beeper9-source
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 beeper9-source/supabase_mcp

使用说明

📚 图书管理系统

这是一个利用Supabase的现代基于Web的图书管理系统。

✨ 主要功能

🏢 多图书馆管理

  • 图书馆添加/修改/删除独立管理多个图书馆
  • 图书馆选择轻松切换当前工作图书馆
  • 各图书馆图书管理每个图书馆都有独立的书籍列表
  • 图书馆信息管理地址、电话号码、电子邮件、网站等详细信息

📖 图书管理

  • 书籍添加/修改/删除完整的CRUD功能
  • 图书搜索按标题、作者、类型、ISBN搜索
  • 图书过滤按类型过滤
  • 图书排序按标题、作者、出版日期、价格排序
  • 视图切换网格视图和列表视图

📊 仪表盘

  • 统计信息总书籍数量，类型数量，总库存，平均价格
  • 实时更新数据更改时自动更新
  • 各图书馆统计所选图书馆的书籍现状

💾 数据管理

  • 导出CSV导出图书列表为CSV文件
  • 实时同步与Supabase的实时数据同步
  • 数据分离各图书馆独立的数据管理

🎨 用户界面

  • 响应式设计支持移动设备、平板电脑、台式电脑
  • **现代用户界面（Modern UI）**玻璃拟态设计与流畅动画
  • **直观的用户体验（UX）**易于使用的界面
  • 基于标签的管理用标签区分图书馆列表和附加功能

🚀 开始

1. 项目设置

# 프로젝트 디렉토리로 이동
cd supabase_mcp

# 파일 구조 확인
ls -la

2. 配置Supabase

  1. 访问Supabase项目仪表板

  2. 设置 → API 中查看以下信息：

    • 项目网址
    • 匿名公钥

  3. script.js 在文件中更新Supabase设置：

const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseKey = 'YOUR_SUPABASE_ANON_KEY';

3. 启动网络服务器

本地开发用（Python）

python -m http.server 8000

用于生产环境的服务器（Node.js + Express）

# Express 서버 실행 (CORS 설정 포함)
npm start

# 또는 직접 실행
node server.js

开发服务器

npm run dev

4. 在浏览器中访问

  • 本地开发： http://localhost:8000
  • 生产服务器: http://localhost:3000

📁 项目结构

supabase_mcp/
├── index.html          # 메인 HTML 파일
├── styles.css          # CSS 스타일시트
├── script.js           # JavaScript 로직
├── README.md           # 프로젝트 문서
└── .cursor/
    └── mcp.json        # MCP 설정 파일

🛠️ 技术栈

  • 前端HTML5，CSS3，JavaScript（ES6+）
  • 后端Supabase（基于PostgreSQL）
  • 造型CSS 网格布局、Flexbox 布局、CSS 变量
  • 图标Font Awesome
  • 数据库PostgreSQL（Supabase）

📋 数据库模式

libraries 表

CREATE TABLE libraries (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    description TEXT,
    address TEXT,
    phone VARCHAR(50),
    email VARCHAR(255),
    website VARCHAR(255),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

books 表

CREATE TABLE books (
    id SERIAL PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    author VARCHAR(255) NOT NULL,
    isbn VARCHAR(20) UNIQUE,
    published_date DATE,
    genre VARCHAR(100),
    pages INTEGER,
    language VARCHAR(50) DEFAULT 'Korean',
    description TEXT,
    price DECIMAL(10,2),
    stock_quantity INTEGER DEFAULT 0,
    library_id INTEGER REFERENCES libraries(id) ON DELETE CASCADE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

🎯 使用方法

图书馆管理

  1. 添加图书馆“图书馆管理”按钮 → “添加新图书馆”选项卡
  2. 图书馆选择在顶部的当前图书馆区域点击“更改”按钮
  3. 图书馆修改/删除在“图书馆管理”→“图书馆列表”标签中进行管理

图书管理

  1. 添加书籍选择图书馆后点击“添加新书”按钮
  2. 图书搜索在顶部搜索框中输入关键词（标题、作者、类型、ISBN）
  3. 书籍修改/删除点击图书卡片的“修改”或“删除”按钮
  4. 图书过滤使用按类型过滤和排序选项

数据管理

  1. 导出数据点击“导出数据”按钮下载CSV文件
  2. 确认统计在仪表板上查看各图书馆的统计信息
  3. 视图切换在网格视图和列表视图之间切换

🔧 自定义/定制化

更改颜色主题

styles.css修改CSS变量：

:root {
    --primary-color: #3498db;
    --secondary-color: #2c3e50;
    --success-color: #27ae60;
    --danger-color: #e74c3c;
}

添加新类型

  1. index.html添加到类型选择选项中
  2. script.js添加到过滤选项中

🚀 服务器部署

Heroku 部署

# Heroku CLI 설치 후
heroku create your-app-name
git push heroku main

Vercel 部署

# Vercel CLI 설치 후
vercel --prod

Netlify 部署

  1. 将项目上传到Netlify
  2. 构建命令： npm start
  3. 分发完成

Docker 部署

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

🐛 问题解决

401 未授权错误

  1. 确认RLS政策检查Supabase中的行级安全性是否已正确设置
  2. 确认API密钥确认是否使用了正确的anon key
  3. CORS设置检查服务器上是否正确设置了CORS头

Supabase连接错误

  1. 确认URL和API密钥是否正确
  2. 确认Supabase项目是否已激活
  3. 在浏览器控制台中查看错误消息

数据未显示

  1. 检查Supabase表中是否有数据
  2. 检查RLS（行级安全性）设置
  3. 检查网络连接状态

服务器部署错误

  1. CORS 错误使用 Express 服务器（npm start)
  2. 端口错误检查环境变量PORT设置
  3. 依赖性错误: npm install 执行

📝 许可证

此项目根据MIT许可证分发。

🤝 贡献（或“参与贡献”）

  1. 为项目创建分支
  2. 创建你的特性分支（git checkout -b feature/AmazingFeature）
  3. 提交您的更改（git commit -m 'Add some AmazingFeature')
  4. 推送到分支（git push origin feature/AmazingFeature）
  5. 打开一个拉取请求

📞 支持

如果遇到问题或有任何疑问，请创建一个议题。

享受愉快的图书管理吧！ 📚✨（书籍+闪耀的星星，可译为“书本✨闪耀”或保持原样以表达特定意境）

相关 MCP