陈拓 2025/5/30-2025/5/31

1. 概述

1.1 在AI的辅助下怎样快速开发一个软件原型？

在 豆包（智能助手） 和 Trae CN（低代码开发平台） 的协同辅助下，开发软件原型的流程将更加高效自动化。

怎样使用“豆包 + Trae CN“加快软件开发，我们可以让豆包给一个结合 AI 能力的软件开发全流程指南，例如向豆包提问：

在 豆包 + Trae CN 的辅助下怎样快速开发一个软件原型？

豆包会给出一份涵盖从需求分析、代码生成到测试迭代等关键环节的操作流程，并附具体工具推荐和操作要点。

通过豆包的智能对话和 Trae CN 的低代码能力，即使是非技术团队也能在数小时内完成原型开发，尤其适合快速验证商业想法或内部工具搭建。建议从核心场景入手，逐步扩展功能，充分利用两者的联动优势提升效率。

1.2 开发体验

下面我们在Windows系统中，用豆包 + Trae CN辅助快速实现一个软件原型，目标是写《营养膳食评价》系统中的子模块“DRIs”中的二级子模块“宏量元素 EER 参考摄入量查询”界面。如果操作熟练的话1小时就可以完成任务。

要求：

• 服务器/浏览器模式
• Python（后端）+ javascript（前端）

2. 开发环境和工具

2.1 开发环境

• Windows 10

• Python

• SQLite 3

• javascript

2.2 开发工具

• 豆包

由字节跳动开发。

安装桌面版使用更方便。

• Trae CN

‌字节跳动开发的中国首款AI原生集成开发环境（AI IDE）。

Trae与VSCode在操作上的相似性主要体现在界面布局、快捷键和代码段等方面。‌

Trae在注册过程中会自动继承VSCode的所有配置，包括快捷键和代码段等，这使得用户在使用Trae时会感到非常熟悉和舒适。具体来说，Trae的界面与VSCode非常相似，右侧多了一个AI屏幕，但整体布局和操作方式几乎一致。这种设计使得用户可以迅速上手，减少学习成本。

• SQLiteStudio

https://www.sqlitestudio.pl/

管理SQLite数据库的利器。

• OfficeLens

手机扫描工具。

自动几何校正功能使得图片转文字正确率更高。

3. 构造项目架构

3.1 创建虚拟环境

为每个项目创建独立环境，相互隔离以避免版本冲突。

• 打开一个CMD窗口

• 进入要创建虚拟环境的目录

D:

cd D:\myn\code

• 使用 venv（Python 3.3+ 自带）创建虚拟环境

python3 -m venv myenv      # 创建环境

.\myenv\Scripts\activate   # Windows 激活

• 进入虚拟环境目录myenv

cd myenv

3.2 创建初始项目目录结构

• 创建项目目录DRIs

mkdir DRIs

• 进入DRIs目录

cd DRIs

• 创建一个空的python文件app.py

echo. > app.py

• 创建html页面目录

mkdir templates

• 进入templates目录

cd templates

• 创建一个空的页面文件index.html

echo. > index.html

• 项目目录结构

cd D:\myn\code\myenv

tree DRIs

D:\myn\code\myenv\DRIs

├── app.py

└── templates/

    └── index.html

以上的操作可以在文件资源管理器中更容易的完成，这里用命令行操作是为了熟悉和适应在Trae CN环境中集成的终端窗口中进行操作。

你也可以让豆包帮你写一个批处理文件来完成上面的工作，但如果你熟悉CMD命令，手工操作会更快一些。

4. 创建DRIs数据库

4.1 数据来源

中国居民膳食营养素参考摄入量速查手册（2023版）

4.2 用OfficeLens拍照表格

表 5-1 膳食能量需要量（EER）：

4.3 在豆包中转换

• 上传附件

将上面的图片作为附件上传，上传一个多个都可以。两张图片一起上传，转换成文字后可以将两个分开的表自动连接成一个整张的表。

• 请将附件中的图片识别成文字。

• 请将上面的表格转换为CSV格式。

年龄 / 阶段，MJ/d（男性 - PAL Iᵃ）,kcal/d（男性 - PAL Iᵃ）,MJ/d（男性 - PAL IIᵇ）,kcal/d（男性 - PAL IIᵇ）,MJ/d（男性 - PAL IIIᶜ）,kcal/d（男性 - PAL IIIᶜ）,MJ/d（女性 - PAL Iᵃ）,kcal/d（女性 - PAL Iᵃ）,MJ/d（女性 - PAL IIᵇ）,kcal/d（女性 - PAL IIᵇ）,MJ/d（女性 - PAL IIIᶜ）,kcal/d（女性 - PAL IIIᶜ）

