# homepage

**Repository Path**: panglongfei/homepage

## Basic Information

- **Project Name**: homepage
- **Description**: 一个现代化的个人浏览器主页应用，支持网站管理、分类显示、瀑布流布局等功能。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-26
- **Last Updated**: 2025-08-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 个人浏览器主页 - 网站收藏夹

一个现代化的个人浏览器主页应用，支持网站管理、分类显示、瀑布流布局等功能。

## 功能特性

- ✅ **网站管理** - 完整的增删改查功能
- ✅ **分类管理** - 自动分类和手动分类
- ✅ **搜索功能** - 支持网站名称、描述、分类和URL搜索
- ✅ **网格布局** - 响应式网格布局，每行3个卡片
- ✅ **数据导入导出** - JSON格式数据备份
- ✅ **拖拽上传** - 支持文件拖拽导入
- ✅ **现代化UI** - 简洁美观的用户界面
- ✅ **移动端适配** - 完全响应式设计

## 技术栈

### 后端
- **Node.js** - 服务器运行环境
- **Express.js** - Web框架
- **JSON文件存储** - 轻量级数据持久化
- **Multer** - 文件上传处理
- **CORS** - 跨域资源共享

### 前端
- **HTML5** - 页面结构
- **CSS3** - 现代化样式设计
- **Vanilla JavaScript** - 原生JS交互
- **响应式设计** - 适配各种屏幕尺寸

## 快速开始

### 本地开发

#### 安装依赖

```bash
npm install
```

#### 启动开发服务器

```bash
npm start
```

或者使用nodemon进行开发：

```bash
npm run dev
```

#### 访问应用

打开浏览器访问：http://localhost:3000

### Docker 部署 🚀

#### 快速部署

**Linux/macOS:**
```bash
# 构建并启动
./deploy.sh build
./deploy.sh start

# 查看状态
./deploy.sh status
```

**Windows:**
```powershell
# 构建并启动
.\deploy.ps1 build
.\deploy.ps1 start

# 查看状态
.\deploy.ps1 status
```

#### 手动部署

```bash
# 构建镜像
docker-compose build

# 启动服务
docker-compose up -d

# 查看日志
docker-compose logs -f homepage
```

详细部署文档请参考：[DOCKER.md](DOCKER.md)

## API接口

### 获取所有网站
```
GET /api/websites
GET /api/websites?category=分类名称
GET /api/websites?search=搜索关键词
```

### 获取单个网站
```
GET /api/websites/:id
```

### 添加网站
```
POST /api/websites
Content-Type: application/json

{
  "name": "网站名称",
  "url": "https://example.com",
  "description": "网站描述",
  "category": "分类",
  "favicon": "图标URL（可选）"
}
```

### 更新网站
```
PUT /api/websites/:id
Content-Type: application/json

{
  "name": "新名称",
  "url": "新URL",
  "description": "新描述",
  "category": "新分类"
}
```

### 删除网站
```
DELETE /api/websites/:id
```

### 获取分类列表
```
GET /api/websites/data/categories
```

### 导出数据
```
GET /api/websites/data/export
```

### 导入数据
```
POST /api/websites/data/import
Content-Type: multipart/form-data

file: JSON文件
```

### 批量操作
```
POST /api/websites/batch
Content-Type: application/json

{
  "action": "delete",
  "ids": [1, 2, 3]
}
```

## 项目结构

```
homepage/
├── data/                     # 数据存储目录
│   ├── websites.json        # 网站数据文件
│   └── dataManager.js       # 数据管理模块
├── public/                   # 前端静态文件
│   ├── index.html           # 主页面
│   ├── styles.css           # 样式文件
│   └── script.js            # 前端交互脚本
├── routes/                   # 路由文件
│   └── websites.js          # 网站API路由
├── server.js                 # 服务器主文件
├── package.json             # 项目配置文件
└── README.md                # 项目说明文档
```

## 数据格式

### 网站数据结构
```json
{
  "id": 1,
  "name": "网站名称",
  "url": "https://example.com",
  "description": "网站描述",
  "category": "分类",
  "favicon": "https://example.com/favicon.ico",
  "createdAt": "2025-08-26T01:06:00.000Z",
  "updatedAt": "2025-08-26T01:06:00.000Z"
}
```

### 完整数据文件结构
```json
{
  "websites": [
    {
      "id": 1,
      "name": "百度",
      "url": "https://www.baidu.com",
      "description": "百度搜索引擎",
      "category": "搜索引擎",
      "favicon": "https://www.baidu.com/favicon.ico",
      "createdAt": "2025-08-26T01:06:00.000Z",
      "updatedAt": "2025-08-26T01:06:00.000Z"
    }
  ],
  "nextId": 2
}
```

## 使用指南

### 添加网站
1. 点击页面顶部的"添加网站"按钮
2. 填写网站名称（必填）和URL（必填）
3. 可选填写描述、分类和自定义图标URL
4. 点击"保存"按钮

### 搜索网站
- 使用顶部搜索框输入关键词
- 支持搜索网站名称、描述、分类和URL
- 实时搜索，无需按回车

### 分类筛选
- 点击分类标签可按分类筛选网站
- 点击"全部"显示所有网站
- 分类会自动统计网站数量

### 编辑和删除
- 悬停在网站卡片上显示操作按钮
- 点击编辑按钮修改网站信息
- 点击删除按钮删除网站（需要确认）

### 导入导出
- **导出**：点击"导出"按钮下载JSON格式的数据文件
- **导入**：点击"导入"按钮选择JSON文件，或直接拖拽文件到上传区域

## 浏览器兼容性

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## 开发说明

### 开发模式
使用nodemon进行开发，文件变化时自动重启服务器：
```bash
npm run dev
```

### 生产部署

#### 传统部署
1. 确保Node.js环境（建议14+）
2. 安装依赖：`npm install`
3. 启动服务：`npm start`
4. 配置反向代理（可选）

#### Docker 部署 (推荐)
```bash
# 使用部署脚本
./deploy.sh build && ./deploy.sh start

# 或手动部署
docker-compose up -d
```

**Docker 部署优势：**
- 环境一致性
- 简化部署流程
- 资源隔离和限制
- 内置健康检查
- 自动重启和故障恢复

### 自定义配置
- 端口号：修改`server.js`中的`PORT`变量或设置环境变量
- 数据文件路径：修改`dataManager.js`中的`DATA_FILE`路径
- 上传文件限制：修改`websites.js`中的multer配置

## 许可证

MIT License

## 贡献

欢迎提交Issues和Pull Requests！