企业官网建设流程全解析

一键开通华为云码道 CodeArts 代码智能体： https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwatomgit1&sourcead=dmzntgwatomgithd

一、项目背景

在前两篇实践中，我使用 AtomGit 智能体开发了随机抽签工具和可视化决策系统。前者解决了多个选项之间的随机选择问题，后者通过指标评分和权重计算，实现了多个方案之间的量化比较。

不过，完成方案选择并不意味着整个过程结束。在实际学习和工作中，我们还需要将已经确定的计划转化为具体任务，并持续跟踪任务的完成情况。

例如，制定一份学习计划后，通常还需要记录每天要完成的学习内容、任务截止日期以及当前进度。如果只依靠纸笔记录或者临时记忆，任务一多，就容易出现遗漏或安排混乱的情况。

基于这一需求，本次继续使用 AtomGit 智能体，尝试开发一个轻量级的学习任务管理系统。

与前两个项目相比，本次实践更加关注任务的创建、分类、进度更新和本地数据保存，希望通过一个简单的网页应用，将计划管理落实到日常执行中。

本项目使用 HTML、CSS 和 JavaScript 实现，不需要搭建复杂的后端服务，重点是体验如何利用自然语言描述需求，让智能体协助完成一个具有实际使用价值的小型 Web 应用。

【截图1：AtomGit 智能体交互界面】

二、项目需求分析

2.1 项目目标

本项目的目标是构建一个操作简单、界面清晰的学习任务管理系统，让用户能够在一个页面中完成任务录入、状态更新和进度查看。

系统主要面向个人学习场景，例如课程复习、作业安排、考试准备和编程练习等。

与单纯的文本记录不同，本项目将任务按照状态进行分类，使用户能够快速了解哪些任务尚未开始、哪些正在进行，以及哪些已经完成。

2.2 核心功能设计

结合实际使用场景，本项目规划了以下功能。

为了控制开发难度，本次不增加用户注册、多人协作、云端同步等功能，优先完成个人使用场景下的基本操作。

2.3 技术方案

本项目采用原生前端技术实现。

• HTML：构建任务输入表单、任务列表和统计区域。

• CSS：负责页面布局、任务卡片、状态标签和整体视觉效果。

• JavaScript：实现任务增删改查、筛选、状态更新和进度统计。

• localStorage：在当前浏览器中保存任务数据，使页面刷新后仍能恢复此前保存的任务。

需要注意，localStorage 保存的数据通常只存在于当前浏览器的对应站点环境中，并不等同于云端数据库。更换浏览器或清除网站数据后，记录不一定能够保留。

三、使用 AtomGit 智能体开发项目

3.2 编写开发提示词

为了减少开发过程中的反复修改，本次将需求拆分为任务管理、状态更新、数据保存和进度统计四个主要部分，并明确技术限制。

以下是本次项目使用的提示词。

请帮我开发一个名为“学习任务管理系统”的网页应用。 一、技术要求 1. 使用原生 HTML、CSS 和 JavaScript。 2. 不需要后端接口、数据库或第三方 API。 3. 使用 localStorage 保存任务数据。 4. 页面布局清晰美观，适配电脑浏览器。 5. 请尽可能自主完成项目文件创建和代码编写。 二、功能要求 1. 用户可以添加学习任务。 2. 每个任务包含任务名称、任务分类、 截止日期、优先级和任务状态。 3. 任务分类包括学习、作业、考试准备和其他。 4. 优先级分为高、中、低三个等级。 5. 任务状态包括待办、进行中和已完成。 6. 支持编辑和删除任务。 7. 支持按照任务状态进行筛选。 8. 支持按照任务分类进行筛选。 9. 页面顶部显示任务总数、已完成数量和完成比例。 10. 修改任务状态后，统计数据应同步更新。 11. 页面刷新后，应能够从 localStorage 恢复任务数据。 12. 对空任务名称和无效输入进行提示。 13. 当任务列表为空时，显示友好的空状态提示。 三、页面设计 1. 采用简洁现代的后台管理界面风格。 2. 顶部展示页面标题和任务统计卡片。 3. 中间提供任务添加表单和筛选区域。 4. 下方展示任务列表。 5. 不同优先级和状态使用清晰的视觉标识。 6. 保证文字清晰，按钮容易识别和操作。 四、交付要求 1. 请创建完整项目文件，不要只提供代码片段。 2. 检查 HTML、CSS 和 JavaScript 文件之间的引用关系。 3. 检查新增、编辑、删除、筛选和状态更新逻辑。 4. 检查 localStorage 保存和恢复数据的逻辑。 5. 完成后说明项目文件结构、运行方法和测试步骤。 6. 如果当前环境不能直接运行项目，请明确说明。 请优先保证项目简单、功能完整、容易运行。 不要添加登录、云端同步、复杂动画等额外功能。 不要将尚未实际执行的测试描述为已经通过。

