Docs: Update README with frontend login, Pinia, Axios interceptors, and core views progress

README.md

@@ -10,144 +10,145 @@
 本项目仓库包含以下主要部分：
 
 *   **`tongqu_backend_v2/`**: Django后端服务项目。
-*   **`同趣U.html`**: (早期的静态页面原型)
-
+*   **`tongqu_frontend/`**: Vue.js (使用Vite构建) 前端应用项目。
+*   **`同趣U.html`**: (早期静态页面原型或笔记，可根据实际情况说明或移除)
+*   *(未来可能还会有其他模块)*
 
 ## 后端项目 (`tongqu_backend_v2/`)
 
 这是“同趣U”应用的后端服务部分，基于Django和Django REST framework构建。
 
 ### 项目背景 (后端)
-
 为前端App提供稳定、高效、安全的接口支持，解决大学生在兴趣社交中遇到的信息不对称、平台错位、连接障碍、活动分散等痛点。
 
 ### 核心目标 (后端)
-
-*   **用户管理与认证：** 提供安全可靠的用户注册、登录、资料管理、JWT认证等功能。
-*   **兴趣系统：** 允许用户定义和关联兴趣标签，为匹配提供基础。
-*   **小组/圈子系统：** 支持用户创建、加入、管理兴趣小组，并在组内互动。
-*   **内容发布：** 允许用户在小组内发布帖子/动态。
-*   **匹配与发现：** 基于兴趣等因素推荐用户。
-*   **数据持久化：** 使用PostgreSQL数据库。
-*   **API接口：** 提供清晰、规范的RESTful API供前端App调用。
-
-### 主要功能 (当前进度)
-
-*   **用户系统 (v0.2):**
-    *   自定义用户模型 (`CustomUser`)，包含邮箱、手机号、昵称、头像、简介、学校等。
-    *   使用 `CustomUserManager` 处理用户创建。
-    *   **API (DRF + SimpleJWT):**
-        *   用户注册 (含头像上传，返回JWT)。
-        *   用户登录 (邮箱+密码，返回JWT Access/Refresh Token)。
-        *   刷新Access Token。
-        *   获取/更新当前登录用户个人资料 (需认证，支持头像和兴趣标签更新)。
+*   用户管理与认证 (JWT)
+*   兴趣系统与匹配基础
+*   小组/圈子系统与成员管理
+*   小组内帖子/动态发布与管理
+*   帖子评论功能
+*   帖子点赞功能
+*   基于兴趣的用户推荐
+*   数据持久化 (PostgreSQL)
+*   提供RESTful API
+
+### 主要功能 (后端当前进度)
+
+*   **用户系统 (v0.3):**
+    *   自定义用户模型 (`CustomUser`) 和管理器 (`CustomUserManager`)。
+    *   API: 注册, 登录, 刷新Token, 获取/更新用户资料 (含头像、兴趣)。
+    *   **新增：** `Follow` 模型及关注/取消关注API (集成在 `UserViewSet` action)。
+    *   **新增：** 用户列表API (`GET /accounts/users/`)。
 *   **兴趣标签系统 (v0.1):**
-    *   `InterestTag` 模型。
-    *   `CustomUser` 与 `InterestTag` 多对多关联。
-    *   Admin后台管理兴趣标签。
-    *   **API:**
-        *   获取兴趣标签列表 (只读)。
-        *   获取单个兴趣标签详情 (只读)。
-*   **匹配与发现 (v0.1 - 初步):**
-    *   **API:**
-        *   获取与当前登录用户有共同兴趣的推荐用户列表 (需认证，显示共同兴趣标签)。
+    *   `InterestTag` 模型，用户与标签多对多关联。
+    *   API: 列表/详情 (只读)。
+*   **匹配与发现 (v0.1):**
+    *   API: 获取与当前用户有共同兴趣的推荐用户列表。
 *   **兴趣圈子/小组系统 (v0.2):**
