前言

在社交类小程序 / 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 && type=follow

核心接口（已优化可直接用）

1. 点赞 / 收藏我的列表
2. 评论我的列表
3. 关注 / 粉丝列表

后端统一返回结构：

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 永不错乱 ✅ 三大互动列表后端接口逻辑正确 ✅ 前端请求格式统一，不再出现空数据 ✅ 点赞 / 评论 / 关注列表正常显示