小程序从本地存储迁移到服务端，全程记录，都是干货！！

📅 2026/6/30 22:50:29 👁️ 次浏览

我的小程序从本地存储迁到服务端全程记录几个月前我做了个小程序叫「一纸云深」一个记录每日心情的情绪治愈工具。一开始图省事所有数据都存在微信小程序的本地缓存里。用户用了一段时间后问题来了❌换个设备记录全丢——用户换了手机过去的日记全没了❌手机和 iPad 不能共用——数据被隔离在两个设备上❌删了重装回到解放前——本地存储经不起任何卸载操作于是我决定把它改成服务端版。这篇文章记录下整个迁移过程。️ 改造方案只动数据层不动界面最理想的方案是最小改动——数据层从 localStorage 换到服务器 API界面不动。改造范围只有三块后端——新建 Spring Boot 项目建表、写 CRUD 接口前端——把读取 localStorage 的地方换成调后端 API登录——加上微信静默登录关联用户表结构设计小程序的核心数据是「日记」两张表就够了CREATETABLEt_user(idBIGINTAUTO_INCREMENTPRIMARYKEY,openidVARCHAR(64)NOTNULLUNIQUE,create_timeDATETIMEDEFAULTCURRENT_TIMESTAMP);CREATETABLEt_diary(idBIGINTAUTO_INCREMENTPRIMARYKEY,user_idBIGINTNOTNULL,dateVARCHAR(10)NOTNULL,timeVARCHAR(5)NOTNULL,mood_typeINTNOTNULL,contentVARCHAR(200)DEFAULT,create_timeDATETIMEDEFAULTCURRENT_TIMESTAMP,INDEXidx_user_date(user_id,date)); 每条日记关联用户通过 openid 来识别是谁写的。接口设计只做最基础的 5 个接口接口方法说明/api/mini/loginPOST接收 code返回 JWT token/api/mini/diary/listGET获取当前用户的日记列表/api/mini/diary/savePOST保存一条日记每日上限 5 条/api/mini/diary/updatePUT更新日记内容/api/mini/diary/deleteDELETE删除一条日记前端改造统一 API 封装原来读取日记的代码是这样的// 改造前读 localStoragefunctionloadDiaries(){constdatauni.getStorageSync(yizhi_diary)returndata?JSON.parse(data):[]}改成调后端 API// 改造后调后端 APIexportasyncfunctiongetDiaries(){constresawaitrequest(GET,/diary/list)returnres.data||[]}每个页面记录页、分析页、日历页、我的页都做了同样的替换。改动量不大但需要细心一个页面漏了就会显示空数据。统一返回结构之前图省事直接用Map.of()返回 JSON结果发现Map.of()不允许 null 值遇到空数据直接抛 NPE。改成一个统一的 ApiResult 类DatapublicclassApiResultT{privateintcode;privateStringmessage;privateTdata;publicstaticTApiResultTsuccess(Tdata){returnnewApiResult(200,success,data);}}所有接口统一返回{code, message, data}格式前端处理起来也统一。⏰ 关于 onShow 的一个小坑微信小程序的页面生命周期和 Vue 不太一样。如果用了onMounted从其他 Tab 切回来时不会重新触发。// 从其他页面回来不会刷新onMounted(async(){awaitloadData()})// 每次显示页面都会刷新onShow(async(){awaitloadData()})⚠️这个坑藏得挺深——所有页面都改完了才发现首页数据一直是缓存切换 Tab 回来还是旧数据。部署与上线前后端开发完成后按以下步骤上线后端打包——mvn clean package -DskipTests上传到服务器——scp jar 到服务器nohup java -jar启动前端生产构建——npm run build:mp-weixin上传体验版——在微信开发者工具上传配置白名单——微信公众平台 → 开发管理 → 服务器域名✅ 总结这次迁移花了大概两天时间几点经验核心要点✅先确认方案再动手——花一小时写设计文档明确改造范围✅接口返回用统一对象——别用Map.of()null 值处理是定时炸弹✅页面数据用 onShow——小程序 Tab 切换不会重新触发 onMounted✅微信登录在 dev 环境要 mock——本地调不通微信接口加个测试 openid如果这篇文章对你有帮助欢迎点赞收藏最后安利一下我的小程序「一纸云深」——一个温暖的情绪治愈小工具微信搜索就能体验。关于作者无羡独立开发者专注AI应用开发。分类全栈开发关注我获取更多技术分享个人博客云深不知处独立开发省钱攻略查看详情体验我的AI产品一纸云深如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是我持续创作的动力点击「阅读原文」查看我的独立开发笔记点击查看我的个人介绍点击查看我的小红书主页

相关新闻