后端开发用Trae做了几个前端demo(感觉很棒

通过不断的对话修正,做了三个页面感觉很棒的。做第三个的时候有个小BUG一直反应不过来(问题是css节点层级的问题,Trae改的是对的但是外面之前已经有一层了,一直改不了了

下面是一个后端用Trae做的三个页面。

第一个便签

对话加不断修正,实现:可以拖动、双击创建、标题和内容都可以修改的功能

  • 1.想要写个可以创建贴纸的页面,贴纸之间可以有连线
  • 2.双击空白处创建没生效
  • 3.贴纸内容可以分为标题和内容
  • 4.内容没有显示出来
  • 5.贴纸移动不了了
  • 6.标题和内容的颜色区分下
  • 7.标题和内容缝隙小点
  • 8.标题也可以修改
  • 9.标题还不能被修改
  • 10.移动下 就不见了

第二个魔方

套路和上面一样不断的对话修正

  • 1.这个我让他给每个背景加了颜色,还有鼠标可以拖动魔方

第三个服务状态图

这个这里出了点问题、说了几次都没修改正确

  • 1·下面是Trae给的样式表,但是外面包了一层 .node导致css层位.node.node.circle
  • 2.然后就一直改不正确了
  • 3.整体感觉还是挺厉害的,让他在节点间画了个虚线页很快实现了。
  • 4.服务间的状态图,我没说客户端的事情Trae主动给我加了个客户端。
  • 5.整体效果超过我预期了。
css 复制代码
// ... 其他样式保持不变 ...
    // .node{ //这里是文件原来就有的节点 不知道Trae一直在这里面改样式导致 页面加载出来圆圈全是黑色的,幸好我这半吊子发现了问题
        .node circle {
            fill: #ffffff;  /* 白色背景 */
            stroke: #4a90e2;
            stroke-width: 3px;
            opacity: 0.8;  /* 80%透明度 */
        }
        .node text {
            font-size: 14px;
            font-weight: bold;
            fill: #333;
        }
        .node.server circle {
            stroke: #4CAF50;
            fill: #e8f5e9;  /* 浅绿色背景 */
        }
        .node.database circle {
            stroke: #FF5722;
            fill: #ffebee;  /* 浅红色背景 */
        }
        .node.cache circle {
            stroke: #9C27B0;
            fill: #f3e5f5;  /* 浅紫色背景 */
        }
        .node.client circle {
            stroke: #2196F3;
            fill: #e3f2fd;  /* 浅蓝色背景 */
        }
//}
// ... 其他代码保持不变 ...

最后

Trae感觉还是很强的!这几个demo对于后端来说实现应该是很有困难的(因为我是只能写点form表单那种的),但他能轻松应对并且能不断修复,虽然中间有点小问题但对前端开发应该能很快的发现问题的。后面可能会尝试下搞个小型的完整项目试下难度了。

相关推荐
乱世刀疤3 小时前
腾讯云推出云开发AI Toolkit,国内首个面向智能编程的后端服务
ai编程
Lilith的AI学习日记3 小时前
n8n 中文系列教程_25.在n8n中调用外部Python库
开发语言·人工智能·python·机器学习·chatgpt·ai编程·n8n
猫头虎3 小时前
DeepSeek‑R1-0528 重磅升级:蚂蚁百宝箱免费、无限量调用
aigc·ai编程·智能体·deepseek·deepseekr1‑0528·蚂蚁百宝箱·deepseek0528
扑克中的黑桃A3 小时前
阿里云-通义灵码:测试与实例展示
ai编程
胡gh7 小时前
JS 执行机制,其实也没那么复杂 ——拿日常来打打比方你就懂了
trae
极客小俊8 小时前
我还是老老实实地用Cursor AI~编程从此不再繁琐,一键生成代码,效率提升千倍!
ai编程
二进制独立开发10 小时前
[Trae 1.4.0+] Trae Flask的智能体发布
flask·trae
围巾哥萧尘10 小时前
「网站制作」Lovart 原型,Trae 网站,掘金 MCP部署🧣
trae
caoxiaoye10 小时前
一句话开发Chrome摸鱼插件
chrome·ai编程·腾讯云ai代码助手·codebuddy
fish_study_csdn11 小时前
PyCharm接入DeepSeek,实现高效AI编程
python·pycharm·ai编程