合并后台端

doc_mall/SUPABASE_DATA_MIGRATION_GUIDE.md

@@ -0,0 +1,247 @@
+# Supabase 数据迁移指南
+
+## 概述
+
+本指南将帮助您将当前使用模拟数据的 uni-app 项目迁移到使用 Supabase 数据库。您的项目已经配置了连接到 Ubuntu 服务器上的 Supabase（IP: 192.168.1.61），现在需要创建数据库表并插入测试数据，然后修改前端代码以使用真实数据。
+
+## 第一步：在 Supabase 中创建数据库表
+
+### 方法一：通过 Supabase Dashboard 执行 SQL
+
+1. **打开 Supabase Dashboard**
+   - 访问：http://192.168.1.61:3000
+   - 使用 Dashboard 用户名和密码登录（位于 `supabase_pro/.env` 中的 `DASHBOARD_USERNAME` 和 `DASHBOARD_PASSWORD`）
+
+2. **进入 SQL Editor**
+   - 在左侧菜单中点击 "SQL Editor"
+   - 点击 "New query" 创建新查询
+
+3. **执行建表脚本**
+   - 复制 `sql/001_create_tables.sql` 文件中的全部内容
+   - 粘贴到 SQL Editor 中
+   - 点击 "Run" 执行
+
+4. **执行插入数据脚本**
+   - 复制 `sql/002_insert_test_data.sql` 文件中的全部内容
+   - 粘贴到 SQL Editor 中
+   - 点击 "Run" 执行
+
+### 方法二：通过命令行执行（如果 Supabase 运行在 Ubuntu 服务器上）
+
+```bash
+# 登录到 Ubuntu 服务器
+ssh hfkj@192.168.1.61
+
+# 进入 Supabase 项目目录（假设 Supabase 安装在默认位置）
+cd ~/supabase
+
+# 使用 psql 连接到数据库执行 SQL 脚本
+# 注意：需要知道数据库密码（位于 supabase_pro/.env 中的 POSTGRES_PASSWORD）
+PGPASSWORD=yxyHINygZMLSq9jLddrZQBB-CoyGHSF5DwlwWmbrYXc psql -h localhost -U postgres -d postgres -f /path/to/001_create_tables.sql
+PGPASSWORD=yxyHINygZMLSq9jLddrZQBB-CoyGHSF5DwlwWmbrYXc psql -h localhost -U postgres -d postgres -f /path/to/002_insert_test_data.sql
+```
+
+## 第二步：验证数据表创建成功
+
+### 在 Supabase Dashboard 中验证
+
+1. **查看 Tables**
+   - 在左侧菜单中点击 "Table Editor"
+   - 应该能看到 `categories` 和 `products` 表
+
+2. **查看数据**
+   - 点击 `categories` 表，应该能看到 10 条分类数据
+   - 点击 `products` 表，应该能看到 18 条商品数据
+
+### 通过 API 验证
+
+1. **测试分类 API**
+   ```
+   GET http://192.168.1.61:8000/rest/v1/categories
+   Headers: 
+     apikey: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlzcyI6InN1cGFiYXNlIiwiaWF0IjoxNzY4ODMwNjI0LCJleHAiOjE5MjY1MTA2MjR9.mDVl-kIOdRK9v6VTxo0TDF8r7X7xk3PZXazaavHyVvg
+   ```
+
+2. **测试商品 API**
+   ```
+   GET http://192.168.1.61:8000/rest/v1/products?category_id=eq.cold
+   Headers:
+     apikey: [同上]
+   ```
+
+## 第三步：修改前端代码使用真实数据
+
+### 1. 已创建的服务文件
+
+我已经创建了 `utils/supabaseService.uts` 文件，提供了以下功能：
+- `getCategories()` - 获取所有分类
+- `getProductsByCategory()` - 获取指定分类的商品
+- `searchProducts()` - 搜索商品
+- `getProductById()` - 获取单个商品详情
+- `getHotProducts()` - 获取热销商品
+- `getRecommendedProducts()` - 获取推荐商品
+
+### 2. 修改分类页面 (`pages/mall/consumer/category.uvue`)
+
+需要将硬编码的模拟数据替换为从 Supabase 获取的数据：
+
+```typescript
+// 在 script 部分添加导入
+import supabaseService from '@/utils/supabaseService.uts'
+import type { Category, Product } from '@/utils/supabaseService.uts'
+
+// 替换 medicineCategories 的初始化
+// 删除原有的 medicineCategories 数组定义
+
+// 修改 onMounted 或创建新的生命周期函数
+onMounted(async () => {
+  await loadCategories()
+  await loadProducts()
+})
+
+// 添加加载分类的方法
+const loadCategories = async () => {
+  const categories = await supabaseService.getCategories()
+  if (categories.length > 0) {
+    primaryCategories.value = categories
+    // 设置默认选中第一个分类
+    if (!activePrimary.value && categories[0]) {
+      activePrimary.value = categories[0].id
+    }
+  }
+}
+
+// 修改 selectPrimaryCategory 方法
+const selectPrimaryCategory = async (categoryId: string) => {
+  activePrimary.value = categoryId
+  
+  // 更新当前分类信息
+  const category = primaryCategories.value.find(cat => cat.id === categoryId)
+  if (category) {
+    currentCategoryName.value = category.name
+    currentCategoryDesc.value = category.description
+  }
+  
+  // 加载对应商品
+  const response = await supabaseService.getProductsByCategory(categoryId)
+  productList.value = response.data
+  hasMore.value = response.hasmore
+}
+```
+
+### 3. 修改主页 (`pages/mall/consumer/index.uvue`)
+
+如果主页显示商品，也需要修改为从 Supabase 获取：
+
+```typescript
+import supabaseService from '@/utils/supabaseService.uts'
+
+// 获取热销商品
+const loadHotProducts = async () => {
+  hotProducts.value = await supabaseService.getHotProducts(6)
+}
+
+// 获取推荐商品
+const loadRecommendedProducts = async () => {
+  recommendedProducts.value = await supabaseService.getRecommendedProducts(6)
+}
+```
+
+## 第四步：测试连接和数据
+
+### 1. 测试 Supabase 连接
+
+创建一个测试页面或使用现有的页面测试连接：
+
+```typescript
+// 测试代码示例
+const testConnection = async () => {
+  try {
+    const categories = await supabaseService.getCategories()
+    console.log('连接成功，获取到分类数:', categories.length)
+    uni.showToast({
+      title: `连接成功，获取到 ${categories.length} 个分类`,
+      icon: 'success'
+    })
+  } catch (error) {
+    console.error('连接失败:', error)
+    uni.showToast({
+      title: '连接失败，请检查配置',
+      icon: 'error'
+    })
+  }
+}
+```
+
+### 2. 测试数据加载
+
+在分类页面测试：
+1. 打开分类页面
+2. 检查分类列表是否显示
+3. 点击不同分类，检查商品列表是否更新
+4. 检查商品图片、价格等信息是否正确显示
+
+### 3. 测试搜索功能
+
+如果项目有搜索页面，测试搜索功能：
+1. 输入关键字搜索
+2. 检查返回的商品是否相关
+
+## 第五步：处理图片 URL
+
+### 当前情况
+- 数据库中的 `image` 字段目前为空或使用本地路径
+- 实际项目中，图片应该存储在 Supabase Storage 或 CDN
+
+### 临时解决方案
+在显示图片时，如果数据库中没有图片 URL，使用默认图片：
+
+```typescript
+const getProductImage = (product: Product) => {
+  if (product.image && product.image.startsWith('http')) {
+    return product.image
+  }
+  return '/static/images/default-product.png'
+}
+```
+
+### 长期解决方案
+1. 将图片上传到 Supabase Storage
+2. 更新数据库中的 `image` 字段为完整 URL
+
+## 常见问题解决
+
+### 1. 连接超时或失败
+- 检查 Ubuntu 服务器上的 Supabase 是否正常运行
+- 检查防火墙设置，确保 8000 和 3000 端口可访问
+- 检查 `ak/config.uts` 中的 IP 地址是否正确
+
+### 2. 401 未授权错误
+- 检查 `SUPA_KEY` 是否正确（与 `supabase_pro/.env` 中的 `ANON_KEY` 一致）
+- 检查 Supabase 是否已启用匿名访问
+
+### 3. 表不存在错误
+- 确认已执行 SQL 脚本创建表
+- 检查表名是否拼写正确（区分大小写）
+
+### 4. 数据不显示
+- 检查浏览器控制台是否有错误
+- 检查网络请求是否成功
+- 确认数据库中有数据
+
+## 下一步优化建议
+
+1. **添加加载状态**：在数据加载时显示加载动画
+2. **错误处理**：添加更完善的错误处理和重试机制
+3. **数据缓存**：使用本地存储缓存常用数据，减少网络请求
+4. **分页加载**：实现滚动加载更多商品
+5. **图片优化**：使用图片懒加载和压缩
+
+## 总结
+
+通过以上步骤，您的项目将从使用模拟数据过渡到使用 Supabase 数据库数据。主要工作包括：
+1. 在 Supabase 中创建表和插入测试数据
+2. 修改前端代码使用新的服务层
+3. 测试连接和数据加载
+
+完成后，您的应用将具备完整的后端数据支持，为后续添加用户管理、购物车、订单等功能打下基础。