-    *   `Group` 模型 (名称、描述、封面、创建者、兴趣标签等)。
-    *   `Membership` (中间) 模型管理用户与小组的多对多关系 (含加入时间)。
-    *   Admin后台管理小组和成员关系。
-    *   **API:**
-        *   创建小组 (需认证，创建者自动成为成员并可关联兴趣标签，支持封面上传)。
-        *   获取小组列表 (公开可读)。
-        *   获取单个小组详情 (公开可读)。
-        *   用户加入小组 (需认证)。
-        *   用户退出小组 (需认证)。
-        *   获取当前用户加入的小组列表 (需认证)。
-*   **小组内帖子/动态功能 (v0.1):**
-    *   `Post` 模型 (关联小组、作者，含标题、内容)。
-    *   Admin后台管理帖子。
-    *   **API (集成在GroupViewSet及独立的PostViewSet中):**
-        *   在指定小组内创建帖子 (`POST /api/v1/groups/<group_pk>/create-post/`，需认证，作者自动设置为当前用户)。
-        *   获取指定小组内的帖子列表 (`GET /api/v1/groups/<group_pk>/posts/`，需认证)。
-        *   获取所有帖子列表 (`GET /api/v1/posts/`，需认证)。
-        *   获取单个帖子详情 (`GET /api/v1/posts/<post_pk>/`，需认证)。
-        *   更新自己的帖子 (`PUT/PATCH /api/v1/posts/<post_pk>/`，需认证且为作者)。
-        *   删除自己的帖子 (`DELETE /api/v1/posts/<post_pk>/`，需认证且为作者)。
-        *   通过 `/api/v1/posts/` 路径创建帖子的权限已限制为管理员，并提示使用小组接口。
+    *   `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
-*   **认证:** JWT (JSON Web Tokens) via djangorestframework-simplejwt
-*   **图片处理:** Pillow
-*   **Web服务器 (部署时):** Gunicorn (或 uWSGI)
-*   **反向代理 (部署时):** Nginx
-*   **版本控制:** Git
-
-### 环境搭建与运行 (后端 `tongqu_backend_v2/` 目录内)
+*   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.  **前提条件:**
-    *   Python 3.8+
-    *   PostgreSQL 12+
-    *   Git
-2.  **克隆仓库 (如果从远程开始):**
-    ```bash
-    # 如果将 D:\new_projects 作为仓库根，则克隆整个项目
-    git clone http://git.fmode.cn:3000/0225015/tongquU.git
-    cd tongquU/tongqu_backend_v2 # 进入后端项目目录
-    ```
-3.  **创建并激活Python虚拟环境:**
-    ```bash
-    python -m venv venv
-    # Windows PowerShell:
-    .\venv\Scripts\Activate.ps1
-    # Linux/macOS:
-    # source venv/bin/activate
-    ```
-4.  **安装依赖:**
+    *   Node.js 16+ (包含npm)
+2.  **进入前端项目目录:**
     ```bash
-    pip install -r requirements.txt
+    cd tongqu_frontend 
     ```
-5.  **配置数据库:**
-    *   确保PostgreSQL服务正在运行。
-    *   在PostgreSQL中创建一个数据库 (例如 `tongqu_v2_db`)。
-    *   修改 `tongqu_backend_v2/config/settings.py` 文件，配置 `DATABASES` 部分。
-6.  **进行数据库迁移:**
+    (如果你的Git仓库根是 `D:\new_projects`, 则路径是 `cd D:\new_projects\tongqu_frontend`)
+3.  **安装依赖:**
     ```bash
-    python manage.py makemigrations
-    python manage.py migrate
+    npm install 
+    # 或者 yarn install
     ```
-7.  **创建超级用户:**
+4.  **运行开发服务器:**
     ```bash
-    python manage.py createsuperuser
+    npm run dev
+    # 或者 yarn dev
     ```
-8.  **运行开发服务器:**
-    ```bash
-    python manage.py runserver
-    ```
-    服务将在 `http://127.0.0.1:8000/` 启动。
-
-### API 端点前缀 (后端)
-
-*   所有用户账户相关API: `/api/v1/accounts/`
-*   所有小组相关API: `/api/v1/groups/`
-*   所有帖子直接操作API: `/api/v1/posts/`
-*   (兴趣标签API通过 `/api/v1/accounts/tags/` 访问)
-
-*(更详细的API文档后续会通过Swagger/OpenAPI提供)*
+    通常服务会在 `http://localhost:5173/` 启动。
 
 ## 如何贡献
-
-*(保持你之前的贡献说明即可，或者根据需要修改)*
-我们欢迎各种形式的贡献！如果您对本项目感兴趣，可以通过以下方式参与：
-1.  **Fork** 本仓库 (如果项目公开)
-2.  创建您的特性分支 (`git checkout -b feature/AmazingFeature`)
-3.  提交您的更改 (`git commit -m 'Add some AmazingFeature'`)
-4.  将您的更改推送到分支 (`git push origin feature/AmazingFeature`)
-5.  开启一个 **Pull Request**
-
-请确保您的代码遵循项目的编码规范，并添加必要的测试。
+*(保持不变或根据需要修改)*
+...
 
 ## 许可证
-
 本项目采用 [MIT许可证](LICENSE.md)。