AI 编程基础

阶段目标

把上篇的静态博客升级为全栈应用：

文章数据存储在 Supabase 数据库
支持用户注册和登录
登录后可以发布、编辑文章

第一步：配置 Supabase

1. 创建 Supabase 项目

访问 supabase.com → 创建项目 → 获取 API URL 和 anon key

2. 创建数据表

在 Supabase SQL Editor 中执行：

CREATE TABLE posts (
  id BIGSERIAL PRIMARY KEY,
  title TEXT NOT NULL,
  content TEXT NOT NULL,
  excerpt TEXT,
  user_id UUID REFERENCES auth.users,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

3. 安装客户端

npm install @supabase/supabase-js

4. 创建 Supabase 客户端

创建 src/lib/supabase.js：

import { createClient } from '@supabase/supabase-js';

export const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY
);

创建 .env 文件：

VITE_SUPABASE_URL=https://xxx.supabase.co
VITE_SUPABASE_ANON_KEY=xxx

第二步：从数据库读取文章

修改 Home.vue，告诉 AI：

“把 Home.vue 中的硬编码文章数据改为从 Supabase 读取。使用 onMounted 时获取数据，用 ref 存储。显示加载中状态和错误状态。”

AI 会生成类似这样的代码：

<script setup>
import { ref, onMounted } from 'vue';
import { supabase } from '../lib/supabase';

const posts = ref([]);
const loading = ref(true);
const error = ref(null);

onMounted(async () => {
  try {
    const { data } = await supabase
      .from('posts')
      .select('*')
      .order('created_at', { ascending: false });
    posts.value = data;
  } catch (e) {
    error.value = e.message;
  } finally {
    loading.value = false;
  }
});
</script>

第三步：添加用户认证

告诉 AI：

“给博客加上 Supabase Auth：顶部导航栏显示登录/注册按钮，用户登录后显示头像和用户名。用 Supabase 的 email 认证。“

登录组件

<script setup>
import { ref } from 'vue';
import { supabase } from '../lib/supabase';

const email = ref('');
const password = ref('');

async function signIn() {
  const { error } = await supabase.auth.signInWithPassword({
    email: email.value,
    password: password.value,
  });
}
</script>

第四步：发布文章

创建发布页面，登录后才能访问。告诉 AI：

“创建一个 NewPost.vue 页面，包含标题输入框、内容文本框（用 textarea）、提交按钮。提交时把数据插入到 Supabase 的 posts 表。只有登录用户才能访问此页面。“

第五步：部署上线

前端部署到 Vercel

npm install -g vercel
vercel

或部署到 Netlify

直接把 GitHub 仓库导入 Netlify，自动部署。

全栈博客的技术架构

用户浏览器
    ↓
Vue 3 前端 (Vercel)
    ↓
Supabase API
    ↓
PostgreSQL 数据库

你完成了一个全栈项目！

这个博客项目包含了你需要掌握的所有核心技能：

✅ 前端：Vue 3 + Vue Router
✅ 后端：Supabase API
✅ 数据库：PostgreSQL
✅ 认证：Supabase Auth
✅ 部署：Vercel

下一篇我们聊聊如何把项目部署到各种平台上。