这是一个AI 写的前后端分离项目,通过AI编程,开发电商管理系统(登陆、注册)
使用的AI工具为 Trae工具(字节国际版)+claude3.5-sonnet(目前代码最强模型)
前端为 vue3+Bootstrap
后端为 C# net5.0(因为我电脑里面已经安装了这个新版更好) + dotnet-ef --version 5.0.17
一. 前端部分(创建vue项目)
如果你会创建vue项目可以跳过
1.安装 node.js Node.js — 在任何地方运行 JavaScript
2.安装 vue-cli 脚手架 命令行中执行 npm install -g @vue/cli
prefix 修改node全局目录
npm config set prefix "C:\node\node_global"
npm config set cache "C:\node\node_cache"
3.创建vue项目
首先创建一个文件夹 进入这个文件夹 命令行中执行 vue create 项目名称
组件只选择 路由, vue3
4. 运行项目 npm run serve
二.安装 Trae (一定要用国际版)
只有用国际版的才能用Claude大模型,国内版的只能用deepseek和豆包模型,
而Claude大模型的编程能力远远强于deepseek和豆包,所以我们要用Trae国际版的。
国际版下载地址:
Trae - Collaborate with Intelligence
下载,安装(一定要登录才能用AI 模型,登录方式支持 GitHub,谷歌,邮箱)
在点击登录前你要确定你的电脑是 科学上网 状态.不然就提示中国区受限
安装好后,点击登录,会跳转到登录网页。如果你没开代理,那么无论你是邮箱登录还是 Github 登录(没代理就更不可能 Google 登录)都会提示所在地区不可用。
这个时候有一个绕过的办法,就是你可以把这个网站链接复制下来,发到有代理条件的设备上,然后在代理环境下登录。登录成功后会返回一个127.0.0.1开头的地址,复制下来回到原本的电脑打开,就可以成功登录了。
所以他的地区检测的本质就是,登录的网页必须走代理。和本地软件走不走代理没有关系。
我用的科学是 袋鼠 能用几个小时
登录成功 正常使用Trae国际版了
三.AI 帮写 登录页面
将你 创建的vue项目在Trae中打开
然后把要求 (提示) 贴到对话框中就可以了
我的项目是基于vue3的vue-cli创建的,请在ai520v文件夹下如下操作(只能在这个目录下做操作) :先删除项目默认的页面和代码设置,包括:router---index.js,main.js,App.vue。再做一个登陆页面,在router—index.js路由配置文件里将登陆页面设置为项目默认的首页,项目使用Bootstrap,安装模块统一用cnpm而不是npm。登陆页面有标题“电商信息管理系统aijp”,可以通过手机号和密码登陆,手机号和密码要有格式校验,密码为数字加字母组合长度为6~10位,要有验证码(数字加字母组合,长度为6位),还有一个跳转到注册页面的链接,先把前端代码写出来注册页面先创建出来,里面啥都没有,后端代码先不用写,界面设计简洁大气具有科技感,统一绿色风格
一路应用 和接受 该运行的命令运行下
运行报错再把错误放到对话框,看看能不能解决
然后然后 登录就写好了.....................
四.AI帮写 注册页面
提示词
实现注册页面里的内容,包括密码、手机号都是必填项,要有数据校验,密码为数字加字母组合长度为6~10位,要有验证码(数组加字母组合,长度为6位),先把前端代码写出来,后端代码先不用写
五.AI编写后端 注册功能
创建一个文件夹用来放后端文件 api
进入api 文件夹 执行 dotnet new webapi -n Api
创建好项目后,使用 Trae 打开
注册功能 提示词
要实现注册页面的前后端数据库交互,我使用的数据库是mssql,连接字符串为 Data Source=(localdb)\ProjectsV13;Initial Catalog=master;Integrated Security=True;Connect Timeout=30;Encrypt=False;TrustServerCertificate=False;ApplicationIntent=ReadWrite;MultiSubnetFailover=False,数据库的名称是test2025,注册后数据写入到users表里,users里的主要字段如下:id,用户唯一标识,主键,自增username ,用户名password_hash ,用户密码(存储哈希值(使用密码+盐生成的))email ,用户邮箱phone ,用户手机号role , enum类型,用户角色(administrator, employe, manager) 默认为employestatus , enum类型,用户状态(normal、stop),默认normalcreated_at , datetime类型,用户创建时间updated_at , datetime类型,用户信息最后更新时间last_login_at , datetime类型,用户最后登录时间profile_image ,varchar类型, 头像图片路径 默认为 default.jpg,salt,varchar类型,加密的盐,group,varchar类型,用户分组,默认值为空注册后,created_at、updated_at、last_login_at 为当前系统时间
role、status、profile_image、group为默认值且默认值。开发语言为C#,采用efcore模块来实现ORM操作,注册成功后要有提示
他会创建 模型类,数据库上下文,服务类,控制器,Startup.cs
前端注册页面中添加API调用
一路应用 和接受 该运行的命令运行下
dotnet build 成功 就恭喜,不成功就把错误给对话框
本次的最终代码 github: gitjp565/ai520v
gitcode: 项目首页 - ai520v - GitCode