Vibe Coding：用 AI 自动化生成完整产品代码

步骤 4：（可选）自动化部署（让 AI 生成部署脚本）

若需要 AI 完成'从代码到上线'的全流程，可补充指令：

请基于上述图书管理系统，生成以下部署文件：1. Dockerfile（前端/后端各一个）；2. docker-compose.yml（整合前端、后端、数据库）；3. 部署说明：包含构建镜像、启动容器、访问地址的完整命令。

三、避坑指南：AI 生成完整产品的常见问题与解决

1. AI 生成代码'碎片化'：问题根源是指令不够具体→解决：把大产品拆分为'模块级指令'（先让 AI 生成登录模块，验证通过后再生成图书模块）；
2. 依赖 / 版本冲突：AI 可能混用不同版本的库→解决：指令中明确版本号（如'Vue3.3.4 + Element Plus 2.3.7'）；
3. 逻辑漏洞（如安全问题）：AI 可能忽略密码加密细节→解决：指令中明确'安全要求'（如'密码存储必须用 MD5 加密，接口需验证 token'）；
4. 大型产品无法一次性生成：AI 上下文长度有限→解决：用'分文件生成'（先让 AI 生成后端接口，再生成前端调用代码）。

四、完整示例：AI 生成的'简易图书管理系统'核心代码片段

以下是 AI 生成的核心文件示例（仅展示关键部分）：

1. 后端 FastAPI 代码（main.py）

from fastapi import FastAPI, HTTPException, Depends
from fastapi.security import OAuth2PasswordBearer, OAuth2PasswordRequestForm
from pydantic import BaseModel
import hashlib
import sqlite3

app = FastAPI()
oauth2_scheme = OAuth2PasswordBearer(tokenUrl="token")

# 数据库初始化
def init_db():
    conn = sqlite3.connect("books.db")
    c = conn.cursor()
    # 创建用户表
    c.execute('''CREATE TABLE IF NOT EXISTS users (
        username TEXT PRIMARY KEY,
        password TEXT
    )''')
    # 创建图书表
    c.execute('''CREATE TABLE IF NOT EXISTS books (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        name TEXT,
        author TEXT,
        stock INTEGER
    )''')
    # 初始化管理员账号（密码 123456 MD5 加密后：e10adc3949ba59abbe56e057f20f883e）
    c.execute("INSERT OR IGNORE INTO users VALUES ('admin', 'e10adc3949ba59abbe56e057f20f883e')")
    conn.commit()
    conn.close()

# 密码加密函数
def md5_encrypt(password: str) -> str:
    return hashlib.md5(password.encode()).hexdigest()

# 登录接口
@app.post("/api/login")
async def login(form_data: OAuth2PasswordRequestForm = Depends()):
    conn = sqlite3.connect("books.db")
    c = conn.cursor()
    c.execute("SELECT password FROM users WHERE username = ?", (form_data.username,))
    result = c.fetchone()
    conn.close()
    if not result or result[0] != md5_encrypt(form_data.password):
        raise HTTPException(status_code=401, detail="账号或密码错误")
    return {"access_token": "fake-token-123", "token_type": "bearer"}

# 图书列表接口
@app.get("/api/books")
async def get_books(page: int = 1, size: int = 10):
    conn = sqlite3.connect("books.db")
    c = conn.cursor()
    offset = (page - 1) * size
    c.execute("SELECT * FROM books LIMIT ? OFFSET ?", (size, offset))
    books = [{"id": row[0], "name": row[1], "author": row[2], "stock": row[3]} for row in c.fetchall()]
    conn.close()
    return {"code": 200, "data": books}

# 启动时初始化数据库
init_db()

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8000)

2. 前端 Vue3 登录页面（Login.vue）

<template>
  <el-form :model="loginForm" label-width="80px" @submit.prevent="login">
    <el-form-item label="账号">
      <el-input v-model="loginForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="loginForm.password" type="password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="login">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()
const loginForm = ref({ username: 'admin', password: '123456' })

const login = async () => {
  try {
    const res = await axios.post('/api/login', new URLSearchParams({
      username: loginForm.value.username,
      password: loginForm.value.password
    }))
    localStorage.setItem('token', res.data.access_token)
    ElMessage.success('登录成功')
    router.push('/books')
  } catch (err) {
    ElMessage.error('登录失败：' + err.response.data.detail)
  }
}
</script>

总结

1. 核心关键：实现 AI 全自动生成完整产品，第一步是把模糊的'产品感觉'转化为结构化、细节化的指令，明确技术栈、功能、输出规范；
2. 落地逻辑：按'拆解需求→下达指令→生成代码→验证修正→部署上线'的流程，小产品可一次性生成，大产品拆分为模块逐步生成；
3. 关键补充：AI 生成的代码需人工验证核心功能，报错信息可反馈给 AI 快速修正，无需从零修改。