周六日闲来无事，刚好一个小时。 我用AI跑完了一个小网站的全流程。打破了我对网上说的“小白也能使用ai做程序了”深信不疑。如果说对一个网站的搭建没有基础的整体认知，没有一个体系，不站在上帝视角，是无法搭建出一个像样的网站。使用ai搭建网站的对话技巧心得放到了最后
结合我正在进行的全栈学习，我先把这次经历拆解成了几个关键步骤。
成果部分展示：简陋但是整体体系已经完善，具备增删查改业务功能，前后端接口功能正常
1.技术选型
前端：HTML、CSS、JavaScript，加上 Vue 框架。
后端：Python 的 Flask。
数据库：MySQL。
选这套组合的原因很实在：每一层都足够轻，对新手友好，而且 AI 生成的代码质量也最稳定。入门阶段最怕的不是写代码，是配环境和调依赖，这套东西踩坑相对少。
具体到实现上，Vue 我用的是组件式写法，CDN 直接引入，没上 Vite 那套构建工具 —— 一个 HTML 文件就能跑，不用装 Node。后端 Flask 用了蓝图（Blueprint）把路由按模块拆开，接口多了之后不至于全挤在一个文件里。数据库配了 SQLAlchemy 的连接池，避免每次请求都新建连接。
2. 前端搭建
前端基础是 HTML 搭结构、CSS 写样式、JS 做交互，这三样是底子，绕不开。Vue 在上层做组件化，页面拆成一个个组件，每个管自己的模板、数据和方法。
因为是 CDN 引入，写法上用的是 setup() 函数，一个新闻分类管理的列表页大概长这样
const { createApp, ref, onMounted } = Vue
const app = createApp({
setup() {
const BASE = ‘http://127.0.0.1:5000/newsCategory’
const newsCategories = ref([])
// 统一请求封装
async function request(url, options = {}) {
return await fetch(url, {
headers: { 'Content-Type': 'application/json' },
...options
})
}
// 获取列表
async function getList() {
const res = await request(BASE)
newsCategories.value = await res.json()
}
// 搜索（前端过滤）
const searchKeyword = ref('')
async function handleSearch() {
const res = await request(BASE)
const all = await res.json()
newsCategories.value = searchKeyword.value
? all.filter(item => item.category_name.includes(searchKeyword.value))
: all
}
// 新增/编辑共用弹窗
const dialogVisible = ref(false)
const dialogMode = ref('add')
const form = ref({ id: null, category_name: '', category_description: '' })
function openAdd() {
dialogMode.value = 'add'
form.value = { id: null, category_name: '', category_description: '' }
dialogVisible.value = true
}
function openEdit(row) {
dialogMode.value = 'edit'
form.value = {
id: row.news_category_id,
category_name: row.category_name,
category_description: row.category_description
}
dialogVisible.value = true
}
function closeDialog() {
dialogVisible.value = false
}
async function submitForm() {
if (!form.value.category_name) {
layer.msg('类别名称不能为空')
return
}
const url = dialogMode.value === 'add' ? BASE : \`${BASE}/${form.value.id}\`
const method = dialogMode.value === 'add' ? 'POST' : 'PUT'
const res = await request(url, {
method,
body: JSON.stringify({
category_name: form.value.category_name,
category_description: form.value.category_description
})
})
const data = await res.json()
layer.msg(data.msg)
if (res.status === 200) {
closeDialog()
await getList()
}
}
// 删除
async function del(row) {
if (!confirm('确定要删除这条分类吗？')) return
const res = await request(\`${BASE}/${row.news_category_id}\`, { method: 'DELETE' })
const data = await res.json()
layer.msg(data.msg)
if (res.status === 200) await getList()
}
onMounted(getList)
return {
newsCategories,
searchKeyword, handleSearch,
dialogVisible, dialogMode, form,
openAdd, openEdit, closeDialog, submitForm,
del
}
}
})
app.mount(‘#app’)
列表、搜索、新增、编辑、删除，一套 CRUD 全在里面了。CDN 引入的好处是零配置，打开浏览器就能跑；缺点是模板写在字符串里没有语法高亮，组件多了之后不如单文件组件好维护。但入门阶段完全够用。
3. 后端搭建
Flask 本身一个文件就能跑，但接口多了之后全写在一起很乱。我用蓝图把路由按模块拆开，项目结构大概是这样：
server.py 里做初始化和蓝图注册：
路由单独放在蓝图里，route/news_category.py：
这里有两个新手容易漏的配置：一个是 CORS(app)，前后端分离开发时不加这个，浏览器会直接拦截请求报跨域错误；另一个是数据库连接串里的密码和数据库名，AI 给的是占位符，要换成自己的。
4.数据库和连接池
其中用到了
from dotenv import load_dotenvd读取env文件
连接池是个好东西。如果每次请求都新建数据库连接、用完就关，频繁创建和销毁很耗性能。连接池提前建好一批连接放着，请求来了直接拿，用完放回池子里复用。
三个关键参数：
• POOL_SIZE = 10：连接池常驻 10 个连接。
• MAX_OVERFLOW = 20：并发高的时候最多额外临时建 20 个，用完销毁。
• POOL_RECYCLE = 3600：连接超过 1 小时自动回收重建。这个很重要，MySQL 默认 8 小时会断开空闲连接，不配回收的话第二天起来可能就报连接失效。
最后前后端各自启动即可， 注意一点前端使用fetch请求后端接口，使用http，所以前端启动时候下载了插件Live Server,之后open with live server
5. 用 AI 写代码的几点心得
整个过程跑下来，总结了几条经验。
第一，拆开问。别一次让 AI 写完整项目，代码量太大容易出错，也不好调试。前端组件、后端蓝图、数据库表结构，分开生成，每部分测通了再拼。
第二，报错直接复制。Flask 的报错堆栈、浏览器控制台的红字，原封不动贴给 AI，比你自己描述 “好像有问题” 管用得多。
第三，技术细节写清楚。比如我会在提问里写明 “Vue3 CDN 引入，不用构建工具”"Flask 用蓝图拆分路由 "“SQLAlchemy 配连接池”，AI 给出来的代码直接能用，不用来回改。
第四，一次只改一个地方。功能叠加的时候，每次只让 AI 改一个功能点，改完测试没问题再继续。别图快一次改五六个地方，出了 bug 都不知道是哪来的。
写在最后
回到开头说的那句话：网上说 “小白也能用 AI 做程序”，我跑完这一趟的感受是 —— 能做，但有前提。
前提就是你得对一个网站的整体结构有基本认知，知道前端干什么、后端干什么、数据库存什么，它们之间怎么通信。没有这个体系，AI 给你一堆文件你都不知道从哪跑起来，出了错也不知道该问什么。
AI 确实把入门门槛拉低了很多。以前光配环境、调通第一个接口可能就要大半天，现在代码直接生成，主要精力放在理解逻辑和调试上。但它不是万能的，你得知道自己要什么，得能看懂它给的代码对不对。
我的建议是：把 AI 当成一个随时能问的结对编程伙伴，你负责想清楚架构和逻辑，它负责写第一版代码。边做边学，比光看书快得多。