开发日志（十六）：测试调试、拍照识别与数据库问题修复

前言

在本阶段的项目开发中，我主要围绕“点单翻译”系统进行了测试、调试和问题修复工作。项目的核心功能是帮助用户通过拍照或上传菜单图片，快速识别菜单内容，并结合个人口味偏好、过敏原、收藏记录等信息，为用户提供更智能的点餐辅助。

随着功能逐渐完善，项目已经不再只是简单的页面展示，而是涉及 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实现相机调用和相册选择。

拍照识别核心代码如下：

finalImagePickerpicker=ImagePicker();Future<void>takePhoto()async{finalXFile?image=awaitpicker.pickImage(source:ImageSource.camera,imageQuality:85,);if(image!=null){FileimageFile=File(image.path);// 后续执行图片上传、菜单识别等逻辑awaituploadMenuImage(imageFile);}}

从相册选择图片的实现如下：

Future<void>pickFromGallery()async{finalXFile?image=awaitpicker.pickImage(source:ImageSource.gallery,imageQuality:85,);if(image!=null){FileimageFile=File(image.path);awaituploadMenuImage(imageFile);}}

4. 权限配置

在 Android 端，需要添加相机和文件读取相关权限，否则在真机运行时可能无法正常调用相机。

<uses-permissionandroid:name="android.permission.CAMERA"/><uses-permissionandroid:name="android.permission.READ_EXTERNAL_STORAGE"/>

如果项目适配了较新的 Android 版本，还需要根据系统版本进一步处理图片读取权限。

5. 测试结果

经过真机测试，拍照功能可以正常调用系统相机。用户拍摄菜单图片后，应用能够获取图片路径，并进入后续上传和识别流程。相比之前只能从相册选择图片，现在的操作路径更加直接，也更符合点餐场景。

四、问题三：数据库连接异常修复

1. 问题现象

在前后端联调过程中，还遇到了数据库连接异常问题。具体表现为：

• 后端启动时报数据库连接错误；
• 前端调用用户信息接口失败；
• 收藏菜品后无法保存；
• 偏好设置提交后没有写入数据库；
• 部分接口返回 500 错误；
• 不同组员电脑上数据库配置不一致。

这些问题会直接影响用户数据相关功能，例如个人主页、收藏管理、口味偏好、过敏原设置等。

2. 问题原因

经过排查，主要原因是数据库配置和本地环境不统一。

项目后端使用 MySQL 数据库，连接数据库时需要配置以下信息：

• 数据库用户名；
• 数据库密码；
• 数据库地址；
• 数据库端口；
• 数据库名称。

如果本地 MySQL 没有启动，或者数据库名称不存在，或者密码与配置不一致，后端就会连接失败。

常见错误包括：

Access denied for user 'root'@'localhost' Unknown database 'menu_app' Can't connect to MySQL server

3. 修复过程

首先，确认本地 MySQL 服务已经正常启动。

然后，创建项目所需数据库：

CREATEDATABASEmenu_appDEFAULTCHARACTERSETutf8mb4;

接着，统一后端数据库配置。原本如果把数据库账号密码直接写在代码中，不同开发环境之间很容易冲突。因此我对数据库配置进行了优化，让后端优先从环境变量或配置文件中读取数据库信息。

示例配置如下：

fromurllib.parseimportquote_plusfromsqlalchemyimportcreate_engine db_user=_config_value("DB_USER","root")db_password_raw=_config_value("DB_PASSWORD","")db_password=quote_plus(db_password_raw)ifdb_password_rawelse""db_host=_config_value("DB_HOST","localhost")db_port=_config_value("DB_PORT","3306")db_name=_config_value("DB_NAME","menu_app")ifdb_password:DATABASE_URL=f"mysql+pymysql://{db_user}:{db_password}@{db_host}:{db_port}/{db_name}"else:DATABASE_URL=f"mysql+pymysql://{db_user}@{db_host}:{db_port}/{db_name}"engine=create_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. 修复结果

修改接口地址并重新启动后端后，手机端可以正常访问电脑上的后端接口。图片上传、菜单识别、用户信息获取、收藏管理等功能都可以顺利完成联调。

六、底部弹窗交互优化

除了修复功能性问题，本阶段还对底部弹窗交互进行了优化。

原来的上传入口比较简单，用户点击后直接选择图片，操作说明不够清晰。优化后，点击“上传菜单图片”按钮会弹出一个底部菜单，用户可以明确选择图片来源。

弹窗中包含三个入口：

这样的设计让用户可以根据实际场景选择最合适的方式。如果用户正在餐厅中，可以直接拍照识别；如果用户之前已经拍好了菜单照片，可以从相册中选择；如果图片保存在本地文件中，也可以通过文件上传方式导入。

优化后的页面结构更加清晰，操作路径也更符合实际使用需求。

七、测试用例整理

为了保证功能稳定，我对本阶段涉及的功能进行了简单测试用例整理。

八、本轮调试收获

通过本轮测试和调试，我更加深刻地认识到，项目开发不能只关注代码是否写完，更要关注功能在真实环境下是否稳定。

尤其是移动端项目，真机测试非常重要。很多问题在代码层面看不出来，在模拟器中也不一定明显，但用户真实使用时很容易暴露。例如：

• 不同屏幕尺寸导致的文字溢出；
• 相机权限申请失败；
• 手机端无法访问电脑 localhost；
• 图片路径在不同平台下表现不同；
• 数据库配置在不同开发环境下不一致；
• 后端接口在真实网络环境中访问失败。

这些问题虽然不一定是复杂算法问题，但它们直接决定了项目能不能真正落地使用。

九、总结

本阶段主要完成了点单翻译项目的测试调试和功能完善工作。通过真机测试，我发现并修复了页面文字溢出、数据库连接异常、手机端接口访问失败等问题，同时新增并验证了拍照识别功能。

目前，用户可以在首页点击“上传菜单图片”，通过拍照、相册或文件三种方式导入菜单图片，系统能够将图片上传到后端进行识别，并结合用户偏好、收藏等信息完成后续功能。

经过本轮优化后，项目整体稳定性和用户体验都有了明显提升。后续还可以继续完善图片压缩、识别加载动画、异常提示、历史识别记录等功能，让点单翻译系统更加完整、易用和可靠。