新手小白实战教程：用 TRAE 从零创建一个“个人日记本”网页应用

本教程将带你手把手、一步步使用 TRAE 完成你的第一个小项目。我们会像搭积木一样从创建一个空文件夹开始直到做出一个能运行、能记日记的简单网页。请严格按顺序操作不要跳步。第一步项目启动与规划 (5分钟)目标告诉 TRAE 我们想做什么让它帮我们搭建项目骨架。打开 TRAE双击桌面图标启动 TRAE。创建空项目文件夹在电脑桌面或其他你找得到的地方右键 - 新建 - 文件夹。将文件夹命名为my-diary-app名字可以自己取但不要用中文。在 TRAE 中打开这个文件夹在 TRAE 顶部菜单栏点击File文件 -Open Folder...打开文件夹。在弹出的窗口中找到并选中你刚创建的my-diary-app文件夹点击选择文件夹。现在TRAE 左侧的资源管理器Explorer区域应该显示MY-DIARY-APP下面空空如也。召唤 AI描述需求点击 TRAE 左侧活动栏的TRAE AI图标一个星星标志。右侧会弹出 AI 侧边栏。找到并点击Builder标签页。在底部的大输入框里一字一句地输入以下内容你可以复制粘贴“请帮我创建一个简单的个人日记本网页应用。要求使用 HTML, CSS 和纯 JavaScript 编写不需要复杂框架因为我是新手。网页有一个好看的标题‘我的日记本’。有一个输入框可以写日记内容一个按钮点击后能保存日记。保存的日记能显示在网页下方最新的日记显示在最上面。日记数据保存在浏览器的本地存储里这样刷新页面日记也不会消失。请为我生成所有必要的文件。”按下回车键发送。与 AI 对话确认细节AI 可能会问你一两个问题来澄清比如确认技术栈。你只需回答“是的”或按照它的提示选择最简单选项。很快AI 的Builder模式就会开始工作自动在左侧资源管理器里创建文件和文件夹并往里面写代码。你会看到文件列表在自动增加这非常酷第二步认识生成的项目文件 (5分钟)AI 工作完成后你的资源管理器看起来应该像这样MY-DIARY-APP (项目根目录) ├── index.html (网页的主入口文件就像书的封面和目录) ├── style.css (网页的样式文件控制颜色、字体、布局等外观) └── script.js (网页的交互逻辑文件控制按钮点击、保存等行为)我们来认识一下它们你不需要现在理解代码先知道它们是干嘛的index.html双击它它会在中间编辑器区域打开。里面是网页的“骨架”比如标题、输入框、按钮这些元素都在这里定义。你可以把它想象成房子的承重墙和房间格局。style.css双击打开。里面定义了网页的“装修风格”比如背景色是什么标题多大按钮什么颜色。它让房子变得好看。script.js双击打开。里面是网页的“智能家居系统”比如你点击“保存”按钮后会发生什么日记怎么存、怎么读。它让房子变得“聪明”能互动。第三步运行并查看你的网页 (3分钟)现在让我们看看 AI 为我们生成的网页长什么样。在 TRAE 中运行确保index.html文件在编辑器中是打开的状态。在index.html文件标签页上右键。在弹出的菜单中找到并选择Open with Live Server或在默认浏览器中打开类似的选项。如果没找到这个选项你可能需要先安装一个叫 “Live Server” 的小插件。别怕很简单点击左侧活动栏的扩展图标四个小方块搜索“Live Server”找到它并点击“安装”。安装完再重复右键操作。见证奇迹你的默认浏览器比如 Chrome、Edge会自动打开一个新标签页显示的就是你的“个人日记本”应用了你应该能看到一个带有标题、输入框和按钮的页面。虽然可能不太漂亮但功能俱全。第四步修改与个性化你的应用 (15分钟)现在我们来当一回“设计师”和“产品经理”用 TRAE 的 AI 对话功能来修改这个应用。场景一让网页标题更有个性定位代码在 TRAE 中打开index.html文件。使用 AI 提问找到显示“我的日记本”的那行代码通常在h1标签里。选中“我的日记本”这几个字。在选中区域右键选择向 AI 提问。在右侧弹出的 AI 对话面板中输入“我想把标题改成‘[你的名字]的私密日记本’并且把颜色改成深蓝色字体稍微大一点。请直接帮我修改这行代码。”按下回车。应用修改AI 会给出修改后的代码建议。仔细阅读确认它理解了你的意思比如颜色代码可能是#1a237e这样的。如果没问题点击 AI 回复框中的应用或替换按钮。你会立刻看到index.html文件中的标题文字和样式代码被自动更新了。查看效果回到浏览器刷新页面按 F5 键看看标题是不是变了。场景二为保存按钮添加一个提示动画我们觉得点击“保存”按钮后最好有个提示让用户知道保存成功了。描述需求这次我们不选中代码直接点击右侧 AI 对话面板确保它开着。输入“我想在script.js文件里当用户点击保存按钮后除了保存日记还能弹出一个小的提示框显示‘日记保存成功’2秒后自动消失。请帮我修改script.js文件中的保存函数。”审查并应用AI 会分析现有的script.js代码并给出修改后的完整函数或代码块。它会清晰地告诉你它修改了哪里。你阅读理解后点击应用。测试功能回到浏览器页面。在输入框里写点文字比如“今天学会了用 TRAE 做网页太酷了”点击“保存”按钮。观察是否出现了“日记保存成功”的提示可能在页面顶部或底部并且2秒后消失。同时检查你写的日记是否出现在了下方的日记列表中。场景三让日记列表的样式更清晰我们发现日记一条条堆在一起有点乱想给每条日记加个边框和背景色。精准提问在 AI 对话面板输入“在style.css文件中我想为每一条显示的日记条目div添加一个浅灰色的背景#f5f5f5、一个灰色的细边框1px solid #ddd、以及一些内边距padding: 10px并且让每条日记之间有一些间距margin-bottom: 10px。请直接帮我修改style.css文件。”应用并刷新应用 AI 的修改后保存style.css文件按CtrlS。回到浏览器刷新页面。看看已有的日记条目是不是立刻变好看了有了卡片一样的效果。第五步调试与解决问题 (5分钟)如果某一步出错怎么办别慌这正是 TRAE 最擅长帮忙的地方。情况一代码有红色波浪线语法错误把鼠标放在波浪线上会看到错误信息。选中出错的那一行或附近几行代码右键选择向 AI 提问输入“这段代码报错了错误信息是XXX请问如何修复”情况二浏览器按 F12 打开开发者工具看到 Console控制台有红色报错复制这个错误信息。在 TRAE 的 AI 对话面板里粘贴并提问“我的网页在浏览器控制台报错[粘贴错误信息]。问题可能出在哪里如何修复”情况三功能没实现比如点击保存没反应在 AI 对话面板描述现象“我的日记本网页点击保存按钮后日记没有显示在列表里。请帮我检查script.js文件中的saveDiary函数可能有什么问题。”AI 会引导你一步步检查或者直接给出修正后的代码。总结与下一步恭喜你你已经完成了✅用 TRAE Builder 从一句话描述生成完整项目。✅在 TRAE 中运行并查看网页。✅使用 AI 对话功能修改 HTML 内容、CSS 样式和 JavaScript 逻辑。✅实现了一个具有增、删、显、存本地功能的完整网页应用。这个小项目涵盖了软件开发的核心流程需求分析 - 项目生成 - 界面美化 - 功能增强 - 调试。通过这个实战你体验了 TRAE 最核心的两种 AI 用法Builder自动创建和Chat对话修改。给你的挑战可选尝试继续用 AI 对话为你的日记本添加以下功能指令模板都给你添加删除功能“请帮我修改代码在每一条显示的日记旁边添加一个‘删除’按钮点击后可以删除这一条日记并更新本地存储和页面显示。”添加编辑功能“请帮我增加日记编辑功能双击某条日记可以将其内容重新加载到顶部的输入框进行修改修改后点击保存更新原日记。”更换主题“我不喜欢现在的颜色请为我的日记本设计一套更温馨或更暗黑的配色方案修改style.css文件。”记住遇到任何问题随时向 TRAE 的 AI 助手提问它就是为你准备的“24小时贴身教练”。 编程不再是从零开始记忆所有知识而是学会如何清晰地描述你的想法。祝你玩得开心参考来源新手小白可以入手的教程手把手大白话实操不要嫌弃超详细金蝶财务软件操作流程新手小白必备及问题解决方案【Ps教程】从零开始学习Photoshop基础知识2024新手小白入门实用版拿走不谢允许白嫖持续更新~