租房小程序的项目总结

给我卷
255 阅读3分钟

项目负责部分的功能介绍：我负责的是开发新增房源功能，包括房屋基本信息录入和户型信息填写两大核心模块，实现了从表单填写到数据提交的完整流程。

一、功能实现

  1. 房屋基本信息录入

    • 表单设计：

      • 使用uView UI框架构建表单，包含地址、房屋类型、楼层、押金方式等必填字段。
      • 通过u-form和u-form-item组件实现表单验证，确保数据完整性。

image.png

  1. 动态数据绑定：

    • 调用getDict方法从后端获取字典数据（如房屋类型、押金方式），通过v-for动态渲染下拉选项。
    • 使用计算属性（如selectedHouseTypeText）实时显示用户选择的文本。

  2. 户型信息管理

    • 多户型支持：

      • 用户可添加多个户型，每个户型包含面积、价格、布局等信息。
      • 通过数组houseTypeList管理户型数据，支持动态增删（addHouseType/deleteHouseType）。

    • 图片上传：

      • 集成七牛云SDK，封装uploadFile方法实现图片/视频上传，返回URL后绑定到表单数据。
      • 支持多图上传（每个户型最多3张图片），提供删除功能（deleteImage）。

  3. 数据传递与提交

    • 跨页面数据传递：

      • 使用uni.setStorageSync暂存第一页表单数据，跳转至第二页后合并提交。

    • 数据校验：

      • 提交前验证必填字段、设施选择状态及图片数量，通过$refs.uForm.validate确保数据合法。

二、技术点与解决方案

  1. 关键技术应用

    （1）七牛云文件上传：

  • 首先需要安装七牛云的JavaScript SDK

image.png

  • 创建七牛云上传工具类，在 utils 目录下创建 qiniu-upload.js 文件。主要就是为了统一一下上传接口，需要上传时调用这个方法就好了。这个方法处理逻辑为由前端调用该方法获取请求上传凭证，后端会生成一个临时的token给到七牛云存储，并且返回token和 domain给到前端，然后前端就会将这个文件带上token的信息一起发送到七牛云中，七牛云便会返回对应该文件的URL给到前端。前端便可以通过这个URL展示该文件。处理逻辑如下：

image.png

  • 通过getFileFromPath方法统一处理不同平台的本地文件对象。

image.png

  • 在 qiniu-upload.js 文件中会编写一个upload的方法，让前端进行调用

（2）照片上传

  • 当用户点击上传图片按钮后，会调取chooseContactImage方法跳转到相册进行选择。代码如下：

image.png

  • 在上传图片时，会调取后端上传该图片的接口，定义获取该接口的方法。代码如下：

image.png

  • 调用该upload方法，将用户选择的图片赋值给formData

（3）获取字典数据

  • 先定义了一个通过 HTTP 请求获取字典数据的方法，这个方法中采用get请求去获取数据，接口中采用了动态路径参数的方法，这样可以获取到不同数据的字典。

image.png

  • 定义了这个getDict方法后再通过调用这个方法，传递对应需要的字典的参数house_type来进行获取对应的字典数据，将这个字典数据赋值给一个房屋类型的数组houseTypeList

image.png

  • 通过:list数组绑定，就可以展示房屋类型的数据给用户选择了。

image.png

image.png

  • 当用户点击了其中一个房屋类型，便会调用handPickerClick的方法，将选中的数据同步到最后要存储在本地的数组，即存储在本地后通过合并第二页数据一起传给后端的那个数组。

image.png

  • 当选择完成后，展示前会判断两个数据是否一致，一致才会展示

image.png

（4）动态表单验证：

  • 自定义验证规则（如校验楼层为整数、图片必传），结合uView的表单校验机制提升用户体验。

（5）响应式布局：

  • 使用scroll-view动态计算高度，适配不同屏幕尺寸；通过uni.upx2px实现rpx与px的转换。

  1. 难点与解决

    • 多户型数据管理：

      • 问题：新增/删除户型时需确保数据同步且不丢失。
      • 方案：使用Vue.set动态更新数组，结合$nextTick确保DOM渲染后滚动到最新条目。

    • 跨平台文件处理：

      • 问题：H5/小程序/APP获取文件对象的API差异大。
      • 方案：通过条件编译（#ifdef）区分平台逻辑，统一返回File对象或临时路径。

三、代码规范与优化

  1. 模块化设计

    • 将字典获取、文件上传等逻辑封装为独立方法（如getHouseLayoutDict、uploadFile），提升复用性。

  2. 性能优化

    • 图片上传采用压缩选项（sizeType: ['compressed']），减少流量消耗。
    • 使用uni.$u.debounce限制高频操作（如连续点击提交）。

  3. Git提交规范

    • 遵循feature/fix/perf前缀提交，例如：

      git commit -m "feat: 新增户型图片上传功能"
git commit -m "fix: 修复房屋类型选择无效的问题"

四、项目成果

  • 功能完善：完成房源新增全流程，支持多户型、多图上传，覆盖房东核心需求。

  • 用户体验：

    • 通过本地存储减少页面跳转数据丢失，表单校验提示清晰。
    • 设施选择采用直观的图标切换（toggleFacility），提升操作效率。

  • 代码质量：模块化设计、严格校验和详细注释，便于后续维护扩展。

技术栈：Vue.js + uView UI + 七牛云SDK + UniApp（多端兼容） + RESTful API。

五、个人成长

  1. 技能提升：

    • 掌握了七牛云文件上传的完整流程及多平台适配技巧。
    • 深入理解了动态表单验证和复杂状态管理的实现方式。

  2. 协作意识：

    • 通过Git规范提交和模块化设计，增强团队协作效率。

总结：该项目不仅巩固了我的前端技术能力，更让我认识到模块化设计和用户体验细节的重要性，为后续复杂功能开发奠定了基础。

avatar
文章
阅读
粉丝