0 岁～，—,—,0.38MJ/(kg・d),90kcal/(kg・d),—,—,—,0.38MJ/(kg・d),90kcal/(kg・d),—,—,—

0.5 岁～，—,—,0.31MJ/(kg・d),75kcal/(kg・d),—,—,—,0.31MJ/(kg・d),75kcal/(kg・d),—,—,—

1 岁～，—,—,3.77,900,—,—,—,3.35,800,—,—,—

2 岁～，—,—,4.60,1100,—,—,—,4.18,1000,—,—,—

3 岁～，—,—,5.23,1250,—,—,—,4.81,1150,—,—,—

4 岁～，—,—,5.44,1300,—,—,—,5.23,1250,—,—,—

5 岁～，—,—,5.86,1400,—,—,—,5.44,1300,—,—,—

6 岁～，5.86,1400,6.69,1600,7.53,1800,5.44,1300,6.07,1450,6.90,1650

7 岁～，6.28,1500,7.11,1700,7.95,1900,5.65,1350,6.49,1550,7.32,1750

8 岁～，6.69,1600,7.74,1850,8.79,2100,6.07,1450,7.11,1700,7.95,1900

9 岁～，7.11,1700,8.16,1950,9.20,2200,6.49,1550,7.53,1800,8.37,2000

10 岁～，7.53,1800,8.58,2050,9.62,2300,6.90,1650,7.95,1900,8.79,2100

11 岁～，7.95,1900,9.20,2200,10.25,2450,7.32,1750,8.37,2000,9.41,2250

12 岁～，9.62,2300,10.88,2600,12.13,2900,8.16,1950,9.20,2200,10.25,2450

15 岁～，10.88,2600,12.34,2950,13.81,3300,8.79,2100,9.83,2350,11.09,2650

18 岁～，9.00,2150,10.67,2550,12.55,3000,7.11,1700,8.79,2100,10.25,2450

30 岁～，8.58,2050,10.46,2500,12.34,2950,7.11,1700,8.58,2050,10.04,2400

50 岁～，8.16,1950,10.04,2400,11.72,2800,6.69,1600,8.16,1950,9.62,2300

65 岁～，7.95,1900,9.62,2300,—,—,6.49,1550,7.74,1850,—,—

75 岁～，7.53,1800,9.20,2200,—,—,6.28,1500,7.32,1750,—,—

孕早期，—,—,—,—,—,—,+0,+0,+0,+0,+0,+0

孕中期，—,—,—,—,—,—,+1.05,+250,+1.05,+250,+1.05,+250

孕晚期，—,—,—,—,—,—,+1.67,+400,+1.67,+400,+1.67,+400

乳母，—,—,—,—,—,—,+1.67,+400,+1.67,+400,+1.67,+400

注：PAL Iᵃ、PAL IIᵇ和 PAL IIIᶜ分别代表低强度身体活动水平、中等强度身体活动水平和高强度身体活动水平。“—” 表示未制定或未涉及；“+” 表示在相应年龄阶段的成年女性需要量基础上增加的需要量。

5. 在Trae CN中创建数据库

5.1 在Trae CN中打开项目文件夹

5.2 与Trae协作创建数据库

• 输入数据库描述

请将下面的数据转换为SQLite3数据库。数据库名称为DRIs，在DRIs中创建1个表，表名称为EER。

年龄 / 阶段，MJ/d（男性 - PAL Iᵃ）,kcal/d（男性 - PAL Iᵃ）,MJ/d（男性 - PAL IIᵇ）,kcal/d（男性 - PAL IIᵇ）,MJ/d（男性 - PAL IIIᶜ）,kcal/d（男性 - PAL IIIᶜ）,MJ/d（女性 - PAL Iᵃ）,kcal/d（女性 - PAL Iᵃ）,MJ/d（女性 - PAL IIᵇ）,kcal/d（女性 - PAL IIᵇ）,MJ/d（女性 - PAL IIIᶜ）,kcal/d（女性 - PAL IIIᶜ）

0 岁～，—,—,0.38MJ/(kg・d),90kcal/(kg・d),—,—,—,0.38MJ/(kg・d),90kcal/(kg・d),—,—,—

