wordpress 网站暂停上海宣传片拍摄的公司
陈拓 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的辅助下完成。
参考网址
- 健康中国2030
https://healthchina2030.com/Tools/DRIs-4.html