这段提示词将项目功能和技术边界写得比较明确，可以让智能体围绕具体需求生成代码，避免在开发过程中加入过多不必要的功能。

3.3 查看智能体生成的项目文件

提交需求后，等待智能体生成代码或创建相应文件。实际能够执行的操作取决于当前智能体入口支持的能力。

项目可以采用如下文件结构：

study-task-manager/ ├── index.html ├── style.css └── script.js

其中：

• index.html：负责任务表单、筛选区域、统计卡片和任务列表的结构。

• style.css：负责页面布局、颜色、间距和状态标签样式。

• script.js：负责任务操作、数据保存、筛选及统计逻辑。

如果智能体已经创建了这些文件，就直接检查现有内容，不需要重复创建。

接下来，可以要求智能体检查以下问题：

1. 页面是否正确引用 CSS 和 JavaScript 文件。

2. 新增任务后，任务列表是否同步更新。

3. 编辑或删除任务后，统计数据是否重新计算。

4. 修改任务状态后，完成比例是否发生相应变化。

5. 刷新网页后，已经保存的任务能否恢复。

已创建文件：

四、核心功能实现思路

4.1 任务数据结构

为了方便管理，每个任务可以使用一个 JavaScript 对象保存。

例如：

const task = { id: "task-001", title: "完成课程复习", category: "学习", dueDate: "2026-10-20", priority: "高", status: "待办" };

其中，id用于区分不同任务，title保存任务名称，category表示任务分类，dueDate表示截止日期，priority表示优先级，status表示当前状态。

实际项目中，应由程序为每个任务生成唯一标识，避免新增任务时出现重复 ID。

4.2 任务状态管理

本项目将任务分为三种状态：

• 待办：尚未开始执行。

• 进行中：任务已经开始，但还没有完成。

• 已完成：任务已经完成。

当用户修改某项任务的状态时，页面需要同步更新任务显示和统计数据。

例如，将一个待办任务修改为已完成后，已完成任务数量应增加，任务总数保持不变，完成比例则根据新的统计结果重新计算。

4.3 进度统计

系统可以通过任务总数和已完成任务数量计算完成比例。

假设任务总数为 (N)，已完成任务数量为 (C)，当任务总数大于零时，完成比例为：

[P=\frac{C}{N}\times100%]

例如，当前共有2 个任务，其中 1 个已经完成，则完成比例为：

[P=\frac{1}{2}\times100%=50%]

如果任务总数为零，应将完成比例显示为 0%，避免出现除以零的问题。

无任务时：

4.4 本地数据保存

为了避免用户每次刷新页面都需要重新输入任务，本项目使用浏览器的 localStorage 保存任务列表。

基本实现思路是：

1. 用户新增、修改或删除任务后，更新当前任务数据。

2. 将最新任务数据转换为 JSON 字符串并保存。

3. 页面加载时读取已保存的数据。

4. 根据恢复的数据重新渲染任务列表和统计信息。

这种方式不需要额外搭建服务器，适合个人任务管理工具。

不过，本地存储并不具备完整的云端数据管理能力。若要支持多设备同步、账号管理或多人协作，就需要进一步设计后端服务和数据存储方案。

五、网页运行与功能测试

代码生成完成后，按照智能体提供的运行说明启动项目。

如果项目采用普通 HTML、CSS 和 JavaScript 文件，通常可以使用浏览器打开index.html进行基本测试。若生成的项目采用其他结构，则应遵循实际提供的运行说明。

5.1 测试任务新增功能

首先，打开网页，输入一条测试任务：

• 任务名称：完成课程复习

• 分类：学习

• 截止日期：选择一个未来日期

• 优先级：高

• 状态：待办

提交后，检查任务是否显示在列表中，以及对应的分类、日期和优先级是否正确。

随后再添加两条不同类型的任务，检查列表是否能够正常显示多条记录。