0.5 岁～，—,—,0.31MJ/(kg・d),75kcal/(kg・d),—,—,—,0.31MJ/(kg・d),75kcal/(kg・d),—,—,—

1 岁～，—,—,3.77,900,—,—,—,3.35,800,—,—,—

2 岁～，—,—,4.60,1100,—,—,—,4.18,1000,—,—,—

3 岁～，—,—,5.23,1250,—,—,—,4.81,1150,—,—,—

4 岁～，—,—,5.44,1300,—,—,—,5.23,1250,—,—,—

5 岁～，—,—,5.86,1400,—,—,—,5.44,1300,—,—,—

6 岁～，5.86,1400,6.69,1600,7.53,1800,5.44,1300,6.07,1450,6.90,1650

7 岁～，6.28,1500,7.11,1700,7.95,1900,5.65,1350,6.49,1550,7.32,1750

8 岁～，6.69,1600,7.74,1850,8.79,2100,6.07,1450,7.11,1700,7.95,1900

9 岁～，7.11,1700,8.16,1950,9.20,2200,6.49,1550,7.53,1800,8.37,2000

10 岁～，7.53,1800,8.58,2050,9.62,2300,6.90,1650,7.95,1900,8.79,2100

11 岁～，7.95,1900,9.20,2200,10.25,2450,7.32,1750,8.37,2000,9.41,2250

12 岁～，9.62,2300,10.88,2600,12.13,2900,8.16,1950,9.20,2200,10.25,2450

15 岁～，10.88,2600,12.34,2950,13.81,3300,8.79,2100,9.83,2350,11.09,2650

18 岁～，9.00,2150,10.67,2550,12.55,3000,7.11,1700,8.79,2100,10.25,2450

30 岁～，8.58,2050,10.46,2500,12.34,2950,7.11,1700,8.58,2050,10.04,2400

50 岁～，8.16,1950,10.04,2400,11.72,2800,6.69,1600,8.16,1950,9.62,2300

65 岁～，7.95,1900,9.62,2300,—,—,6.49,1550,7.74,1850,—,—

75 岁～，7.53,1800,9.20,2200,—,—,6.28,1500,7.32,1750,—,—

孕早期，—,—,—,—,—,—,+0,+0,+0,+0,+0,+0

孕中期，—,—,—,—,—,—,+1.05,+250,+1.05,+250,+1.05,+250

孕晚期，—,—,—,—,—,—,+1.67,+400,+1.67,+400,+1.67,+400

乳母，—,—,—,—,—,—,+1.67,+400,+1.67,+400,+1.67,+400

这个转换工作在豆包中也能做，与Trae协作的好处是不用在工具间来回切换，生成代码后可以直接测试。

• 生成结果

生成一个Python文件。你也可以让Trae生一些SQL命令来完成数据库的创建工作，但用Python更方便一些。

点击 应用 生成create_database.py

点击 接受

• 运行create_database.py

在Trae中打开一个终端：

PS表示该终端是PowerShell。

运行Python程序：

python create_database.py

Incorrect number of bindings supplied. The current statement uses 13, and there are 14 supplied.

• 修改代码，将表EER中的id字段设置成自动增加

应用

接受

• 再运行create_database.py

错误依然存在：

可见，id自动是否自动增加不是问题的原因。

点击 添加到对话

发送

……

应用

接受

• 再次运行create_database.py

这次完成了。

5.3 在SQLiteStudio中查看数据库

6. 写前端页面

6.1 找一个页面模板截图

6.2 将截图作为附件上传给豆包，并向豆包提出请求

请将附件中的图片写成html页面，并去掉 能量EER 和 -生理状态- 2个下拉框。

6.3 在豆包中转换

• 生成html页面

点击“预览”查看效果：

• 修改标题

将标题修改为：宏量元素 EER 参考摄入量查询

• 修改下拉框大小

“- 年龄/周期 –”下拉框再高一些，宽一些

7. 写后端代码，同时修改相应的前端代码

7.1 写服务器代码和修改html代码

• 让豆包帮我们写服务器和html代码。功能要求：

1、用Python写一个Web服务器代码，功能要求：从数据库DRIs.db的表EER中读取“年龄_阶段”列，填充上面html页面的“- 年龄/周期 -”下拉框。

2、修改前端html代码与后端Python程序配合。

表EER的DDL如下：

