前言

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