# vue3前端页面

**Repository Path**: independence-and-autonomy/vue3-front-end-page

## Basic Information

- **Project Name**: vue3前端页面
- **Description**: 基于 Vue 3 + TypeScript + Vite 构建的现代化用户认证系统。这是一个功能完整的前端应用，提供了用户注册、登录、权限管理等核心功能，并采用 JWT（JSON Web Token）技术实现安全的身份验证机制。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-12
- **Last Updated**: 2025-09-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, vue3

## README

## 项目概述

这是一个基于Vue 3 + TypeScript + Vite构建的现代化用户认证系统。系统提供了完整的用户注册、登录、权限管理等功能，采用JWT（JSON Web Token）技术实现安全的身份验证机制。

## 技术栈

- **前端框架**: Vue 3 (Composition API)
- **开发工具**: Vite
- **语言**: TypeScript
- **状态管理**: Pinia
- **路由管理**: Vue Router
- **UI组件库**: Element Plus
- **HTTP客户端**: Axios
- **构建工具**: Vite

## API接口文档

### 1. 登录接口
**URL**: /api/login/
**方法**: POST
**请求体**:

// 请求格式
{
  "username": "用户名",
  "password": "密码",
  "remember": true
}
// 响应格式
{
  "success": true,
  "data": {
    "accessToken": "访问令牌",
    "refreshToken": "刷新令牌",
    "user": {
      "id": "用户ID",
      "username": "用户名",
      "role": "用户角色"
    }
  }
}

### 2. 注册接口
**URL**: /api/register/
**方法**: POST
**请求体**:

// 请求格式
{
  "username": "用户名",
  "password": "密码"
}
// 响应格式
{
  "success": true,
  "message": "注册成功"
}

### 3. 获取用户信息接口
**URL**: /api/user/
**方法**: GET
**权限**: 需要认证
**请求头**: Authorization: Bearer <access_token>
**成功响应**:

// 请求头
Authorization: Bearer <access_token>
// 请求方法
GET
// 响应格式
{
  "success": true,
  "data": {
    "id": "用户ID",
    "username": "用户名",
    "role": "用户角色"
  }
}

### 4. 刷新令牌接口
**URL**: /api/refresh/
**方法**: POST
**请求体**:

// 请求格式
{
  "refreshToken": "刷新令牌"
}
// 响应格式
{
  "success": true,
  "data": {
    "accessToken": "新的访问令牌"
  }
}

### 5. 登出接口
**URL**: /api/logout/
**方法**: POST
**权限**: 需要认证
**请求头**: Authorization: Bearer <access_token>
**请求体**:

// 请求头
Authorization: Bearer <access_token>
// 请求格式
{
  "refreshToken": "刷新令牌"
}
// 响应格式
{
  "success": true,
  "message": "已退出登录"
}

### 6. 修改用户信息接口
**URL**: /api/user/update/
**方法**: PUT
**权限**: 需要认证
**请求头**: Authorization: Bearer <access_token>
**请求体**:

// 请求头
Authorization: Bearer <access_token>
// 请求格式
{
  "username": "新用户名"
}
// 响应格式
{
  "success": true,
  "message": "用户信息更新成功",
  "data": {
    "id": "用户ID",
    "username": "新用户名",
    "role": "用户角色"
  }
}

### 7. 获取用户列表接口
**URL**: /api/users/
**方法**: GET
**权限**: 需要认证且为管理员
**请求头**: Authorization: Bearer <access_token>
**成功响应**:

// 请求头
Authorization: Bearer <access_token>
// 请求方法
GET
// 响应格式
{
  "success": true,
  "data": [
    {
      "id": "用户ID1",
      "username": "用户名1",
      "role": "用户角色1"
    },
    {
      "id": "用户ID2",
      "username": "用户名2",
      "role": "用户角色2"
    }
  ]
}

### 8. 创建用户接口
**URL**: /api/users/
**方法**: POST
**权限**: 需要认证且为管理员
**请求头**: Authorization: Bearer <access_token>
**请求体**:

// 请求头
Authorization: Bearer <access_token>
// 请求格式
{
  "username": "新用户名",
  "password": "新用户密码",
  "role": "用户角色"
}
// 响应格式
{
  "success": true,
  "message": "用户创建成功",
  "data": {
    "id": "新用户ID",
    "username": "新用户名",
    "role": "用户角色"
  }
}

### 9. 删除用户接口
**URL**: /api/users/<user_id>/
**方法**: DELETE
**权限**: 需要认证且为管理员
**请求头**: Authorization: Bearer <access_token>
**成功响应**:

// 请求头
Authorization: Bearer <access_token>
// 请求方法
DELETE
// 响应格式
{
  "success": true,
  "message": "用户删除成功"
}