Reasonix实战笔记：打造一个「待办事项管理」小程序

文章目录

[1. 实战概述](#1. 实战概述)
[2. 实战步骤](#2. 实战步骤)
- [2.1 环境检查与启动Reasonix](#2.1 环境检查与启动Reasonix)
- [2.2 输入需求，触发项目生成](#2.2 输入需求，触发项目生成)
- [2.3 文件创建与编译准备](#2.3 文件创建与编译准备)
- [2.4 项目功能清单与启动方式](#2.4 项目功能清单与启动方式)
- - [2.4.1 项目功能清单](#2.4.1 项目功能清单)
  - [2.4.2 项目启动方式](#2.4.2 项目启动方式)
- [2.5 验证小程序运行结果](#2.5 验证小程序运行结果)
- [2.6 将项目部署到华为云服务器](#2.6 将项目部署到华为云服务器)
- - [2.6.1 登录华为云服务器](#2.6.1 登录华为云服务器)
  - [2.6.2 检测Tomcat服务是否可用](#2.6.2 检测Tomcat服务是否可用)
  - [2.6.3 将项目部署到Tomcat服务器](#2.6.3 将项目部署到Tomcat服务器)
  - [2.6.4 测试项目是否部署成功](#2.6.4 测试项目是否部署成功)
[3. 实战总结](#3. 实战总结)

1. 实战概述

本项目使用Reasonix AI编程助手，通过自然语言指令"创建待办事项管理小程序"，自动生成了基于TypeScript + HTML + CSS的完整项目结构。实现了增删改查、状态筛选、本地存储等功能，并成功部署到华为云服务器。整个过程无需手写代码，展示了AI驱动开发的高效性。

2. 实战步骤

2.1 环境检查与启动Reasonix

依次执行命令

powershell 复制代码

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 自动执行：
bash 复制代码
```
+ 新增 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 开发依赖

bash 复制代码

npm install typescript --save-dev

安装成功后再次运行：
bash 复制代码
```
npx tsc
```
✅ 编译成功！生成
- dist/todo.js
- dist/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（浏览器自动加载）

或命令行：

bash 复制代码

# Windows
start index.html
# macOS
open index.html

修改源码后需重新编译：
bash 复制代码
```
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
应用已通过华为云弹性公网IP（1.95.173.32:8080）对外提供服务，前端页面正常加载，增删改查、状态筛选及本地存储功能完整可用。使用的是Tomcat容器部署，HTTP访问稳定。

3. 实战总结

本次实战利用Reasonix AI编程助手，成功零手写代码构建了一个功能完备的TypeScript待办事项管理小程序。整个过程从环境配置、需求描述、代码生成、编译调试到功能验证一气呵成。项目包含了增删改查、状态筛选、本地存储等核心功能，并最终部署至华为云Tomcat服务器对外访问。实践证明，AI编程代理能极大提升开发效率，将复杂的开发流程简化为自然语言交互，降低了技术门槛，是快速验证想法和构建原型的强大工具。