当前位置：首页 > news >正文

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

news 2026/6/1 1:16:17

前言

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

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

点赞 / 收藏我的列表
评论我的列表
关注 / 粉丝列表

后端统一返回结构：

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 } }