1. 首页首页
  2. 科技前沿科技前沿

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

科技前沿 • • 阅读 0

新手小白实战教程：用 TRAE 从零创建一个“个人日记本”网页应用本教程将带你手把手 一步步 使用 TRAE 完成你的第一个小项目 我们会像搭积木一样 从创建一个空文件夹开始 直到做出一个能运行 能记日记的简单网页 请严格按顺序 操作 不要跳步 目标 告诉 TRAE 我们想做什么 让它帮我们搭建项目骨架 打开 TRAE 双击桌面图标启动 TRAE 创建空项目文件夹 在电脑桌面 或其他你找得到的地方 右键 gt 新建

大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。



本教程将带你手把手、一步步，使用 TRAE 完成你的第一个小项目。我们会像搭积木一样，从创建一个空文件夹开始，直到做出一个能运行、能记日记的简单网页。请严格按顺序操作，不要跳步。

目标：告诉 TRAE 我们想做什么，让它帮我们搭建项目骨架。

  1. 打开 TRAE：双击桌面图标启动 TRAE。
  2. 创建空项目文件夹：
    • 在电脑桌面（或其他你找得到的地方）右键 -> 新建 -> 文件夹。
    • 将文件夹命名为 my-diary-app（名字可以自己取，但不要用中文）。
  3. 在 TRAE 中打开这个文件夹：
    • 在 TRAE 顶部菜单栏，点击 File（文件） -> Open Folder…（打开文件夹）。
    • 在弹出的窗口中，找到并选中你刚创建的 my-diary-app 文件夹，点击 选择文件夹。
    • 现在，TRAE 左侧的 资源管理器（Explorer） 区域应该显示 MY-DIARY-APP，下面空空如也。
  4. 召唤 AI，描述需求：
    • 点击 TRAE 左侧活动栏的 TRAE AI 图标（一个星星标志）。
    • 右侧会弹出 AI 侧边栏。找到并点击 Builder 标签页。
    • 在底部的大输入框里，一字一句地输入以下内容（你可以复制粘贴）：

 
   
    
     
 
      
“请帮我创建一个简单的个人日记本网页应用。要求：
 
      
     
       
  1. 使用 HTML, CSS 和纯 JavaScript 编写，不需要复杂框架，因为我是新手。
    2.  
       
  2. 网页有一个好看的标题‘我的日记本’。
    3.  
       
  3. 有一个输入框可以写日记内容，一个按钮点击后能保存日记。
    4.  
       
  4. 保存的日记能显示在网页下方，最新的日记显示在最上面。
    5.  
       
  5. 日记数据保存在浏览器的本地存储里，这样刷新页面日记也不会消失。
     请为我生成所有必要的文件。”

    6.  
      
 
     
 
  • 按下 回车键 发送。
    •  
  • 与 AI 对话，确认细节：

    • AI 可能会问你一两个问题来澄清，比如确认技术栈。你只需回答“是的”或按照它的提示选择最简单选项。
    • 很快，AI 的 Builder 模式就会开始工作，自动在左侧资源管理器里创建文件和文件夹，并往里面写代码。你会看到文件列表在自动增加，这非常酷！

    AI 工作完成后，你的资源管理器看起来应该像这样：

    MY-DIARY-APP (项目根目录)
