当前位置: 首页 > news >正文

C# AI(Trae工具+claude3.5-sonnet) 写前后端

这是一个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

http://www.xdnf.cn/news/561781.html

相关文章:

  • maven快速上手
  • AI练习:混合圆
  • 【优秀三方库研读】在 quill 开源库 LogMarcos.h 中知识点汇总及讲解
  • CVE-2018-1270源码分析与漏洞复现(spring-messaging 表达式注入)
  • Flask 路由装饰器:从 URL 到视图函数的优雅映射
  • 使用Terraform创建azure databrick
  • 每日算法 -【Swift 算法】寻找字符串中最长回文子串(三种经典解法全解析)
  • 【工具教程】图片识别内容改名,图片指定区域识别重命名,批量识别单据扫描件批量改名,基于WPF和腾讯OCR的实现方案
  • HTML5 Video (视频) 深入解析
  • WPF···
  • [Java实战]Spring Boot整合MinIO:分布式文件存储与管理实战(三十)
  • Taro Error: chunk common [mini-css-extract-plugin]
  • 单片机设计_四轴飞行器(STM32)
  • apache http client连接池实现原理
  • 网络学习-利用reactor实现http请求(六)
  • K个一组链表翻转
  • 【大前端】使用NodeJs HTTP模块创建web服务器、SSE通讯
  • 运维web服务器
  • Java—— IO流 第二期
  • 怎么把cursor(Cursor/ollama)安装到指定路径
  • 从 CANopen到 PROFINET:网关助力物流中心实现复杂的自动化升级
  • 软考 测试 静态测试 动态测试
  • 2025ICPC南昌邀请赛流水账
  • 有理函数积分的一般方法
  • Data Vault 2.0:企业数据建模的现代方法
  • IDEA推送到gitlab,jenkins识别,然后自动发布到需要的主机
  • 【Django】Django DRF 中如何手动调用分页器返回分页数据(APIView,action场景)
  • eclipse 生成函数说明注释
  • 手术机器人行业新趋势:Kinova多机械臂协同系统如何突破复杂场景适应性瓶颈?
  • Idea 查找引用jar包依赖来源的Maven pom坐标