【Code with SOLO】新手也能做全栈！从前端设计到后端闭环|Trae SOLO实战：SOLO全程自动化，新手也能做出完整摄影展示平台

SOLO挑战赛专区
1

image
image1920×1009 363 KB

使用Trae SOLO模式开发摄影作品展示平台的过程

项目整体概述

1.项目介绍

  • 我是一个摄影爱好者，我计划做一个摄影作品网站，用来展示我的摄影作品，同时分享给自己身边的朋友、亲人，让他们也能一起分享自己的照片，我用了VScode和XAM等工具，将网站部署在本地进行编辑，这个网站目前面向的是少数的熟人，不需要考虑海量用户与数据带来的运行与存储困扰。当然，这个网站也具备在后续升级成面向更广泛大众的“摄影师聚集地”的潜力，增加审核系统和一些数据管理系统将会是我的首要目标

2.设计思路

  • 前端：网页整体围绕“简约”、“清晰”两个关键词设计，页面构图对称，采用居中构图，符合摄影构图的基本审美要求，同时我参考了500px、图虫等网站的设计风格，相互融合后，在其基础上添加了个人的风格化设计（帖子最下方有网站页面截图和展示视频）

  • 后端：作品展示平台后端采用 PHP+JSON 轻量设计，无需复杂框架，PHP 处理图片上传、用户校验、数据读写等核心逻辑，JSON 文件存储数据；同时加入安全防护和并发处理，通过简单接口实现前后端联动，贴合小型展示平台需求。

3.遇到的困难

  • 用 Trae Solo 制作网站并不是一步完成的，它会根据你所提供的prompt生成一个大概的框架，但是许多细节与功能都会存在问题，对于会写代码的专业人士来说，在此框架上直接进行修改很方便，但是对于纯新手或者是自然语言使用者来说，需要一步一步测试并给出清晰明确的命令进行修改，这会带来很多麻烦，很多问题需要修改多次才能解决，具体的问题会在后面的详细内容中展示

4.求助！求助！

  • 有没有大佬能解答一下，怎么才能将网站部署到服务器或者github上，就是让别人也能看到，我尝试过github但是加载不出来/(ㄒoㄒ)/~~

项目详细内容展示

1. 需求拆解

任务拆解

  1. 分析项目需求和现有代码结构 ：根据网站的需求，画出网站结构图，为prompt的编写奠基
  2. 编写详细的Prompt ：指导SOLO模式生成完整的网站代码
  3. 执行SOLO模式生成过程 ：包括自动规划、代码生成、调试和运行

关键功能

  • 首页（hero区域、精选作品、文章、壁纸专区）
  • 作品库（分类筛选、作品展示）
  • 文章管理（发布、编辑、删除）
  • 用户管理（注册、登录、个人资料）
  • 作品投稿（单图/组图模式）
  • 管理后台（作品管理、文章管理、用户管理、壁纸管理）
  • 响应式设计
  • 深夜模式
  • 图片懒加载

2. Prompt 写法

详细Prompt

生成完整的摄影作品展示平台网站，包含以下功能：

  1. 网站结构：

    • 初始欢迎页面
    • 导航栏（首页、作品库、文章、我要投稿、注册/登录、个人中心、管理后台）
    • 首页（英雄区域、精选作品、文章、壁纸专区）
    • 作品库（分类筛选、作品展示）
    • 文章页面（文章列表、文章详情）
    • 投稿页面（单图/组图模式、分类选择、作品信息填写）
    • 用户中心（注册、登录、个人资料管理）
    • 个人中心（个人资料、我的作品、我点赞的作品）
    • 管理后台（作品管理、文章管理、用户管理、壁纸管理、后端监管）

  2. 技术栈：

    • 前端：HTML5、CSS3、JavaScript
    • 后端：PHP
    • 数据存储：JSON文件
    • 图片上传：服务器本地存储

  3. 核心功能：

    • 作品展示与分类
    • 文章发布与管理
    • 用户注册与登录
    • 作品投稿（单图/组图）
    • 管理后台功能
    • 响应式设计
    • 深夜模式
    • 图片懒加载
    • WebP格式支持

  4. 性能优化：

    • 图片懒加载
    • 预加载首屏图片
    • 动画性能优化
    • 异步加载页面内容

  5. 安全措施：

    • 图片类型验证
    • 文件名处理
    • 权限控制

