前言
博主是一个大学本科会计毕业的，虽然当了3年多的产品，也有过一小段的C语言学习经理，但是对于前后端代码以及是部署这块属于是一窍不通。所以基本就是从0开始的。
事情的起因是公司的boss要求我们产品用AI编程做一个小工具。其实类似的小功能我之前用元宝搭配ds模型已经做过了，不过是最简单的html格式，只有最简单的交互。所以只搭建一个html静态页面不是本阁主的追求。
毕竟搭建一个自己的网站，并且实现前后端联动，在大学我就觉得是一件很nice的事情（PS：这也是会计转产品的原因）
中间过程有些坎坷，也搜了很多教程，看到网上有很多类似的AI编程部署教程，其实最后给的都是纯前端的静态页面，关于怎么部署后端链接数据库这些都没有详细的（哪怕我现在部署了，也是云里雾里的）。
所以想开个这个文章，记录一下自己踩坑的过程，欢迎大家交流
搭建过程
一、用deepseek帮忙构思
先思考自己想要一个什么工具，再把自己的想法告诉ds，让他帮你生成一份UI提示词
二、用stitch生成UI
这一步其实用普通的AI工具也可以，只是我觉得stitch的UI确实很好看
1、输入提示词并等待生成
我这里想要部署一个网站，所以选择web，如果想做移动端，可以选择【应用】。
选择的模式是3.0 pro，实测下来stitch的UI生成确实还挺好的
生成的效果图如下 
2、把分割的UI图转换成可交互的html
这个就是生成后的可交互的原型图
3、导出html格式
三、AI写代码
把上一步下载的html放到trae里面，然后告诉AI你要实现哪些内容
注意这边和AI沟通的时候要告诉他你要选择什么后端和什么数据库。
我这边用的是node.js作为后端，Neon 作为数据库 因此我后面的数据库配置环境变量也是通过Neon来的
说完你的诉求之后，AI会自动帮你写代码的。 我属于一点编程知识都没有，这里所有的代码都是AI帮你写的
1、选择模式
我这里选择的是bulder模式，cn版的是免费的（赶紧薅羊毛） 
2、转换成前后端的应用
如果你的服务端安装的时候，没有按照默认安装的路径来，他可能会找不到，所以你需要人工介入告诉AI你的node.js安装的地址。 
3、本地测试
前面的步骤昨晚，应用的框架就基本搭建完了，接下来你需要本地测试。（其实我觉得修BUG和排查问题才是最麻烦的） 比如我在这里遇到了进到AI给的本地URL后，没有加载对应的组件，所以我就直接告诉AI，他会帮你排查问题
后续就是遇到啥问题，和AI说，AI帮你修正。中途有他反复修了多次，但是还是改不了的，我就依靠了在线搜索+额外问deepseek等。反正就是十万个为什么的过程。
四、部署
1、上传项目文件到github
（1）选择添加新项目
（2）为你的项目命名
（3）直接将你的项目文件上传
直接将项目的文件拖拽到网页上传即可。
注意我标记绿框的文件，这个文件夹里面文件有很多，可能会超过github一次性上传文件的数量（100个），但是不是上传必要的，所以可以不上传这个文件夹。 
上传后我们点击commit提交
2、用vercel部署项目
（1）用vercel关联github账号
如果你没有注册过，那你请用github去注册，这样后面部署可以直接选到github的项目 
如果你已经有了vercel的账号，那么就和github的账号关联一下
（2）创建项目
选择你刚刚在github创建的项目，进行导入
（3）直接部署
（4） 预览地址
这个地址就是你的应用的地址，注意国内的用户记得使用魔法浏览，否则进不去嗷
【注意】如果你的只是一个静态页面，到这一步就结束了，但是如果要连接数据库，还没可以使用 
3、链接数据库
（1）选择数据库并登录账号
后续就是按照数据库所在的网站进行登录注册
（2）将数据库连接项目
（3）获取数据库连接地址
（4）将链接地址配置到vercel的环境变量
将（3）中获取的数据库连接粘贴，并保存
（5）vercel重新部署
接下来可以在vercel提供的部署的网页地址进行操作了。 数据库连接会有一定的延时，需要耐心等待 如果一直链接不上就在vercel重新部署
大功告成
数据库成功链接 