QUICK_START.md 3.87 KB
Edit Raw Blame History


快速开始 - 前端优化版本
🚀 一键启动
cd /home/tw/SearchEngine
bash scripts/start_backend.sh


然后在浏览器中访问：http://120.76.41.98:6002/


✅ 快速验证
运行测试脚本：
bash scripts/test_frontend.sh


🎯 核心功能演示
1️⃣ 搜索

输入关键词（中文/英文/俄文）
点击"搜索"或按回车

2️⃣ 筛选

点击分类标签（如"Toys"）
点击品牌标签
选中标签变为红色
支持多选

3️⃣ 排序
价格排序：


点击 ▲ → 价格从低到高
点击 ▼ → 价格从高到低


时间排序：


点击 ▲ → 从新到旧
点击 ▼ → 从旧到新

4️⃣ 分页

点击页码直接跳转
使用"Previous"/"Next"翻页
显示总页数和结果数


📋 主要改进


改进点
说明


🎨 界面
白色简洁背景，类似参考图片


🏷️ 筛选
水平标签式筛选，可点击


⬆️⬇️ 排序
带上下箭头，支持升降序


🔢 分页
完整分页功能


📱 响应式
支持手机/平板/桌面


⚡ 性能
更快的加载和响应


📂 文件结构
SearchEngine/
├── frontend/
│   ├── index.html              # 前端页面（已优化）
│   └── static/
│       ├── css/style.css       # 样式文件（已重写）
│       └── js/app.js           # 逻辑代码（已重构）
├── api/
│   └── app.py                  # API服务（已更新）
├── scripts/
│   ├── start_backend.sh        # 启动脚本
│   └── test_frontend.sh        # 测试脚本
└── 文档/
    ├── QUICK_START.md          # 本文件
    ├── FRONTEND_GUIDE.md       # 详细指南
    ├── CHANGES.md              # 更改记录
    └── frontend/README.md      # 前端文档


🔧 常见问题
Q: 页面打不开？
# 检查服务状态
curl http://120.76.41.98:6002/health


Q: 图片不显示？


检查商品是否有imageUrl字段
检查图片URL是否有效


Q: 筛选无效？


打开浏览器控制台（F12）查看错误
确认后端返回了aggregations数据


Q: 排序箭头点击无反应？


检查JavaScript是否加载
查看控制台是否有JavaScript错误


📱 响应式测试
桌面端（>1200px）


5列商品网格
完整筛选和排序栏


平板端（768px-1200px）


3-4列商品网格
筛选标签可换行


手机端（


2列商品网格
垂直堆叠筛选项


🎨 设计特点
颜色方案

主色：#e74c3c（红色）
背景：#f5f5f5（浅灰）
卡片：#ffffff（白色）
边框：#e0e0e0（灰色）

排版

主字体：系统默认字体栈
主标题：24px，加粗
正文：14px
小字：12px

间距

卡片间距：20px
内边距：15px
圆角：4-8px


📊 性能数据

首屏加载：
JavaScript：~13KB
CSS：~11KB
无外部依赖


🎯 下一步
立即可用
✅ 所有功能已完成
✅ 可直接部署到生产环境
✅ 已通过测试
未来优化（可选）

添加搜索历史
支持商品收藏
添加商品对比
图片懒加载
骨架屏加载


📞 技术支持
检查日志：
tail -f /tmp/search_engine_api.log


检查Elasticsearch：
curl http://localhost:9200/_cluster/health


重启服务：
# 停止服务（Ctrl+C）
# 重新运行
bash scripts/start_backend.sh


📚 更多文档

详细指南：FRONTEND_GUIDE.md
更改记录：CHANGES.md
前端文档：frontend/README.md
API文档：访问 http://120.76.41.98:6002/docs


版本：3.0
更新日期：2025-11-11
状态：✅ 生产就绪

🎉 享受新的前端界面！