medical-mall/doc_mall/SUPABASE_DATA_MIGRATION_GUIDE.md

# 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. 测试连接和数据加载

完成后，您的应用将具备完整的后端数据支持，为后续添加用户管理、购物车、订单等功能打下基础。