CREATE TABLE IF NOT EXISTS EER (

    id INTEGER PRIMARY KEY AUTOINCREMENT,

    年龄_阶段 TEXT,

    MJ_d_男性_PAL_Iᵃ TEXT,

    kcal_d_男性_PAL_Iᵃ TEXT,

    MJ_d_男性_PAL_IIᵇ TEXT,

    kcal_d_男性_PAL_IIᵇ TEXT,

    MJ_d_男性_PAL_IIIᶜ TEXT,

    kcal_d_男性_PAL_IIIᶜ TEXT,

    MJ_d_女性_PAL_Iᵃ TEXT,

    kcal_d_女性_PAL_Iᵃ TEXT,

    MJ_d_女性_PAL_IIᵇ TEXT,

    kcal_d_女性_PAL_IIᵇ TEXT,

    MJ_d_女性_PAL_IIIᶜ TEXT,

    kcal_d_女性_PAL_IIIᶜ TEXT

)

发送，生成代码：

Python代码：

html代码：

• 将Python代码复制到项目的app.py文件中

• 将html代码复制到项目的index.html中

7.2 让Trae CN的终端进入虚拟环境

• 进入虚拟目录

cd D:\myn\code

• 激活虚拟目录

.\myenv\Scripts\activate   # Windows 激活

• 回到项目目录

cd D:\myn\code\myenv\DRIs

• 虚拟环境下的Python版本

7.3 安装依赖

pip install flask-sqlalchemy

pip list

7.4 运行 Python 服务器

python app.py

警告信息“WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.”表示当前使用的服务器仅适用于开发阶段，无法满足生产环境的性能和安全性要求‌。

7.5 在浏览器中访问：http://localhost:5000

• 打开页面

• 从下拉框选择“年龄/周期“

• 让豆包修改年龄显示顺序

请修改上面的代码，按照数据库DRIs中表EER的id字段顺序显示年龄顺序。

主要修改点：

修改前的语句：

cursor.execute('SELECT DISTINCT 年龄_阶段 FROM EER ORDER BY 年龄_阶段')

将 SQL 查询中的ORDER BY 年龄_阶段改为ORDER BY id ASC

明确指定升序排列（ASC），确保按照 id 从小到大的顺序返回数据。

修改后的语句：

cursor.execute('SELECT DISTINCT 年龄_阶段 FROM EER ORDER BY id ASC')

这样修改后，前端下拉框中的年龄选项将按照表 EER 中记录的 id 顺序显示，而不是按年龄文本排序。前端 HTML 代码无需修改，因为数据排序逻辑由后端控制。

同样的问题也可以提给Trae，通过比较，豆包解决问题的能力似乎更强一些。

修改app.py代码后的效果：

选择一个年龄段，例如：30岁～

• 点击“查询“按钮获取数据

完成！在整个开发过程中我们自己没有写一行代码。

8. 后续工作

后续我们可以让 豆包 + Trae帮助我们完善软件原型。

• 优化代码

基本功能实现之后，进一步优化代码。

• 美化页面

在开发各个子模块的过程中，不同的参考模板有不同的页面风格，在所有的功能完成之后可以上传所有的html页面:

让豆包帮我们按照统一的格式美化页面。

• 分离style

统一页面格式后可以分离html文件中的style，生成CSS文件。

在HTML文档中，将内联样式（style属性中的样式）迁移到外部CSS文件中，可以提高代码的可维护性和可重用性，并且可以减少HTML文件的大小，加快网页加载速度。

• 分离javescript

从html文档中分离javescript代码，生成外部js文件。

在HTML文档中分离JavaScript代码，并将它们提取到外部的JS文件中，是一种优化网页性能和保持代码组织性的良好实践。这样做可以让HTML文件更加清晰，同时也有助于浏览器缓存JS文件，减少每次页面加载时的JavaScript执行时间。

9. 部署注意事项

• 生产环境建议

后端使用Gunicorn+Nginx部署，前端使用Vite/Webpack打包。

• 跨域问题解决

Flask需配置CORS支持，开发时可启用代理服务器。

• 完整项目

建议采用Vue CLI创建前端+Flask后端的结构，通过API规范实现解耦。

• 对于需要本地计算的场景可参考vue-pywebview-pyinstaller方案打包成桌面应用。

这些工作也可以在豆包 + Trae的辅助下完成。

参考网址

1. 健康中国2030
   https://healthchina2030.com/Tools/DRIs-4.html