第一篇：uniapp+Django 互动功能全流程（登录缓存→点赞 / 收藏 / 评论列表显示）

前言在社交类小程序 / APP 中点赞、收藏、关注、评论是最核心的互动模块。很多同学开发时会遇到登录后 ID 错乱、列表不显示、数据为空、跳转失效等问题。本篇从「缓存修复→接口对接→页面显示」一步步实现保证可直接落地。一、修复登录缓存从根源解决 user_id 错乱问题场景登录明明是 92页面拿到却是 1/93 / 空点赞 / 评论接口永远查不到数据清除缓存才正常一刷新又错解决方案登录页强制写入缓存打开login.vue登录成功后必须加这一行javascript运行// 登录成功 if (result.code 200) { uni.showToast({ title: 登录成功, icon: success }); // 全局状态 this.$global.setUserId(result.user_id); // ✅ 强制写入本地缓存所有页面共用 uni.setStorageSync(user_id, result.user_id); setTimeout(() { uni.reLaunch({ url: /pages/blog/blog_home }); }, 1500); }验证方法任意页面执行javascript运行console.log(uni.getStorageSync(user_id)) // 永远输出当前登录ID不再错乱二、统一后端接口规范Django互动逻辑统一规则点赞 / 收藏 / 评论我查询to_user_id 当前登录ID我关注的人查询from_user_id 当前登录ID粉丝查询to_user_id 当前登录ID typefollow核心接口已优化可直接用点赞 / 收藏我的列表评论我的列表关注 / 粉丝列表后端统一返回结构json{ code: 200, message: success, data: [ { user_id: 31, username: user_1, avatar: https://xxx.png, content: 评论内容 // 评论独有 } ] }三、三大互动页面从无到完美显示1. 点赞列表页面 like_detail.vue功能显示谁点赞 / 收藏了我正确读取缓存user_id请求格式统一 JSON无数据友好提示加载状态防抖动javascript运行async initLikeData() { this.loading true try { const currentUserId uni.getStorageSync(user_id) const res await uni.request({ url: http://localhost:8000/interaction/getLikeList, method: POST, header: { Content-Type: application/json }, data: JSON.stringify({ user_id: currentUserId }) }) if (res.data.code 200) { this.list res.data.data || [] } } finally { this.loading false } }2. 评论列表页面 comment_detail.vue功能显示谁评论了我的博客展示用户名、头像、评论内容内容为空自动兜底请求格式与点赞保持一致javascript运行async initCommentData() { this.loading true try { const currentUserId uni.getStorageSync(user_id) const res await uni.request({ url: http://localhost:8000/interaction/getCommentList, method: POST, header: { Content-Type: application/json }, data: JSON.stringify({ user_id: currentUserId }) }) if (res.data.code 200) { this.list res.data.data || [] } } finally { this.loading false } }3. 关注 / 粉丝页面 follow_detail.vue功能显示我的粉丝、我关注的人列表样式统一空状态提示加载动画保持全局一致四、本篇总结本篇完成 ✅ 登录缓存彻底修复user_id 永不错乱 ✅ 三大互动列表后端接口逻辑正确 ✅ 前端请求格式统一不再出现空数据 ✅ 点赞 / 评论 / 关注列表正常显示