请生成完整的代码，包括HTML、CSS、JavaScript和PHP文件，并确保所有功能正常运行。
（网站结构图）

image
image373×1018 19.2 KB

3. 关键操作

SOLO 自动规划、生成、调试、运行的过程

  1. 分析需求 ：理解摄影作品展示平台的功能需求和技术要求
  2. 创建技能 ：在 .trae/skills/photo-gallery/ 目录下创建 SKILL.md 文件，定义技能的名称、描述和详细功能
  3. 生成代码 ：使用SOLO模式根据Prompt生成完整的网站代码
  4. 调试运行 ：测试网站的各项功能，确保正常运行
  5. 优化性能 ：实施性能优化措施，如图片懒加载、预加载等
  6. 安全检查 ：确保网站的安全性，如图片类型验证、文件名处理等

4. 踩坑与解决

问题1：图片上传安全

  • 问题 ：用户可能上传恶意文件
  • 解决方案 ：
    • 验证文件类型，只允许图片格式
    • 重命名文件，避免文件名冲突和恶意文件名
    • 限制文件大小，防止服务器资源耗尽

问题2：性能优化

  • 问题 ：图片加载缓慢，影响用户体验
  • 解决方案 ：
    • 实现图片懒加载，只加载可视区域的图片
    • 预加载首屏图片，提高首屏加载速度
    • 使用WebP格式图片，减少文件大小
    • 优化动画性能，使用requestAnimationFrame

问题3：响应式设计

  • 问题 ：网站在不同设备上显示不一致
  • 解决方案 ：
    • 使用flexbox和grid布局
    • 设置媒体查询，适配不同屏幕尺寸
    • 确保导航栏在移动设备上正常显示

问题4：深夜模式切换

  • 问题 ：深夜模式切换时页面闪烁
  • 解决方案 ：
    • 使用requestAnimationFrame优化渲染性能
    • 确保深夜模式下所有元素的样式正确

问题5：数据存储

  • 问题 ：JSON文件存储数据可能导致并发问题
  • 解决方案 ：
    • 实现简单的文件锁机制
    • 确保数据读写操作的原子性
    • 定期备份数据文件

5. 成果

代码

  • index.html ：网站的主页面，包含所有前端结构和功能
  • upload.php ：处理文件上传、图片管理等后端功能
  • edit.php ：处理作品编辑功能
  • users.php ：处理用户管理功能
  • data.json ：存储作品数据
  • users.json ：存储用户数据
  • articles.json ：存储文章数据
  • wallpapers.json ：存储壁纸数据

功能

  • 首页 ：展示精选作品、文章和壁纸
  • 作品库 ：按分类展示作品，支持筛选
  • 文章 ：展示和管理公众号文章
  • 投稿 ：支持单图和组图模式，填写作品信息
  • 用户中心 ：注册、登录、个人资料管理
  • 个人中心 ：查看个人资料、我的作品、我点赞的作品
  • 管理后台 ：作品管理、文章管理、用户管理、壁纸管理、后端监管

美术设计

  • 简约、高级、清晰的页面设计
  • 首页面悬浮滑动
  • 背景壁纸与页面文字实时响应“白天/深夜”模式的切换

技术特点

  • 响应式设计 ：适配不同设备尺寸
  • 深夜模式 ：根据时间自动切换，也可手动切换
  • 性能优化 ：图片懒加载、预加载、WebP支持
  • 安全措施 ：图片类型验证、文件名处理
  • 用户体验 ：流畅的动画效果、直观的界面设计
  • 运营方式 ：简洁、高效的后台管理系统

页面截图

6. 总结

使用Trae SOLO模式成功制作了一个功能完整的摄影作品展示平台，包含了所有需求的功能模块。通过详细的Prompt指导，SOLO模式能够自动规划、生成、调试和运行代码，大大提高了开发效率。在开发过程中，遇到了一些问题，如图片上传安全、性能优化、响应式设计等，但都通过合理的解决方案得到了有效解决。

最终的成果是一个功能完善、性能良好、用户体验优秀的摄影作品展示平台，能够满足用户与网站运营者的各种需求。