前言在本阶段的项目开发中我主要围绕“点单翻译”系统进行了测试、调试和问题修复工作。项目的核心功能是帮助用户通过拍照或上传菜单图片快速识别菜单内容并结合个人口味偏好、过敏原、收藏记录等信息为用户提供更智能的点餐辅助。随着功能逐渐完善项目已经不再只是简单的页面展示而是涉及 Flutter 前端页面、手机相机调用、图片上传、后端接口、数据库连接、用户信息管理等多个模块。因此在本轮开发中我重点进行了真机测试和前后端联调发现并修复了页面文字溢出、拍照功能适配、数据库连接异常、接口访问不稳定等一系列问题。一、测试调试背景项目目前已经实现了首页、菜单图片上传、拍照识别、相册选择、文件上传、个人主页、偏好设置、收藏管理等功能。其中首页是用户进入系统后的核心入口。用户可以通过“上传菜单图片”按钮进入图片选择弹窗然后选择以下三种方式之一拍照识别从相册选择上传图片文件在实际测试过程中我发现很多问题只有在真机运行时才会暴露出来。例如模拟器中页面显示正常但换到真实手机后可能出现文字溢出电脑浏览器中接口访问正常但手机端访问后端时可能失败功能逻辑在代码层面没有报错但用户实际点击时可能存在权限、路径、网络等问题。因此本阶段我将重点从“功能能不能跑通”转向“真实用户场景下是否稳定可用”。二、问题一页面文字溢出1. 问题现象在真机测试时我首先发现页面存在文字溢出问题主要集中在首页功能卡片和底部弹窗中。例如在“选择菜单图片”弹窗中每个功能项都包含图标、标题、说明文字和右侧箭头拍照识别立即调用系统相机拍菜单从相册选择选择已经拍好的菜单照片上传图片文件从本地文件中选择图片在部分屏幕尺寸较小的手机上说明文字会出现显示不完整、被挤压、超出边界等情况。虽然功能本身可以使用但页面观感不够稳定也会影响用户体验。2. 问题原因经过排查页面文字溢出主要由以下几个原因造成第一部分 Row 布局中图标、文字和箭头横向排列但文字区域没有使用Expanded或Flexible进行宽度自适应。第二一些组件设置了固定宽度在不同手机屏幕尺寸下无法自动调整。第三标题字号较大说明文字较长导致在小屏幕设备上容易超出可用空间。第四页面中 padding 和 margin 设置较大压缩了文字本身的显示区域。3. 解决思路针对该问题我主要从布局自适应和文本显示控制两个方面进行修复。首先将 Row 中的文字区域使用Expanded包裹让文字区域自动占据剩余空间避免和右侧箭头发生冲突。Row(children:[Container(width:56,height:56,child:Icon(Icons.camera_alt),),constSizedBox(width:16),Expanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(拍照识别,maxLines:1,overflow:TextOverflow.ellipsis,style:TextStyle(fontSize:18,fontWeight:FontWeight.bold,),),Text(立即调用系统相机拍菜单,maxLines:2,overflow:TextOverflow.ellipsis,style:TextStyle(fontSize:14,color:Colors.grey,),),],),),Icon(Icons.chevron_right),],)其次对较长的说明文字添加maxLines和overflow避免文字撑破布局。Text(subtitle,maxLines:2,overflow:TextOverflow.ellipsis,)最后对底部弹窗整体间距进行了微调使页面在不同屏幕尺寸下都能够保持较好的显示效果。三、问题二新增拍照功能并进行真机测试1. 功能新增背景在之前的版本中用户主要通过相册选择图片进行菜单识别。这种方式虽然可以完成基本功能但用户实际使用时需要先打开系统相机拍照再回到应用中从相册选择图片操作流程较长。为了让用户能够更方便地使用系统本阶段新增了“拍照识别”功能。用户点击首页上传按钮后可以直接选择“拍照识别”系统会立即调用手机相机拍摄菜单。新增后的流程如下点击上传菜单图片 ↓ 弹出图片来源选择框 ↓ 选择拍照识别 ↓ 调用系统相机 ↓ 拍摄菜单图片 ↓ 返回应用并上传图片 ↓ 后端识别菜单内容2. 真机测试的重要性拍照功能不能只依赖模拟器测试。因为它涉及真实手机的相机权限、系统相机调用、图片临时路径、文件读取和上传等问题。所以我将手机连接到电脑使用 Flutter 真机调试方式进行测试。真机调试可以更加真实地模拟用户使用场景也能及时发现模拟器中看不到的问题。测试内容主要包括点击“拍照识别”后是否可以正常打开系统相机第一次使用时是否能正确弹出权限申请拍照完成后是否能返回 App返回后图片路径是否有效图片是否能正常上传到后端后端是否能正常接收图片并返回识别结果。3. 拍照功能实现前端使用image_picker实现相机调用和相册选择。拍照识别核心代码如下finalImagePickerpickerImagePicker();FuturevoidtakePhoto()async{finalXFile?imageawaitpicker.pickImage(source:ImageSource.camera,imageQuality:85,);if(image!null){FileimageFileFile(image.path);// 后续执行图片上传、菜单识别等逻辑awaituploadMenuImage(imageFile);}}从相册选择图片的实现如下FuturevoidpickFromGallery()async{finalXFile?imageawaitpicker.pickImage(source:ImageSource.gallery,imageQuality:85,);if(image!null){FileimageFileFile(image.path);awaituploadMenuImage(imageFile);}}4. 权限配置在 Android 端需要添加相机和文件读取相关权限否则在真机运行时可能无法正常调用相机。uses-permissionandroid:nameandroid.permission.CAMERA/uses-permissionandroid:nameandroid.permission.READ_EXTERNAL_STORAGE/如果项目适配了较新的 Android 版本还需要根据系统版本进一步处理图片读取权限。5. 测试结果经过真机测试拍照功能可以正常调用系统相机。用户拍摄菜单图片后应用能够获取图片路径并进入后续上传和识别流程。相比之前只能从相册选择图片现在的操作路径更加直接也更符合点餐场景。四、问题三数据库连接异常修复1. 问题现象在前后端联调过程中还遇到了数据库连接异常问题。具体表现为后端启动时报数据库连接错误前端调用用户信息接口失败收藏菜品后无法保存偏好设置提交后没有写入数据库部分接口返回 500 错误不同组员电脑上数据库配置不一致。这些问题会直接影响用户数据相关功能例如个人主页、收藏管理、口味偏好、过敏原设置等。2. 问题原因经过排查主要原因是数据库配置和本地环境不统一。项目后端使用 MySQL 数据库连接数据库时需要配置以下信息数据库用户名数据库密码数据库地址数据库端口数据库名称。如果本地 MySQL 没有启动或者数据库名称不存在或者密码与配置不一致后端就会连接失败。常见错误包括Access denied for user rootlocalhost Unknown database menu_app Cant connect to MySQL server3. 修复过程首先确认本地 MySQL 服务已经正常启动。然后创建项目所需数据库CREATEDATABASEmenu_appDEFAULTCHARACTERSETutf8mb4;接着统一后端数据库配置。原本如果把数据库账号密码直接写在代码中不同开发环境之间很容易冲突。因此我对数据库配置进行了优化让后端优先从环境变量或配置文件中读取数据库信息。示例配置如下fromurllib.parseimportquote_plusfromsqlalchemyimportcreate_engine db_user_config_value(DB_USER,root)db_password_raw_config_value(DB_PASSWORD,)db_passwordquote_plus(db_password_raw)ifdb_password_rawelsedb_host_config_value(DB_HOST,localhost)db_port_config_value(DB_PORT,3306)db_name_config_value(DB_NAME,menu_app)ifdb_password:DATABASE_URLfmysqlpymysql://{db_user}:{db_password}{db_host}:{db_port}/{db_name}else:DATABASE_URLfmysqlpymysql://{db_user}{db_host}:{db_port}/{db_name}enginecreate_engine(DATABASE_URL)这样每个开发者只需要在自己的本地环境中配置数据库用户名和密码不需要频繁修改代码文件也避免了提交代码时覆盖他人配置的问题。4. 修复结果修复后后端能够正常连接 MySQL 数据库。用户信息、收藏记录、偏好设置等数据可以正常保存和读取前端页面也能够正确展示数据库中的内容。五、问题四手机端访问后端接口失败1. 问题现象在电脑上运行后端服务时前端如果使用模拟器或者网页调试访问接口可能是正常的。但当我将 App 运行到真实手机上时接口请求失败。一开始我以为是后端接口或图片上传逻辑有问题但排查后发现问题出在接口地址上。2. 问题原因在真机上运行 App 时不能直接使用下面这种地址访问电脑后端http://localhost:8000因为对于手机来说localhost指的是手机本身而不是电脑。也就是说如果 Flutter App 在手机上请求localhost:8000它会尝试访问手机自己的 8000 端口而不是电脑上运行的 FastAPI 后端。3. 解决方法需要将接口地址改成电脑在局域网中的 IP 地址例如http://192.168.x.x:8000同时后端启动时不能只监听127.0.0.1而要监听所有网卡地址uvicorn main:app--host0.0.0.0--port8000此外还需要保证手机和电脑连接在同一个 WiFi电脑防火墙没有拦截 8000 端口Flutter 项目中的接口地址已经改为电脑局域网 IP后端服务处于正常运行状态。4. 修复结果修改接口地址并重新启动后端后手机端可以正常访问电脑上的后端接口。图片上传、菜单识别、用户信息获取、收藏管理等功能都可以顺利完成联调。六、底部弹窗交互优化除了修复功能性问题本阶段还对底部弹窗交互进行了优化。原来的上传入口比较简单用户点击后直接选择图片操作说明不够清晰。优化后点击“上传菜单图片”按钮会弹出一个底部菜单用户可以明确选择图片来源。弹窗中包含三个入口功能说明拍照识别立即调用系统相机拍菜单从相册选择选择已经拍好的菜单照片上传图片文件从本地文件中选择图片这样的设计让用户可以根据实际场景选择最合适的方式。如果用户正在餐厅中可以直接拍照识别如果用户之前已经拍好了菜单照片可以从相册中选择如果图片保存在本地文件中也可以通过文件上传方式导入。优化后的页面结构更加清晰操作路径也更符合实际使用需求。七、测试用例整理为了保证功能稳定我对本阶段涉及的功能进行了简单测试用例整理。测试模块测试内容预期结果测试结果首页显示打开 App 首页页面正常显示无明显溢出通过底部弹窗点击上传菜单图片弹出图片来源选择框通过拍照识别点击拍照识别正常调用系统相机通过相册选择点击从相册选择正常打开系统相册通过文件上传点击上传图片文件正常打开文件选择器通过图片上传选择图片后上传后端正常接收图片通过数据库连接启动后端服务数据库连接成功通过收藏管理收藏菜品收藏数据写入数据库通过偏好设置修改口味和过敏原用户偏好保存成功通过真机联调手机访问电脑后端接口请求正常通过八、本轮调试收获通过本轮测试和调试我更加深刻地认识到项目开发不能只关注代码是否写完更要关注功能在真实环境下是否稳定。尤其是移动端项目真机测试非常重要。很多问题在代码层面看不出来在模拟器中也不一定明显但用户真实使用时很容易暴露。例如不同屏幕尺寸导致的文字溢出相机权限申请失败手机端无法访问电脑 localhost图片路径在不同平台下表现不同数据库配置在不同开发环境下不一致后端接口在真实网络环境中访问失败。这些问题虽然不一定是复杂算法问题但它们直接决定了项目能不能真正落地使用。九、总结本阶段主要完成了点单翻译项目的测试调试和功能完善工作。通过真机测试我发现并修复了页面文字溢出、数据库连接异常、手机端接口访问失败等问题同时新增并验证了拍照识别功能。目前用户可以在首页点击“上传菜单图片”通过拍照、相册或文件三种方式导入菜单图片系统能够将图片上传到后端进行识别并结合用户偏好、收藏等信息完成后续功能。经过本轮优化后项目整体稳定性和用户体验都有了明显提升。后续还可以继续完善图片压缩、识别加载动画、异常提示、历史识别记录等功能让点单翻译系统更加完整、易用和可靠。
