# 同趣U (InterestU) - 大学生兴趣社交平台

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
<!-- 可根据实际情况添加CI/CD等徽章 -->

**同趣U (InterestU)** 是一款专为在校大学生设计的移动社交应用，旨在帮助他们基于共同的兴趣爱好轻松发现伙伴、组织活动、拓展社交圈，让大学生活更加丰富多彩。

## 项目组成

本项目仓库包含以下主要部分：

*   **`tongqu_backend_v2/`**: Django后端服务项目。
*   **`tongqu_frontend/`**: Vue.js (使用Vite构建) 前端应用项目。
*   **`同趣U.html`**: (早期静态页面原型或笔记，可根据实际情况说明或移除)
*   *(未来可能还会有其他模块)*

## 后端项目 (`tongqu_backend_v2/`)

这是“同趣U”应用的后端服务部分，基于Django和Django REST framework构建。

### 项目背景 (后端)
为前端App提供稳定、高效、安全的接口支持，解决大学生在兴趣社交中遇到的信息不对称、平台错位、连接障碍、活动分散等痛点。

### 核心目标 (后端)
*   用户管理与认证 (JWT)
*   兴趣系统与匹配基础
*   小组/圈子系统与成员管理
*   小组内帖子/动态发布与管理
*   帖子评论功能
*   帖子点赞功能
*   基于兴趣的用户推荐
*   数据持久化 (PostgreSQL)
*   提供RESTful API

### 主要功能 (后端当前进度)

*   **用户系统 (v0.3):**
    *   自定义用户模型 (`CustomUser`) 和管理器 (`CustomUserManager`)。
    *   API: 注册, 登录, 刷新Token, 获取/更新用户资料 (含头像、兴趣)。
    *   **新增：** `Follow` 模型及关注/取消关注API (集成在 `UserViewSet` action)。
    *   **新增：** 用户列表API (`GET /accounts/users/`)。
*   **兴趣标签系统 (v0.1):**
    *   `InterestTag` 模型，用户与标签多对多关联。
    *   API: 列表/详情 (只读)。
*   **匹配与发现 (v0.1):**
    *   API: 获取与当前用户有共同兴趣的推荐用户列表。
*   **兴趣圈子/小组系统 (v0.2):**
    *   `Group`, `Membership` 模型。
    *   API: 创建小组, 列表/详情, 加入/退出小组, 我的小组列表。
*   **小组内帖子/动态功能 (v0.2):**
    *   `Post` 模型。
    *   API: 小组内创建/列表 (通过 `GroupViewSet` action), 独立CRUD及权限 (通过 `PostViewSet`)。
*   **评论功能 (v0.1):**
    *   `Comment` 模型。
    *   API: 帖子下创建/列表评论 (通过 `PostViewSet` action), 独立CRUD及权限 (通过 `CommentViewSet`)。
*   **帖子点赞功能 (v0.1):**
    *   `PostLike` 模型。
    *   API: 点赞/取消点赞 (通过 `PostViewSet` action)。
    *   `PostSerializer` 中包含点赞数和当前用户点赞状态。
*   **CORS配置** (`django-cors-headers`) 允许前端开发服务器访问。

### 技术栈 (后端)
*   Python 3.x, Django 5.2.x, Django REST framework
*   PostgreSQL, psycopg2-binary
*   JWT (djangorestframework-simplejwt), Pillow
*   (部署时: Gunicorn, Nginx)
*   Git

### 环境搭建与运行 (后端 `tongqu_backend_v2/`)
*(与之前README一致，确保路径和命令准确)*
...

---

## 前端项目 (`tongqu_frontend/`)

这是“同趣U”应用的Vue.js前端部分，使用Vite作为构建工具。

### 核心目标 (前端)
*   提供用户友好的界面与后端API交互。
*   实现用户注册、登录、浏览和发布内容等核心功能。
*   管理用户会话和状态。

### 主要功能 (前端当前进度 v0.1)

