166 lines
4.8 KiB
Markdown
166 lines
4.8 KiB
Markdown
|
# Web SQLite查看器对比文档
|
|||
|
|
|
|||
|
|
## 概述
|
|||
|
|
|
|||
|
|
我为您创建了两个不同风格的Web SQLite数据库查看器，都支持现代化的界面、内容筛选和动态行高调整功能。
|
|||
|
|
|
|||
|
|
## 🚀 现代化版本 (modern_sqlite_viewer.py)
|
|||
|
|
|
|||
|
|
**访问地址**: http://localhost:5001
|
|||
|
|
|
|||
|
|
### 特点
|
|||
|
|
- **技术栈**: Flask + Bootstrap 5 + DataTables + jQuery
|
|||
|
|
- **界面风格**: 现代化渐变设计，卡片式布局
|
|||
|
|
- **功能特性**:
|
|||
|
|
- 服务器端分页处理，支持大数据集
|
|||
|
|
- 高级搜索和筛选功能
|
|||
|
|
- 响应式设计，完美适配移动端
|
|||
|
|
- 动态加载指示器
|
|||
|
|
- 专业的数据统计面板
|
|||
|
|
- 列排序和分页控制
|
|||
|
|
- 多行内容智能识别和美化显示
|
|||
|
|
|
|||
|
|
### 适用场景
|
|||
|
|
- 需要处理大量数据（数千条记录以上）
|
|||
|
|
- 需要专业级的数据分析和浏览功能
|
|||
|
|
- 需要移动端友好的界面
|
|||
|
|
- 需要高级的数据操作功能
|
|||
|
|
|
|||
|
|
## 🎯 轻量级版本 (simple_sqlite_viewer.py)
|
|||
|
|
|
|||
|
|
**访问地址**: http://localhost:5002
|
|||
|
|
|
|||
|
|
### 特点
|
|||
|
|
- **技术栈**: Flask + 纯原生HTML/CSS/JS（无外部依赖）
|
|||
|
|
- **界面风格**: 简洁优雅，内联样式
|
|||
|
|
- **功能特性**:
|
|||
|
|
- 客户端数据处理，快速响应
|
|||
|
|
- 轻量级搜索功能
|
|||
|
|
- 无外部依赖，加载速度快
|
|||
|
|
- 简洁的统计信息
|
|||
|
|
- 自适应行高显示
|
|||
|
|
- 移动端适配
|
|||
|
|
|
|||
|
|
### 适用场景
|
|||
|
|
- 数据量较小（几百条记录以内）
|
|||
|
|
- 需要快速部署和访问
|
|||
|
|
- 网络环境较差或需要离线使用
|
|||
|
|
- 偏好简洁无依赖的解决方案
|
|||
|
|
|
|||
|
|
## 🎨 共同特性
|
|||
|
|
|
|||
|
|
### 动态行高调整
|
|||
|
|
两个版本都实现了智能的行高调整：
|
|||
|
|
- **自动识别**: 自动检测多行文本内容
|
|||
|
|
- **美观显示**: 多行内容使用渐变背景和高亮边框
|
|||
|
|
- **自然变化**: 行高根据内容长度自然调整，无突兀感
|
|||
|
|
|
|||
|
|
### 内容筛选功能
|
|||
|
|
- **全局搜索**: 在所有列中搜索匹配内容
|
|||
|
|
- **实时筛选**: 输入时即时显示结果
|
|||
|
|
- **高亮显示**: 搜索结果清晰标识
|
|||
|
|
|
|||
|
|
### 数据库支持
|
|||
|
|
- **自动创建**: 如果product.db不存在，自动创建示例数据库
|
|||
|
|
- **表结构识别**: 自动识别所有表和列结构
|
|||
|
|
- **数据类型处理**: 智能处理各种数据类型（文本、数字、日期等）
|
|||
|
|
|
|||
|
|
## 🔧 技术实现亮点
|
|||
|
|
|
|||
|
|
### 多行内容处理
|
|||
|
|
```python
|
|||
|
|
# 智能检测和处理多行文本
|
|||
|
|
if isinstance(cell, str):
|
|||
|
|
if '\n' in cell:
|
|||
|
|
# 多行文本，用<br>替换换行符
|
|||
|
|
formatted_cell = cell.replace('\n', '<br>')
|
|||
|
|
row_data[col] = f'<div class="multiline-content">{formatted_cell}</div>'
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 响应式设计
|
|||
|
|
- 使用CSS Grid和Flexbox布局
|
|||
|
|
- 媒体查询适配不同屏幕尺寸
|
|||
|
|
- 触摸友好的交互设计
|
|||
|
|
|
|||
|
|
### 性能优化
|
|||
|
|
- **防抖处理**: 搜索输入使用防抖技术
|
|||
|
|
- **异步加载**: 数据异步加载，界面不卡顿
|
|||
|
|
- **内存管理**: 合理的数据结构和内存使用
|
|||
|
|
|
|||
|
|
## 🚀 使用方法
|
|||
|
|
|
|||
|
|
### 启动应用
|
|||
|
|
```bash
|
|||
|
|
# 现代化版本
|
|||
|
|
python modern_sqlite_viewer.py
|
|||
|
|
|
|||
|
|
# 轻量级版本
|
|||
|
|
python simple_sqlite_viewer.py
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 访问界面
|
|||
|
|
- 打开浏览器访问对应地址
|
|||
|
|
- 选择要查看的数据表
|
|||
|
|
- 使用搜索框筛选内容
|
|||
|
|
- 观察行高随内容自然变化
|
|||
|
|
|
|||
|
|
### 数据文件
|
|||
|
|
- 默认读取 `product.db` 文件
|
|||
|
|
- 如果文件不存在，自动创建示例数据
|
|||
|
|
- 支持任何SQLite数据库文件
|
|||
|
|
|
|||
|
|
## 🎨 界面预览
|
|||
|
|
|
|||
|
|
### 现代化版本界面特色
|
|||
|
|
- 渐变背景和毛玻璃效果
|
|||
|
|
- 卡片式布局设计
|
|||
|
|
- 专业的数据统计面板
|
|||
|
|
- 高级DataTables功能
|
|||
|
|
|
|||
|
|
### 轻量级版本界面特色
|
|||
|
|
- 简洁的渐变设计
|
|||
|
|
- 内联CSS，无外部依赖
|
|||
|
|
- 快速响应的用户体验
|
|||
|
|
- 清晰的统计信息
|
|||
|
|
|
|||
|
|
## 📊 性能对比
|
|||
|
|
|
|||
|
|
| 特性 | 现代化版本 | 轻量级版本 |
|
|||
|
|
|------|------------|------------|
|
|||
|
|
| 加载速度 | 中等（依赖CDN） | 快速（内联资源） |
|
|||
|
|
| 数据处理能力 | 强（服务器端分页） | 中（客户端处理） |
|
|||
|
|
| 界面美观度 | 高（Bootstrap 5） | 中（自定义样式） |
|
|||
|
|
| 功能丰富度 | 高（DataTables） | 中（基础功能） |
|
|||
|
|
| 外部依赖 | 有（CDN资源） | 无（纯内联） |
|
|||
|
|
| 移动端适配 | 优秀 | 良好 |
|
|||
|
|
|
|||
|
|
## 🔧 自定义和扩展
|
|||
|
|
|
|||
|
|
### 修改数据库路径
|
|||
|
|
在代码中修改 `DB_PATH` 变量即可：
|
|||
|
|
```python
|
|||
|
|
DB_PATH = "path/to/your/database.db"
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 添加新功能
|
|||
|
|
两个版本都基于模块化设计，易于扩展：
|
|||
|
|
- 添加新的API端点
|
|||
|
|
- 自定义界面样式
|
|||
|
|
- 增加数据处理逻辑
|
|||
|
|
|
|||
|
|
### 部署到生产环境
|
|||
|
|
建议使用生产级WSGI服务器：
|
|||
|
|
```bash
|
|||
|
|
pip install gunicorn
|
|||
|
|
gunicorn -w 4 -b 0.0.0.0:5000 your_app:app
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🎯 选择建议
|
|||
|
|
|
|||
|
|
- **需要专业功能** → 选择现代化版本
|
|||
|
|
- **需要快速部署** → 选择轻量级版本
|
|||
|
|
- **数据量较大** → 选择现代化版本
|
|||
|
|
- **网络环境差** → 选择轻量级版本
|
|||
|
|
- **需要离线使用** → 选择轻量级版本
|
|||
|
|
|
|||
|
|
两个版本都提供了优秀的用户体验和现代化的界面设计，您可以根据具体需求选择合适的版本。
|