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 服务器上）

# 登录到 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 获取的数据：

// 在 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 获取：

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 连接

创建一个测试页面或使用现有的页面测试连接：

// 测试代码示例
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，使用默认图片：

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

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