企业官网全栈开发demo产品系统

1、立项背景和目标
该项目是一个面向制造企业的全栈官网 Demo，用于展示企业数字化解决方案及完整的软件交付能力。目标是让客户在短时间内了解公司业务、解决方案、项目案例和合作方式，同时打通官网咨询、数据保存、后台跟进的业务闭环，使网站具备真实商业项目的完整度。

1、软件功能及核心模块
公开官网包含首页、解决方案、客户案例、关于我们、联系咨询5个响应式页面。首页介绍企业定位、产品能力和量化成果；解决方案页覆盖设备采集、生产看板、质量追溯和经营分析；案例页展示不同行业的实施场景；联系页支持提交姓名、公司、联系方式和项目需求。
运营后台包含管理员登录、经营总览、咨询线索和网站内容4个页面。经营总览通过图表统计线索数量与跟进状态；咨询线索支持搜索、筛选、状态修改和删除；内容模块用于维护官网核心文案和联系方式。后端提供JWT登录鉴权、咨询提交、线索管理、内容管理和经营汇总接口。
2、业务流程和功能路径
访客进入官网后，可按照“首页了解能力→查看解决方案→浏览客户案例→填写联系表单”的路径完成咨询。表单数据经FastAPI校验后写入SQLite。管理员登录运营后台，即可在经营总览中查看统计数据，并在线索页面完成联系、需求确认、成交或关闭等状态管理。

1、整体架构和设计思路
项目分为静态官网、Vue运营后台和FastAPI数据服务三部分。官网使用HTML、CSS和原生JavaScript开发，图片与样式均保存在本地，并实现响应式布局、滚动出现动画和移动端菜单。运营后台采用Vue 3、Vite、Element Plus、Vue Router、Pinia、Axios和ECharts。后端使用FastAPI、SQLAlchemy、SQLite和JWT，并提供OpenAPI接口文档。
整体设计先确定企业定位和信息架构，再完成官网视觉与交互，随后开发数据模型、接口和管理后台，最后联调咨询提交、数据库保存和线索跟进流程。
2、我的负责模块和结果
我独立完成了需求拆分、页面设计、前端开发、后端接口、数据库建模、JWT鉴权、跨域配置、联调测试和启动脚本。最终交付5个官网页面、4个后台页面、10个API路径和13张验收截图。官网表单提交后可以在后台实时查看，线索状态会同步到经营统计图表。Vue生产构建通过，官网、后台和API均验证返回200，未登录访问受保护接口返回401。
3、难点和解决方案
第一个难点是静态官网、Vue后台和API运行在不同端口。我通过统一Axios请求层、配置CORS白名单和JWT请求拦截器解决跨域与登录状态问题。
第二个难点是滚动动画导致长截图中部分内容尚未进入视口。我编写浏览器验收脚本，分段滚动触发动画后再截图，并等待后台数据和ECharts完成渲染，避免出现空白区域或零数据。
启动脚本还遇到中文编码兼容问题。我将执行信息调整为ASCII文本，并重新进行PowerShell语法解析，最终实现双击文件同时启动官网、后台和API。