2026年山东大学项目实训项目记录（三）
一、本阶段任务综述
本阶段项目进入全栈协同开发的关键阶段，后端团队完成用户认证体系、个人中心模块及AI音频分析工具类封装，前端团队实现7个核心页面的开发与UI统一，双方通过标准化接口文档完成初步联调准备。后端负责人聚焦Flask框架优化与数据库字符集适配，打通“用户注册-登录-资料管理”完整链路；AI模块负责人完成音频特征提取与通义千问大模型情绪分析的全流程封装，确保特征输出标准化；前端负责人基于Vue3生态搭建响应式页面，实现登录鉴权、宠物档案管理、音频上传检测等核心功能，为后续AI能力接入与前后端深度联调奠定基础。
二、后端核心模块开发
1.用户认证与数据管理
- 注册登录功能：实现基于手机号的账户体系，通过正则校验、密码哈希（PBKDF2-SHA256）保障安全，事务回滚机制确保数据一致性。测试验证中文昵称（如“买蛋糕”）存储无乱码，数据库字符集全链路适配utf8mb4。
- 个人中心模块：开发混合数据（JSON+文件流）更新接口，支持昵称修改、头像上传（UUID防覆盖）、密码修改（旧密码验证）。通过Python脚本完成“登录→修改资料”链式测试，Navicat验证数据落地准确。
主要是对上阶段工作的进一步优化，解决一些前后端矛盾。
2.AI模块工具类封装
- 音频特征提取：封装AudioFeatureExtractor类，统一16000Hz采样率、10秒时长限制，提取MFCC、能量、过零率、频谱质心四大特征，兼容MP3/WAV格式。
- 大模型情绪分析：封装PetEmotionAnalyzer类，基于通义千问qwen-turbo模型，设计专用Prompt限定JSON输出（情绪类型、置信度、分析依据），实现API调用容错与超时处理。
三、前端核心页面开发
1. 技术选型
本项目采用 Vue3 生态最新技术栈，从开发效率、构建速度、可维护性三个维度进行技术选型：
- 开发框架：Vue 3 +script setup 组合式API，使用 Composition API 组织业务逻辑，提升代码复用性与可读性。
- 构建工具：Vite ，基于 ESBuild 实现极速热更新，比传统 Webpack 开发效率提升 50% 以上。 • 路由管理：vue-router 4.x，实现页面路由守卫、懒加载、权限控制。
- 样式方案：原生 CSS + 响应式布局 + 自定义变量，保证多端适配与主题统一性。
- 核心依赖：第三方音频处理 SDK + 大语言模型 API，实现宠物声音采集、特征提取、健康评估。 • 状态管理：前期使用组件内状态管理，后期规划接入 Pinia 实现全局状态统一管理。
- 技术栈优势：
轻量化、无冗余依赖
组件化高内聚低耦合
适合快速迭代 + 后续扩展
2.技术架构与UI实现
技术选型：采用Vue3+组合式API、Vite构建工具、vue-router4路由管理，实现组件化开发与极速热更新。
核心页面：完成登录注册（双模式切换、格式校验）、首页（AI驱动Banner、快捷入口）、宠物档案（多宠物绑定、卡片展示）、音频上传（格式/大小校验、预览播放）、情绪识别报告（情绪标签高亮、养护建议）、历史记录（时间筛选、详情查看）、帮助中心（FAQ、反馈入口）7个页面的开发与样式统一。
3.交互优化与问题修复
UI一致性：统一蓝色主调、卡片排版、圆角阴影，修复输入框文字透明、密码框星号显示异常等问题。
功能验证：通过前端模拟数据测试宠物档案管理、音频上传校验（≤50MB、MP3/WAV），确保页面跳转流畅、按钮hover动效统一。
4.部分页面展示
四、技术理解与架构思考
1.后端架构：安全与一致性优先
模块化设计：采用Flask蓝图分离认证（/api/auth）与个人中心（/api/profile）模块，符合RESTful资源划分原则，避免路由冲突。
字符集全链路适配：从数据库表（utf8mb4）、连接参数（charset=‘utf8mb4’）到应用层（Python脚本测试），确保中文及Emoji存储无乱码，验证“数据库字符集需端到端统一”的设计原则。
事务原子性保障：注册、资料修改等写操作通过try-except包裹db.session.commit()，异常时回滚，避免脏数据，体现“数据库事务需严格管理”的工程实践。
2.前端架构：组件化与响应式体验
- 组合式API（Composition API）的逻辑复用优势：采用语法糖组织业务逻辑，将登录表单校验、音频文件校验、宠物信息管理等重复逻辑封装为独立composable函数（如useFormValidate、useAudioCheck），相比Vue2的Options API，避免了mixins的命名冲突与来源不清晰问题，提升代码可维护性与复用性。例如，音频上传页面的格式校验（MP3/WAV）与大小校验（≤50MB）逻辑被提取为useAudioValidate函数，在音频检测页与历史记录详情页复用，减少30%重复代码。
- 响应式布局与CSS变量主题设计：通过CSS变量定义全局主题色（–primary-color: #409EFF）、圆角（–border-radius: 8px）、阴影（–box-shadow: 0 2px 12px rgba(0,0,0,0.1)），结合媒体查询（@media (max-width: 768px)）实现多端自适应布局。例如，宠物档案页面在PC端采用grid三列布局，移动端自动切换为单列堆叠，确保不同设备下的视觉一致性；登录页面卡片采用flex居中布局，配合vh/vw单位实现全屏垂直居中，避免小屏设备内容溢出。
- 状态管理与数据流转设计：前期采用组件内响应式状态（ref/reactive）管理局部数据（如登录页的表单数据、宠物档案页的宠物列表），通过props/emits实现父子组件通信（如宠物卡片组件接收宠物信息，emit删除事件）；后期规划接入Pinia全局状态管理库，将用户登录态（token、用户信息）、宠物信息缓存、检测报告数据等跨组件共享状态提取为独立store（如useUserStore、usePetStore），避免多层组件传值（prop drilling），提升数据流转效率与可调试性。
五、技术难点与解决方案
1.前端技术问题
- 输入框文字不可见：排查发现是CSS层级与透明度设置导致文字被装饰层遮挡，通过调整z-index层级并显式定义文字颜色，恢复了文本的正常渲染。
- 密码框显示异常：针对密码明文显示及光标消失问题，将输入类型规范为type=“password”，并强制设置光标颜色属性，确保了输入的安全性与可见性。
- 页面风格不一致：针对全站样式漂移现象，建立了基于CSS变量的设计令牌，统一了导航栏、色值、圆角及间距规范，实现了视觉体验的高度一致。
- 音频上传校验缺失：利用File API在客户端增加双重校验机制，严格限制文件MIME类型与大小（≤50MB），从源头阻断了非法文件的上传请求。
2.AI模块混合数据接收
问题：音频上传接口需同时处理文本（用户ID）与文件流。
解决：后端使用request.get_json(silent=True)接收文本，request.files.get(‘avatar’)接收文件，实现双模数据解析。
六、下阶段工作计划
- 前后端深度联调：后端接入AI工具类，开发音频上传接口（/api/audio/upload），实现“音频接收→特征提取→情绪分析→结果存储”完整流程；前端替换模拟数据为真实接口，验证登录鉴权、宠物档案管理、检测报告展示等功能。
- 跨域与性能优化：后端配置CORS允许前端域名访问，前端使用Vite构建优化，压缩静态资源提升加载速度。
- 用户测试与反馈：开展小范围用户测试，收集音频上传失败、检测报告加载慢等问题，针对性优化接口响应与页面交互。
七、本阶段总结
本阶段团队高效完成全栈协同开发，后端实现用户认证、数据管理及AI核心工具类封装，前端完成7个核心页面开发与UI统一，双方通过标准化接口文档实现初步对齐。技术层面，后端聚焦安全与一致性，前端注重组件化与响应式体验，AI模块实现标准化封装与容错设计，团队协作遵循工程化规范，整体进度符合计划。下一步将重点推进前后端深度联调与AI能力落地，为项目Demo演示与用户测试做好准备。