我的小程序从本地存储迁到服务端，全程记录
几个月前我做了个小程序叫「一纸云深」，一个记录每日心情的情绪治愈工具。一开始图省事，所有数据都存在微信小程序的本地缓存里。
用户用了一段时间后，问题来了：
❌换个设备，记录全丢——用户换了手机，过去的日记全没了
❌手机和 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/login | POST | 接收 code，返回 JWT token |
/api/mini/diary/list | GET | 获取当前用户的日记列表 |
/api/mini/diary/save | POST | 保存一条日记（每日上限 5 条） |
/api/mini/diary/update | PUT | 更新日记内容 |
/api/mini/diary/delete | DELETE | 删除一条日记 |
🔄 前端改造：统一 API 封装
原来读取日记的代码是这样的：
// 🔴 改造前：读 localStoragefunctionloadDiaries(){constdata=uni.getStorageSync('yizhi_diary')returndata?JSON.parse(data):[]}改成调后端 API：
// 🟢 改造后：调后端 APIexportasyncfunctiongetDiaries(){constres=awaitrequest('GET','/diary/list')returnres.data||[]}每个页面（记录页、分析页、日历页、我的页）都做了同样的替换。改动量不大，但需要细心，一个页面漏了就会显示空数据。
📦 统一返回结构
之前图省事直接用Map.of()返回 JSON，结果发现Map.of()不允许 null 值，遇到空数据直接抛 NPE。
改成一个统一的 ApiResult 类：
@DatapublicclassApiResult<T>{privateintcode;privateStringmessage;privateTdata;publicstatic<T>ApiResult<T>success(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产品：一纸云深
如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是我持续创作的动力！
点击「阅读原文」查看我的独立开发笔记
👉 点击查看我的个人介绍
👉 点击查看我的小红书主页
