立项背景和目标:传统社区治理中,居民服务触达困难、活动组织靠线下通知效率低、诉求反馈渠道分散且无跟踪机制。本项目面向小区居民、社区工作者、社工运营人员和物业人员,通过微信小程序 + 管理后台构建轻量级社区数字化服务平台,目标是以最低使用门槛打通"身份认证—信息通知—活动报名—工单流转"的全链路闭环,降低社区运营沟通成本,提升基层治理响应效率。
核心功能模块:居民端小程序覆盖微信授权登录、小区房号认证、社区通知浏览、活动列表筛选与报名/取消/扫码签到、诉求工单提交(含图片上传)与进度跟踪、消息中心、个人中心(我的报名/我的工单/认证状态);管理后台覆盖工作台数据概览、居民认证审核(通过/驳回/撤销)、通知发布与审核、活动创建/审批/签到管理、工单分派/转派/处理/强制关闭、三角色权限隔离(社区管理员/社工运营/物业人员)、运营数据统计与导出、操作日志审计。
业务流程:居民通过微信授权进入小程序 → 绑定手机号并选择小区房号提交认证 → 社区管理员后台审核通过 → 居民可浏览通知、报名活动(含现场扫码签到)、提交诉求工单 → 工单按类型自动路由至对应角色(物业类→物业人员,治理类→社区管理员,服务类→社工运营)→ 处理完成后居民确认并评价 → 管理方通过后台统计查看运营数据。
整体架构:采用前后端分离架构。居民端为微信小程序原生开发(TypeScript + WXML + WXSS),通过分包加载优化首屏性能;管理后台为 Vue3 + TypeScript + Vite + Element Plus 单页应用;后端为 Spring Boot 3.4 + JPA + MySQL 8.0 + Redis,RESTful API 统一返回 {data, ok} 结构,前端通过 Axios Interceptor 统一处理全局 Loading 与错误拦截。
我的职责与成果:我作为前端负责人,从零搭建居民端小程序与 Vue3 管理后台两大终端,独立完成全部前端开发工作。具体包括:① 小程序端封装接口请求层与本地缓存逻辑,串联登录→认证→活动报名/签到→工单提交/评价→消息已读等 6 条核心业务流程;② 后台端完成工作台、认证审核、通知管理、活动管理、工单管理、角色权限、操作日志共 7 个功能模块;③ 通过动态路由 + 角色鉴权实现三角色菜单与操作入口隔离;④ 性能优化方面,小程序分包体积控制在 2MB 以内,后台路由懒加载使首屏加载时间降低约 40%。
难点与解决方案:① 活动名额并发控制:报名/取消报名场景下,前端通过接口返回的实时名额数做乐观更新,后端在数据库层面加行锁保证不超报,前端对接口返回的状态码做二次校验并 toast 提示,避免了名额超卖问题。② 认证状态机流转:居民认证涉及未登录→已登录未认证→认证中→已认证→认证失败→已停用 6 种状态,前端封装统一的状态枚举与 UI 映射,在路由守卫中根据 authStatus 控制页面可见性与操作权限,避免散落的状态判断逻辑。③ 工单多角色分派:工单按类型(物业/治理/服务)自动路由至不同角色,后台通过数据范围过滤确保各角色只看到属于自己的工单,前端在列表页用 Tab 切换 + 服务端分页处理不同状态视图,保证大数据量下的渲染性能。