*   **项目初始化:** 使用Vite创建Vue.js项目。
*   **核心库集成:**
    *   `axios`: 用于发送HTTP API请求。
    *   `vue-router`: 用于实现单页面应用的客户端路由。
    *   `pinia`: 用于全局状态管理 (例如用户认证状态和信息)。
*   **API服务配置 (`services/api.js`):**
    *   创建集中的 `apiClient` (Axios实例) 并设置 `baseURL`。
    *   **请求拦截器:** 自动在需要认证的请求头中添加 `Authorization: Bearer <accessToken>`。
    *   **响应拦截器:** 实现了基本的自动刷新 `accessToken` (当收到401且有 `refreshToken` 时)。
*   **状态管理 (`store/auth.js`):**
    *   `useAuthStore` (Pinia store) 管理 `accessToken`, `refreshToken`, `currentUser`。
    *   Action: `login`, `logout`, `fetchUserProfile`, `register`, `tryAutoLogin` (应用加载时尝试恢复会话)。
    *   Token和用户信息存储在 `localStorage` 中。
*   **路由与导航守卫 (`router/index.js`):**
    *   配置了基础路由 (首页, 登录, 注册, 用户资料, 小组列表/创建/详情, 帖子详情, 用户列表/推荐等占位或已实现页面)。
    *   `beforeEach` 全局导航守卫：保护需要认证的路由，未登录则重定向到登录页。
    *   登录/注册页的 `beforeEnter` 守卫：已登录用户访问则重定向到首页。
*   **核心组件/视图:**
    *   `App.vue`: 应用根组件，包含主导航栏（根据登录状态动态显示）。
    *   `LoginView.vue`: 实现用户登录表单，调用 `authStore.login` action，处理成功/失败逻辑和页面跳转。
    *   `RegisterView.vue`: 实现用户注册表单（含头像可选上传），调用 `authStore.register` action，处理成功/失败逻辑和页面跳转。
    *   `UserProfileView.vue`:
        *   显示当前登录用户或指定ID用户的资料 (头像、昵称、学校、简介、兴趣标签)。
        *   允许当前登录用户编辑自己的资料 (文本字段、头像更换、兴趣标签选择) 并通过API更新。
        *   (已添加骨架，待后端API支持) 显示关注/取消关注按钮及关注者/正在关注数量。
    *   `GroupListView.vue`: 调用API获取并展示小组列表。
    *   `CreateGroupView.vue`: 调用API创建新小组。
    *   `GroupDetailView.vue`: 显示小组详情、帖子列表，允许加入/退出小组，允许成员发帖。
    *   `PostDetailView.vue`: 显示帖子详情、评论列表，允许点赞、评论，作者可编辑/删除。
    *   `RecommendationsView.vue` / `UserListView.vue`: 获取并展示用户列表/推荐用户。
*   **UI组件:**
    *   `SpinnerIcon.vue`: 可复用的加载中图标。
*   **加载状态提示:** 在主要的用户交互按钮（登录、注册、发帖、保存资料、点赞、加入/退出小组等）中集成了加载中状态（文本变化、按钮禁用、Spinner显示）。

### 技术栈 (前端)
*   Vue.js 3 (Composition API, `<script setup>`)
*   Vite (构建工具)
*   Vue Router (路由)
*   Pinia (状态管理)
*   Axios (HTTP客户端)
*   HTML, CSS, JavaScript

### 环境搭建与运行 (前端 `tongqu_frontend/`)

1.  **前提条件:**
    *   Node.js 16+ (包含npm)
2.  **进入前端项目目录:**
    ```bash
    cd tongqu_frontend 
    ```
    (如果你的Git仓库根是 `D:\new_projects`, 则路径是 `cd D:\new_projects\tongqu_frontend`)
3.  **安装依赖:**
    ```bash
    npm install 
    # 或者 yarn install
    ```
4.  **运行开发服务器:**
    ```bash
    npm run dev
    # 或者 yarn dev
    ```
    通常服务会在 `http://localhost:5173/` 启动。

## 如何贡献
*(保持不变或根据需要修改)*
...

## 许可证
本项目采用 [MIT许可证](LICENSE.md)。