├── index.html       (网页的主入口文件，就像书的封面和目录)
├── style.css        (网页的样式文件，控制颜色、字体、布局等外观)
└── script.js        (网页的交互逻辑文件，控制按钮点击、保存等行为)

    我们来认识一下它们（你不需要现在理解代码，先知道它们是干嘛的）：

    1. index.html：双击它，它会在中间编辑器区域打开。里面是网页的“骨架”，比如标题、输入框、按钮这些元素都在这里定义。你可以把它想象成房子的承重墙和房间格局。
    2. style.css：双击打开。里面定义了网页的“装修风格”，比如背景色是什么，标题多大，按钮什么颜色。它让房子变得好看。
    3. script.js：双击打开。里面是网页的“智能家居系统”，比如你点击“保存”按钮后会发生什么，日记怎么存、怎么读。它让房子变得“聪明”，能互动。

    现在，让我们看看 AI 为我们生成的网页长什么样。

    1. 在 TRAE 中运行：
      • 确保 index.html 文件在编辑器中是打开的状态。
      • 在 index.html 文件标签页上右键。
      • 在弹出的菜单中，找到并选择 Open with Live Server 或 在默认浏览器中打开 类似的选项。

     
     
    
       
       
        
    • 如果没找到这个选项，你可能需要先安装一个叫 “Live Server” 的小插件。别怕，很简单：点击左侧活动栏的扩展图标（四个小方块），搜索“Live Server”，找到它并点击“安装”。安装完再重复右键操作。
      •  
       
     
  • 见证奇迹：

    • 你的默认浏览器（比如 Chrome、Edge）会自动打开一个新标签页，显示的就是你的“个人日记本”应用了！
    • 你应该能看到一个带有标题、输入框和按钮的页面。虽然可能不太漂亮，但功能俱全。

    现在，我们来当一回“设计师”和“产品经理”，用 TRAE 的 AI 对话功能来修改这个应用。

    场景一：让网页标题更有个性
    1. 定位代码：在 TRAE 中，打开 index.html 文件。
    2. 使用 AI 提问：
      • 找到显示“我的日记本”的那行代码（通常在

        标签里）。

      • 选中“我的日记本”这几个字。
      • 在选中区域右键，选择 向 AI 提问。
      • 在右侧弹出的 AI 对话面板中，输入：“我想把标题改成‘[你的名字]的私密日记本’，并且把颜色改成深蓝色，字体稍微大一点。请直接帮我修改这行代码。”
      • 按下回车。
    3. 应用修改：
      • AI 会给出修改后的代码建议。仔细阅读，确认它理解了你的意思（比如颜色代码可能是 #1a237e 这样的）。
      • 如果没问题，点击 AI 回复框中的 应用 或 替换 按钮。你会立刻看到 index.html 文件中的标题文字和样式代码被自动更新了。
    4. 查看效果：回到浏览器，刷新页面（按 F5 键），看看标题是不是变了。
    场景二：为保存按钮添加一个提示动画

    我们觉得点击“保存”按钮后，最好有个提示，让用户知道保存成功了。

    1. 描述需求：
      • 这次我们不选中代码，直接点击右侧 AI 对话面板（确保它开着）。
      • 输入：“我想在 script.js 文件里，当用户点击保存按钮后，除了保存日记，还能弹出一个小的提示框，显示‘日记保存成功！’，2秒后自动消失。请帮我修改 script.js 文件中的保存函数。”
    2. 审查并应用：
      • AI 会分析现有的 script.js 代码，并给出修改后的完整函数或代码块。
      • 它会清晰地告诉你它修改了哪里。你阅读理解后，点击 应用。
    3. 测试功能：
      • 回到浏览器页面。
      • 在输入框里写点文字，比如“今天学会了用 TRAE 做网页，太酷了！”
      • 点击“保存”按钮。观察是否出现了“日记保存成功！”的提示（可能在页面顶部或底部），并且2秒后消失。
      • 同时，检查你写的日记是否出现在了下方的日记列表中。
    场景三：让日记列表的样式更清晰

    我们发现日记一条条堆在一起，有点乱，想给每条日记加个边框和背景色。

    1. 精准提问：
      • 在 AI 对话面板输入：“在 style.css 文件中，我想为每一条显示的日记条目（
        ）添加一个浅灰色的背景（ #f5f5f5）、一个灰色的细边框（ 1px solid #ddd）、以及一些内边距（ padding: 10px），并且让每条日记之间有一些间距（ margin-bottom: 10px）。请直接帮我修改 style.css 文件。”
    2. 应用并刷新：
      • 应用 AI 的修改后，保存 style.css 文件（按 Ctrl+S）。
      • 回到浏览器刷新页面。看看已有的日记条目是不是立刻变好看了，有了卡片一样的效果。

    如果某一步出错怎么办？别慌，这正是 TRAE 最擅长帮忙的地方。

    • 情况一：代码有红色波浪线（语法错误）
      • 把鼠标放在波浪线上，会看到错误信息。
      • 选中出错的那一行或附近几行代码，右键选择 向 AI 提问，输入：“这段代码报错了，错误信息是 XXX，请问如何修复？”
    • 情况二：浏览器按 F12 打开开发者工具，看到 Console（控制台）有红色报错
      • 复制这个错误信息。
      • 在 TRAE 的 AI 对话面板里粘贴，并提问：“我的网页在浏览器控制台报错：[粘贴错误信息]。问题可能出在哪里？如何修复？”
    • 情况三：功能没实现（比如点击保存没反应）
      • 在 AI 对话面板描述现象：“我的日记本网页，点击保存按钮后，日记没有显示在列表里。请帮我检查 script.js 文件中的 saveDiary 函数可能有什么问题。”
      • AI 会引导你一步步检查，或者直接给出修正后的代码。

    恭喜你！你已经完成了：

    1. ✅ 用 TRAE Builder 从一句话描述生成完整项目。
    2. ✅ 在 TRAE 中运行并查看网页。
    3. ✅ 使用 AI 对话功能修改 HTML 内容、CSS 样式和 JavaScript 逻辑。
    4. ✅ 实现了一个具有增、删、显、存（本地）功能的完整网页应用。

    这个小项目涵盖了软件开发的核心流程：需求分析 -> 项目生成 -> 界面美化 -> 功能增强 -> 调试。通过这个实战，你体验了 TRAE 最核心的两种 AI 用法：Builder（自动创建） 和 Chat（对话修改）。

    给你的挑战（可选）：
    尝试继续用 AI 对话为你的日记本添加以下功能，指令模板都给你：

    • 添加删除功能：“请帮我修改代码，在每一条显示的日记旁边添加一个‘删除’按钮，点击后可以删除这一条日记，并更新本地存储和页面显示。”
    • 添加编辑功能：“请帮我增加日记编辑功能，双击某条日记，可以将其内容重新加载到顶部的输入框进行修改，修改后点击保存更新原日记。”
    • 更换主题：“我不喜欢现在的颜色，请为我的日记本设计一套更温馨（或更暗黑）的配色方案，修改 style.css 文件。”

    记住，遇到任何问题，随时向 TRAE 的 AI 助手提问，它就是为你准备的“24小时贴身教练”。 编程不再是从零开始记忆所有知识，而是学会如何清晰地描述你的想法。祝你玩得开心！

    • 新手小白可以入手的教程，手把手大白话实操，不要嫌弃😒
    • 超详细金蝶财务软件操作流程，新手小白必备及问题解决方案
    • 【Ps教程】从零开始学习Photoshop基础知识，2024新手小白入门实用版！拿走不谢，允许白嫖！！持续更新~

     

    小讯
    上一篇 2026-04-18 09:10
    下一篇 2026-04-18 09:08

    相关推荐

    版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
    如需转载请保留出处：https://51itzy.com/kjqy/267622.html