2fbca6ebc7
- 前台页面全面升级为Tailwind CSS框架 - 引入Google Fonts (Space Grotesk, Noto Sans) - 主色调更新为#25c0f4 (cyan blue) - 实现玻璃态效果和渐变背景 - 优化首页网格卡片布局和悬停动画 - 优化详情页双栏布局和渐变Logo光晕 - 优化管理员登录页，添加科技网格背景 - Flask-Admin后台完整深色主题 - 统一Material Symbols图标系统 - 网站自动抓取功能界面优化 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
220 lines
4.4 KiB
Markdown
220 lines
4.4 KiB
Markdown
# AI工具导航网站
|
||
|
||
一个简洁美观的AI产品导航网站，用于展示和管理各类AI工具和应用。
|
||
|
||
## 功能特点
|
||
|
||
- ✅ 按标签分类展示AI工具
|
||
- ✅ 卡片式设计，美观易用
|
||
- ✅ 详细的工具介绍页面
|
||
- ✅ 完善的后台管理系统
|
||
- ✅ SEO友好的URL结构
|
||
- ✅ 响应式设计，支持移动端
|
||
- ✅ 浏览量统计
|
||
|
||
## 技术栈
|
||
|
||
- **后端**: Flask 3.0 + Python 3.8+
|
||
- **数据库**: MySQL 5.7+
|
||
- **前端**: Bootstrap 5 + Jinja2模板
|
||
- **管理后台**: Flask-Admin
|
||
- **用户认证**: Flask-Login
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
zjpb/
|
||
├── app.py # Flask应用主文件
|
||
├── config.py # 配置文件
|
||
├── models.py # 数据库模型
|
||
├── init_db.py # 数据库初始化脚本
|
||
├── requirements.txt # Python依赖
|
||
├── .env.example # 环境变量示例
|
||
├── templates/ # HTML模板
|
||
│ ├── base.html
|
||
│ ├── index.html # 首页
|
||
│ ├── detail.html # 详情页
|
||
│ └── admin_login.html # 登录页
|
||
├── static/ # 静态资源
|
||
│ ├── css/
|
||
│ │ └── style.css
|
||
│ ├── js/
|
||
│ │ └── main.js
|
||
│ └── images/
|
||
└── migrations/ # 数据库迁移文件
|
||
```
|
||
|
||
## 快速开始
|
||
|
||
### 1. 环境准备
|
||
|
||
确保已安装以下软件:
|
||
- Python 3.8+
|
||
- MySQL 5.7+
|
||
- pip
|
||
|
||
### 2. 安装依赖
|
||
|
||
```bash
|
||
# 创建虚拟环境（推荐）
|
||
python -m venv venv
|
||
|
||
# 激活虚拟环境
|
||
# Windows:
|
||
venv\Scripts\activate
|
||
# Linux/Mac:
|
||
source venv/bin/activate
|
||
|
||
# 安装依赖
|
||
pip install -r requirements.txt
|
||
```
|
||
|
||
### 3. 配置数据库
|
||
|
||
1. 在MySQL中创建数据库:
|
||
```sql
|
||
CREATE DATABASE ai_nav CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
|
||
```
|
||
|
||
2. 复制环境变量配置文件:
|
||
```bash
|
||
cp .env.example .env
|
||
```
|
||
|
||
3. 编辑 `.env` 文件，修改数据库配置:
|
||
```
|
||
DB_HOST=localhost
|
||
DB_PORT=3306
|
||
DB_USER=root
|
||
DB_PASSWORD=your_password
|
||
DB_NAME=ai_nav
|
||
SECRET_KEY=your-secret-key-here
|
||
```
|
||
|
||
### 4. 初始化数据库
|
||
|
||
```bash
|
||
python init_db.py
|
||
```
|
||
|
||
这将创建所有数据表，并添加示例数据和默认管理员账号。
|
||
|
||
### 5. 运行应用
|
||
|
||
```bash
|
||
python app.py
|
||
```
|
||
|
||
访问 `http://localhost:5000` 查看网站。
|
||
|
||
## 管理后台
|
||
|
||
### 访问后台
|
||
|
||
- 后台地址: `http://localhost:5000/admin`
|
||
- 登录页面: `http://localhost:5000/admin/login`
|
||
|
||
### 默认管理员账号
|
||
|
||
```
|
||
用户名: admin
|
||
密码: admin123
|
||
```
|
||
|
||
**⚠️ 重要**: 首次登录后请立即修改默认密码！
|
||
|
||
### 后台功能
|
||
|
||
- **网站管理**: 添加、编辑、删除AI工具
|
||
- **标签管理**: 管理分类标签
|
||
- **管理员管理**: 添加和管理管理员账号
|
||
|
||
## 宝塔面板部署
|
||
|
||
### 1. 安装Python环境
|
||
|
||
在宝塔面板中安装Python项目管理器，选择Python 3.8+版本。
|
||
|
||
### 2. 上传项目
|
||
|
||
将项目文件上传到服务器，例如 `/www/wwwroot/ai_nav`
|
||
|
||
### 3. 配置项目
|
||
|
||
1. 在宝塔面板中创建Python项目
|
||
2. 项目路径: `/www/wwwroot/ai_nav`
|
||
3. 启动文件: `app.py`
|
||
4. 端口: 5000（或其他可用端口）
|
||
|
||
### 4. 安装依赖
|
||
|
||
在项目目录下执行:
|
||
```bash
|
||
pip install -r requirements.txt
|
||
```
|
||
|
||
### 5. 配置反向代理
|
||
|
||
在宝塔面板的网站设置中配置反向代理:
|
||
- 目标URL: `http://127.0.0.1:5000`
|
||
- 启用缓存和gzip压缩
|
||
|
||
### 6. 配置SSL证书（可选）
|
||
|
||
为网站配置SSL证书以启用HTTPS。
|
||
|
||
## 使用说明
|
||
|
||
### 添加新网站
|
||
|
||
1. 登录后台管理系统
|
||
2. 点击"网站管理" -> "Create"
|
||
3. 填写网站信息:
|
||
- 网站名称
|
||
- URL地址
|
||
- URL别名（用于SEO友好的URL）
|
||
- Logo图片URL
|
||
- 简短描述
|
||
- 详细介绍
|
||
- 主要功能
|
||
- 选择标签
|
||
- 排序权重（数字越大越靠前）
|
||
|
||
### 管理标签
|
||
|
||
1. 登录后台
|
||
2. 点击"标签管理"
|
||
3. 可以添加、编辑或删除标签
|
||
4. 为标签设置图标（Font Awesome类名）
|
||
|
||
## 开发计划
|
||
|
||
- [ ] 搜索功能
|
||
- [ ] 用户评论和评分
|
||
- [ ] 关联新闻搜索（2.0版本）
|
||
- [ ] 数据统计和分析
|
||
- [ ] API接口
|
||
- [ ] 网站收藏功能
|
||
|
||
## 常见问题
|
||
|
||
### 1. 数据库连接失败
|
||
|
||
检查 `.env` 文件中的数据库配置是否正确，确保MySQL服务正在运行。
|
||
|
||
### 2. 启动时出现端口占用
|
||
|
||
修改 `app.py` 中的端口号，或关闭占用5000端口的其他程序。
|
||
|
||
### 3. 静态资源加载失败
|
||
|
||
检查 `static` 目录权限，确保Web服务器有读取权限。
|
||
|
||
## 许可证
|
||
|
||
MIT License
|
||
|
||
## 联系方式
|
||
|
||
如有问题或建议，请提交Issue。
|