阶段4前端页面测试与优化发布时间2026-04-20分类前端开发标签uni-app、Vue2、前端测试、bug修复引言在花园博客小程序的开发过程中前端页面的测试和优化是确保用户体验的关键环节。阶段4的任务是对写博客功能的前端页面进行全面测试发现并修复存在的bug优化页面布局和交互体验。这是一个从测试到优化的完整过程也是对前端开发质量的一次全面检验。主要任务清单如下测试写博客页面的基本功能修复底部按钮被导航栏遮挡的bug完善发布博客功能测试前端与后端的交互优化页面布局和用户体验技术选型核心技术栈前端框架uni-app (Vue2)开发工具HBuilderXAPI请求uni.request状态管理组件级状态管理UI组件uni-app内置组件后端框架Django 5.1.7开发过程1. 页面布局优化存在问题当前写博客页面底部按钮被导航栏遮挡导致用户无法点击发布按钮。实现内容解决写博客页面底部按钮被导航栏遮挡的问题调整按钮位置确保其在底部导航栏上方显示。通过CSS样式调整为按钮预留足够的空间同时保留原有的底部导航栏。核心代码/* 底部按钮 */.fixed-btn{position:fixed;left:0;bottom:60px;/* 调整bottom值位于底部导航栏上方 */width:100%;padding:20rpx 30rpx;background-color:#fff;box-shadow:0 -2rpx 10rpxrgba(0,0,0,0.05);box-sizing:border-box;z-index:999;/* 提高z-index确保不被其他元素遮挡 */transform:translateZ(0);/* 启用硬件加速确保层级正确 */}配置确认{pagePath:pages/write/write_blog,text:写博客,iconPath:static/write.png,selectedIconPath:static/write_active.png}2. 发布博客功能完善存在问题由于上周未完成与其他模块的交互导致发布博客后博客内容无法在我的页面查看用户找不到自己发布的博客。实现内容完善发布博客功能实现从前端到后端的完整交互流程。添加后端API接口实现博客内容和图片的保存发布成功后自动跳转到我的页面查看发布的博客。后端API实现method_decorator(csrf_exempt,namedispatch)classBlogPublishView(View):发布博客接口defpost(self,request):try:# 解析请求数据datajson.loads(request.body)titledata.get(title,)contentdata.get(content,)imagesdata.get(images,[])# 模拟当前用户ID实际项目中应该从认证系统获取host_id1ifnottitleornotcontent:returnJsonResponse({code:400,message:标题和正文不能为空,data:None})# 创建博客记录blogBlog.objects.create(topictitle,contentcontent,host_idhost_id,like0,collect0,tag花园)# 保存博客图片forimageinimages:ifimage.get(url):BlogImage.objects.create(image_urlimage[url],blog_idblog.blog_id)# 返回发布成功的响应returnJsonResponse({code:200,message:发布成功,data:{id:blog.blog_id,title:blog.topic,content:blog.content}})exceptExceptionase:returnJsonResponse({code:500,message:f发布失败:{str(e)},data:None})前端实现// 发布博客publishBlog(){if(this.isGenerating)return;if(!this.blogContent.title){uni.showToast({title:请输入标题,icon:none});return;}if(!this.blogContent.content){uni.showToast({title:请输入正文,icon:none});return;}// 显示加载状态this.isGeneratingtrue;// 发送发布请求uni.request({url:http://127.0.0.1:8000/api/blog/publish,method:POST,data:{title:this.blogContent.title,content:this.blogContent.content,images:this.fileList},success:(res){if(res.statusCode200res.data.code200){uni.showToast({title:发布成功,icon:success});this.isGeneratedfalse;// 跳转到我的页面查看发布的博客uni.switchTab({url:/pages/home_page/personal_center});}else{uni.showToast({title:res.data.message||发布失败,icon:none});}},fail:(err){uni.showToast({title:网络错误或请求超时,icon:none});},complete:(){this.isGeneratingfalse;}});}3. 路由配置实现内容在后端添加发布博客的路由配置确保前端能够正确调用API接口。核心代码fromdjango.urlsimportpathfrom.importviews urlpatterns[path(list,views.BlogListView.as_view(),nameblog_list),path(detail/int:id,views.BlogDetailView.as_view(),nameblog_detail),path(search,views.BlogSearchView.as_view(),nameblog_search),path(follow-list,views.BlogFollowListView.as_view(),nameblog_follow_list),path(int:id/comments,views.BlogCommentView.as_view(),nameblog_comments),path(int:id/follow,views.BlogFollowView.as_view(),nameblog_follow),path(generate,views.BlogGenerateView.as_view(),nameblog_generate),path(publish,views.BlogPublishView.as_view(),nameblog_publish),]开发过程中遇到的问题1. 底部按钮被导航栏遮挡问题写博客页面的底部开始生成按钮位置偏下被底部导航栏遮挡导致用户无法正常点击。原因分析底部按钮使用了position: fixed定位但bottom值设置过小导致按钮与底部导航栏重叠导航栏高度约为60px需要为按钮预留足够的空间解决方案调整底部按钮的bottom值为60px确保其位于导航栏上方提高按钮的z-index值确保不被其他元素遮挡启用硬件加速确保层级正确修复代码.fixed-btn{position:fixed;left:0;bottom:60px;/* 调整bottom值位于底部导航栏上方 */width:100%;padding:20rpx 30rpx;background-color:#fff;box-shadow:0 -2rpx 10rpxrgba(0,0,0,0.05);box-sizing:border-box;z-index:999;/* 提高z-index确保不被其他元素遮挡 */transform:translateZ(0);/* 启用硬件加速确保层级正确 */}2. 发布功能未实现问题点击发布博客按钮后只是显示了成功提示但没有将博客内容保存到数据库。原因分析前端缺少与后端的API交互后端缺少发布博客的API接口缺少数据持久化逻辑解决方案在后端添加BlogPublishView类实现发布博客的API接口在前端修改publishBlog方法添加API调用逻辑实现发布成功后跳转到我的页面的功能修复代码// 发送发布请求uni.request({url:http://127.0.0.1:8000/api/blog/publish,method:POST,data:{title:this.blogContent.title,content:this.blogContent.content,images:this.fileList},success:(res){if(res.statusCode200res.data.code200){uni.showToast({title:发布成功,icon:success});this.isGeneratedfalse;// 跳转到我的页面查看发布的博客uni.switchTab({url:/pages/home_page/personal_center});}else{uni.showToast({title:res.data.message||发布失败,icon:none});}},fail:(err){uni.showToast({title:网络错误或请求超时,icon:none});},complete:(){this.isGeneratingfalse;}});测试与验证功能测试对写博客页面进行了全面测试包括页面布局测试按钮位置是否正确不被导航栏遮挡图片上传测试从相册选择和拍照两种方式日期选择测试为每张图片添加拍摄日期风格选择测试切换不同的生成风格内容生成测试AI生成博客内容内容编辑测试编辑生成的内容发布功能测试发布博客并跳转到我的页面验证结果所有功能均通过测试页面响应流畅用户体验良好。发布的博客成功显示在我的页面中实现了完整的功能流程。性能优化在测试和优化过程中采取了以下性能优化措施布局优化调整底部按钮位置确保在不同设备上都能正常显示加载状态添加加载动画提升用户体验错误处理完善错误处理逻辑确保页面不会因错误而崩溃网络请求添加请求超时处理提高应用的稳定性硬件加速启用硬件加速提升页面渲染性能心得体会技术层面布局问题的解决通过调整CSS样式解决了底部按钮被导航栏遮挡的问题学习了如何处理固定定位元素与导航栏的关系。前后端协作实现了前端与后端的完整交互流程理解了API设计和调用的重要性。功能测试通过全面的测试发现并修复了潜在的问题确保了功能的稳定性。开发感悟细节的重要性前端开发中细节决定成败。一个小小的按钮位置调整可能会对用户体验产生显著的影响。测试的价值通过系统的测试可以及时发现和修复问题确保功能的质量。问题解决能力遇到问题时要通过分析和调试找到问题的根本原因而不是盲目修改代码。用户体验优先在开发过程中始终要以用户体验为中心关注用户的操作流程和感受。技术收获前端布局技能掌握了如何处理固定定位元素与导航栏的关系提高了布局能力。API开发经验学习了如何设计和实现后端API接口实现前后端的交互。测试方法学会了如何系统地测试前端功能确保功能的稳定性和用户体验。问题解决能力通过解决实际问题提高了分析和解决问题的能力。结语本阶段的主要任务是测试前端页面并进行优化从发现问题到解决问题的过程让我对前端开发有了更深刻的理解。在测试阶段我首先对写博客页面的各项功能进行了全面测试发现了底部按钮被导航栏遮挡的问题。通过分析CSS样式我找到了问题的根本原因并通过调整bottom值和z-index值成功解决了这个问题。在功能完善阶段我实现了发布博客的完整功能。通过在后端添加API接口在前端添加API调用逻辑实现了从前端到后端的完整数据流转。发布成功后系统会自动跳转到我的页面让用户可以立即查看自己发布的博客。在整个过程中我深刻体会到了测试的重要性。通过全面的测试不仅可以发现和修复问题还可以优化用户体验提高应用的质量。同时我也认识到了前后端协作的重要性只有前端和后端紧密配合才能实现完整的功能流程。作为一名大学生这次项目经历让我获得了宝贵的实践经验。我不仅学习了前端布局和API开发的技术还提高了问题解决能力和测试意识。未来我将继续深入学习前端技术关注行业发展趋势努力提升自己的专业能力。这次开发经历让我明白前端开发不仅仅是编写代码更是一种综合能力的体现。它需要我们具备良好的设计思维、扎实的技术基础、严谨的测试习惯和灵活的问题解决能力。只有不断学习和实践才能成为一名优秀的前端开发者。