type
status
date
slug
summary
tags
category
icon
password
个人从未从事过代码开发工作，在几乎纯小白的基础上通过Trae使用HTML+Python+Flask实现前后端分离式WebApp开发的实践与思考
准备工作：
Trae官网：https://www.trae.ai/
我生成出来的页面：https://backup.tian.tel/tools/con-scraper/ （页面需要邀请码进行试用，可以邮件我tyler@tian.tel)
使用Builder进行快速开发
初始化：
使用HTML+Python+Flask开发一款前后端分离的WebApp，其中前端HTML使用Tailwind作为样式组件并添加亮/暗主题色切换功能，使用webpack进行生产文件的打包。后端使用.env文件进行环境配置，默认采用开发环境，根目录自动识别，若果是开发环境则渲染HTML文件，如果是生产环境则返回API运行状态。
项目结构：
核心功能：
参考下方代码利用SERPer API开发一款网页爬取工具,允许用户输入一个或多个URL来爬去目标网址的页面并存储下来供用户下载。其中变量My-API-Key存储在.env环境变量中，https://example.com替换为用户输入的URL。
配置描述（package.json）：
注意事项：
考虑到代码的可维护性，请尽可能的把脚本拆分成多个部分，如JS/CSS从HTML拆分为独立文件放置在static文件夹对应位置并再导入进HTML。子功能的python脚本放置在文件夹/src/processor中，并由文件processor.py来调控。
实际部署时的安全性
API所在服务器的安全性
利用Cloudflare来配置DNS，获取SSL证书，过滤异常IP
利用Aapanel来部署API，识别异常IP提供给CF建立WAF规则过滤
利用Systemctl确保API异常情况下自动重启
删除（或600）.env文件（如果有的话）
锁定版本号
实际运行中，Trae可能会混淆所有包的版本，可以参考下面的配置锁定版本号，避免冲突
其他常用对话
【Debug】请在xxx中添加更多的调试信息，来追踪xx的处理过程，方便定位问题步骤。
【安全性】目前这个应用只针对收到邀请的用户开放，因此用户只有输入了正确的邀请码才能使用，邀请码需存放在后端。
【样式参考】请参考文件xxx来，添加/调整现有页面的xxxy元素。
【代码维护】请检查目前xxx代码间有没有冗余或冲突部分。
【分离部署】在文件config.js中添加API基础URL的配置，使其能够灵活指向不同的后端服务地址；在后端添加CORS支持，允许跨域请求。
【格式过滤】针对代码，或上面的项目结构，可以放置在```这里放置你的代码```中。
其他注意事项
- 不要暴露个人隐私信息
- 避免在代码或配置中包含敏感数据
- 谨慎处理用户数据
- 做好服务器安全配置
- 及时更新系统补丁
- 配置防火墙规则
- 限制端口访问
（本文仅供技术交流，使用本文提及的工具导致的任何问题，需自行承担相应责任）欢迎您在底部评论区留言，一起交流~