5.2 测试状态更新与进度统计

接下来，将其中一条任务的状态从“待办”修改为“已完成”。

检查以下内容：

1. 任务状态是否正确更新。

2. 已完成任务数量是否增加。

3. 任务总数是否保持不变。

4. 完成比例是否重新计算。

可以继续修改其他任务的状态，观察统计结果是否始终与任务列表保持一致。

5.3 测试筛选功能

在任务列表中分别添加学习、作业和考试准备等不同分类的任务。

然后尝试按照状态或分类进行筛选，检查页面是否只显示符合条件的任务。

例如，选择“已完成”状态后，列表中应只保留已经完成的任务。

如果同时支持状态筛选和分类筛选，还应检查两个条件同时生效时，结果是否符合预期。

5.4 测试本地数据保存

新增几条任务后，刷新浏览器页面。

检查任务列表是否恢复，以及任务状态和统计数据是否与刷新前一致。

如果刷新后数据消失，可以检查智能体生成的代码是否在任务发生变化时保存了最新数据，以及页面加载时是否正确读取和解析保存的数据。

需要注意，测试时应保持在同一个浏览器和相同站点环境中，并避免在验证过程中清除浏览器站点数据。

测试过程中刷新之后可以看到数据保存良好

5.5 测试异常输入

最后，测试一些容易被忽略的情况：

1. 不填写任务名称，直接提交。

2. 删除一条任务后，检查统计数据。

3. 将所有任务删除，检查空状态页面。

4. 在任务列表为空时，观察完成比例是否正确显示。

5. 修改任务后刷新页面，检查最新数据是否得到保存。

如果发现异常，可以将具体问题反馈给智能体，要求它定位相关代码并修复。

例如：

请检查当前项目的任务管理逻辑。 重点检查： 1. 任务名称为空时是否给出提示。 2. 删除任务后统计数据是否同步更新。 3. 任务列表为空时是否会出现除以零的问题。 4. 页面刷新后是否能够恢复最新保存的数据。 5. 修改任务状态后，筛选结果和完成比例是否正确。 请定位并修复发现的问题，并说明修改了哪些文件。 如果没有实际执行测试，请明确告知我需要手动验证的内容。

异常提示：

5.6 整理测试记录

完成上述操作后，可以根据真实测试情况整理记录。

六、本次实践的几点体会

6.1 项目开发需要从功能闭环出发

本次项目虽然没有复杂的算法，但涉及任务新增、状态更新、数据保存和统计刷新等多个相互关联的功能。

例如，修改任务状态后，不仅任务卡片需要更新，顶部统计信息也需要同步变化。这意味着开发时不能只考虑单个按钮能否点击，还需要考虑数据变化对整个页面的影响。

6.2 合理的提示词有助于提高开发效率

将任务管理需求拆分为明确的功能清单，可以让智能体更容易理解项目目标。

相比一次性提出大量模糊要求，先明确核心功能、技术边界和测试方法，再逐步修复问题，更容易控制项目复杂度。

6.3 本地存储适合轻量级应用，但存在边界

对于个人学习任务管理工具，localStorage 可以满足基本的数据保存需求，降低项目运行门槛。

但它不适合直接替代完整的后端数据库，也不能自然实现多设备同步。因此，在项目设计阶段，需要根据实际需求选择合适的技术方案，而不是盲目增加技术组件。

七、总结

本次实践以学习任务管理为场景，设计并开发了一个轻量级网页应用，主要围绕任务创建、分类筛选、状态更新、进度统计和本地数据保存展开。

从前两篇的随机选择和量化评估，到本次的任务执行管理，三个项目形成了从选择方案、比较方案到管理具体任务的连续实践思路。

通过这一过程，可以进一步体验如何利用 AtomGit 智能体辅助完成小型 Web 应用开发，同时认识到需求分析、数据管理和功能测试在项目中的重要性。

对于初学者而言，使用 AI 智能体并不意味着可以跳过测试环节。只有将自然语言需求、代码检查和实际运行验证结合起来，才能更可靠地完成一个可用的项目。

后续还可以在此基础上增加任务导出、日历视图或学习统计报告等功能。但在扩展之前，应先确保当前核心功能运行正常、数据逻辑清晰，并且经过实际验证。

项目地址：

LearningManagement:这是一个学习任务管理系统，将已经确定的计划转化为具体任务，并持续跟踪任务的完成情况 - AtomGit