一、本阶段任务背景
本阶段继续进行前后端的联调工作,并修复上次联调之后,前后端都发生了修改导致的新问题。
二、具体工作
1.问题现象
点击登录/注册按钮,浏览器 Network 无任何请求,后端终端也没有任何日志。前端页面看起来一切正常,但就是“没反应”。
排查过程
检查浏览器控制台:发现 Failed to resolve import “@/utils/request” 错误。原来 Vite 默认不支持 @ 指向 src 的路径别名,导致 request 模块导入失败,onSubmit 函数执行到 request.post 时报错,且错误被静默吞掉。
解决别名问题:在 vite.config.js 中配置 resolve.alias:
importpathfrom'path'exportdefaultdefineConfig({resolve:{alias:{'@':path.resolve(__dirname,'./src')}}})并重启前端。或者更简单,直接改用相对路径 import request from ‘…/…/utils/request’。
2.问题现象与排查
验证请求发出:添加 console.log 调试后,发现表单验证 canSubmit 为 false,原因是手机号正则 ^1[3-9]\d{9}$ 要求第二位是 3~9,而我测试用的 12345678901 第二位是 2。修正测试数据或放宽正则后,请求成功发出。这属于我与前端同学未沟通好,忽略了手机号的某些桂策,导致这个测试耽误了很长时间。
3.问题现象与排查
后端 500 错误与字段可选性
手动 fetch 测试注册接口时,后端返回 500 错误,日志显示数据库 email 字段不允许 NULL。我们的需求是注册仅需手机号和密码,email 可在后续个人信息中补充。因此:
修改 User 模型的 email 字段为 nullable=True
修改注册接口,当请求体中无 email 时设为 None
前端注册请求不再传递 email 字段
这样既满足业务需求,又保持后端健壮。
前后端数据格式约定
后端登录成功后,返回用户信息与 JWT token:
{"message":"登录成功","user_id":1,"nickname":null,"phone":"13912345678","access_token":"eyJhbGciOiJIUzI1NiIs..."}前端需要将 access_token 存入 localStorage,key 为 petai_token(与路由守卫中的检查一致)。注册成功则返回 user_id 和 message,前端据此切换到登录面板。
当前已完成的进度(对应模块 1)
根据项目要求,基础用户与宠物信息管理模块我们已完成:
宠物信息的增删改查(单用户多宠物,与用户 ID 绑定)以及后续的音频上传、情绪识别、评估建议、历史记录管理等模块,将在接下来的迭代中逐一实现。
三、技术心得
路径别名配置:Vite 需要显式配置 resolve.alias,否则 @ 无法识别。这一点与 Vue CLI 不同,新手容易踩坑。
调试技巧:遇到前端“无反应”时,优先检查浏览器控制台是否有红错,然后在关键函数添加 console.log 定位执行阶段。
前后端契约:提前约定好字段名、状态码、错误格式,可以大幅减少联调时间。我们这次就因 token 字段名不一致(后端返回 access_token,前端期望 token)多花了时间。
数据库字段设计:非必填字段应允许 NULL,避免插入时因缺少字段而报错。
四、下一步计划
完成宠物信息管理(增删改查,用户隔离)
集成音频上传与格式校验(MP3/WAV,≤50MB)
实现历史记录查询(近 7 天/30 天,倒序)
全流程联调:登录 → 添宠 → 上传音频 → 识别 → 评估 → 查看记录
完善异常处理(网络中断、超时、重试)与权限控制
五、总结
打通注册登录是项目的第一步,也是最重要的一步。只有基础的用户认证和前端通信链路稳定,后续的复杂业务才能顺利展开。通过这次联调,我积累了前后端协作的经验,也加深了对 Vite、Flask-JWT、跨域代理等技术的理解。