文章目录
- 1. 实战概述
- 2. 实战步骤
- 2.1 环境检查与启动Reasonix
- 2.2 输入需求，触发项目生成
- 2.3 文件创建与编译准备
- 2.4 项目功能清单与启动方式
- 2.4.1 项目功能清单
- 2.4.2 项目启动方式
- 2.5 验证小程序运行结果
- 2.6 将项目部署到华为云服务器
- 2.6.1 登录华为云服务器
- 2.6.2 检测Tomcat服务是否可用
- 2.6.3 将项目部署到Tomcat服务器
- 2.6.4 测试项目是否部署成功
- 3. 实战总结
1. 实战概述
- 本项目使用Reasonix AI编程助手，通过自然语言指令"创建待办事项管理小程序"，自动生成了基于TypeScript + HTML + CSS的完整项目结构。实现了增删改查、状态筛选、本地存储等功能，并成功部署到华为云服务器。整个过程无需手写代码，展示了AI驱动开发的高效性。
2. 实战步骤
2.1 环境检查与启动Reasonix
依次执行命令
cd.\AgentProjects\ToDoListApp\ node-v git-v npx reasonix code粘贴DeepSeek API key
敲回车确认
✅关键信息
- Node.js v24.12.0（兼容现代 TS）
- Git 已安装（用于版本控制）
npx reasonix code启动 Reasonix 会话，进入交互式 AI 编程模式- 系统提示粘贴 DeepSeek API Key（需提前在 https://platform.deepseek.com/api_keys 获取）
- 配置文件保存至：
C:\Users\Administrator\.reasonix\config.json
💡Note：Reasonix 是 DeepSeek 推出的本地化 AI 编程代理，可理解需求 → 生成结构 → 编写代码 → 自动测试/编译。
2.2 输入需求，触发项目生成
在 Reasonix 会话中输入
“帮我创建一个‘待办事项管理’小程序的项目结构，使用 TypeScript + HTML + CSS，包含增删改查功能”
📌Reasonix 响应
- 分析需求 → 规划目录结构
- 自动生成如下文件树：
/ ├── index.html # 入口页面 ├── style.css # 样式 ├── tsconfig.json # TypeScript 配置 └── src/ └── todo.ts # 核心逻辑（类型定义 + CRUD + DOM 渲染）
同时输出
tsconfig.json内容（ES2020 + bundler 模式 + strict 检查），确保兼容性与类型安全。
2.3 文件创建与编译准备
Reasonix 自动执行：
+ 新增 tsconfig.json + write_file index.html + write_file style.css + write_file src/todo.ts✅ 所有文件一次性创建完成（共 4 文件），耗时约 22 秒。
随后提示：“All files created. Now let me compile the TypeScript and then verify with a quick check…”
但首次执行
npx tsc报错：To get access to the TypeScript compiler, tsc, from the command line either: - Use npm install typescript to first add TypeScript to your project before using npx - Use yarn to avoid accidentally running code from un-installed packages➡️解决方案：手动安装 TypeScript 开发依赖
npminstalltypescript --save-dev安装成功后再次运行：
npx tsc✅ 编译成功！生成
dist/todo.jsdist/todo.js.map
项目结构更新为
/ ├── dist/ │ ├── todo.js │ └── todo.js.map ├── node_modules/ ├── src/ │ └── todo.ts ├── index.html ├── style.css ├── tsconfig.json └── package.json / package-lock.json
2.4 项目功能清单与启动方式
2.4.1 项目功能清单
| 功能 | 说明 |
|---|---|
| 新增 | 顶部输入框 + 回车/点击「添加」 |
| 列表展示 | 所有待办按时间倒序排列 |
| 切换完成 | 勾选 checkbox，文字自动变灰（CSS 实现） |
| 编辑 | 点击「编辑」进入行内编辑，回车保存 / Esc 取消 |
| 删除 | 单条删除按钮 |
| 清除已完成 | 底部按钮一键清空已完成项 |
| 筛选 | 全部 / 未完成 / 已完成 三档切换 |
| 持久化 | 使用localStorage自动保存，刷新不丢失 |
2.4.2 项目启动方式
- 直接双击打开
index.html（浏览器自动加载） - 或命令行：
# Windowsstart index.html# macOSopenindex.html - 修改源码后需重新编译：
npx tsc
2.5 验证小程序运行结果
打开
D:\AgentProjects\ToDoListApp\index.html，页面呈现- 标题：待办事项
- 统计：
共 3 项 · 已完成 1 项 - 输入框 + 「添加」按钮（蓝色）
- 三个任务卡片：
- ☐ 学习 TypeScript
- ✅ 写一份 README（已勾选，文字灰色）
- ☐ 部署到 GitHub Pages
- 每项右侧有「编辑」「删除」按钮
- 底部红色按钮：「清除已完成」
✅ 所有功能均按需求实现，且数据持久化有效（刷新后状态保留）。
- 单击【清除已完成】按钮
- 添加新的待办事项
- 勾选【学习TypeScript】，表明完成
- 查看未完成事项
- 查看已完成事项
2.6 将项目部署到华为云服务器
2.6.1 登录华为云服务器
2.6.2 检测Tomcat服务是否可用
- 访问
http://1.95.173.32:8080/（1.95.173.32是华为云弹性公网IP）
2.6.3 将项目部署到Tomcat服务器
- 执行命令：
cd $CATALINA_HOME/webapps，进入Tomcat应用目录 - 将项目
ToDoListApp上传到webapps目录 - 执行命令：
ll ToDoListApp
2.6.4 测试项目是否部署成功
- 访问
http://1.95.173.32:8080/ToDoListApp
3. 实战总结
- 本次实战利用Reasonix AI编程助手，成功零手写代码构建了一个功能完备的TypeScript待办事项管理小程序。整个过程从环境配置、需求描述、代码生成、编译调试到功能验证一气呵成。项目包含了增删改查、状态筛选、本地存储等核心功能，并最终部署至华为云Tomcat服务器对外访问。实践证明，AI编程代理能极大提升开发效率，将复杂的开发流程简化为自然语言交互，降低了技术门槛，是快速验证想法和构建原型的强大工具。
