# library-manage-frontend

**Repository Path**: it4/library-manage-frontend

## Basic Information

- **Project Name**: library-manage-frontend
- **Description**: 本系统是基于 Vue 3 和 Vite 构建的高颜值、现代化图书管理系统前端。系统主要服务于两类核心角色：系统管理员和读者（普通用户），提供了直观的 3D 卡片图书浏览、智能借阅与归还管理、权限流控拦截以及优雅的个人信息维护中心。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-27
- **Last Updated**: 2026-05-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue

## README

# 📚 云端悦读 - 图书管理系统（前端）

[![Vue](https://img.shields.io/badge/Vue-3.4.x-4fc08d?style=flat-square&logo=vuedotjs)](https://vuejs.org/)
[![Vite](https://img.shields.io/badge/Vite-5.2.x-646cff?style=flat-square&logo=vite)](https://vitejs.dev/)
[![Element Plus](https://img.shields.io/badge/Element_Plus-2.6.x-409EFF?style=flat-square&logo=elementplus)](https://element-plus.org/)
[![Pinia](https://img.shields.io/badge/Pinia-2.1.x-yellow?style=flat-square&logo=pinia)](https://pinia.vuejs.org/)
[![Vue Router](https://img.shields.io/badge/Vue_Router-4.3.x-4fc08d?style=flat-square&logo=vuedotjs)](https://router.vuejs.org/)

本系统是基于 **Vue 3** 和 **Vite** 构建的高颜值、现代化图书管理系统前端。系统主要服务于两类核心角色：**系统管理员**和**读者（普通用户）**，提供了直观的 3D 卡片图书浏览、智能借阅与归还管理、权限流控拦截以及优雅的个人信息维护中心。

---

## 🛠️ 技术栈与依赖说明

前端项目选用了当前主流的高性能、工程化前端开发技术栈：

*   **核心框架**：`Vue 3` (采用全新一代 **Composition API** 与 `<script setup>` 语法糖，具备优秀的组件复用性与清晰的逻辑分流)。
*   **构建工具**：`Vite 5.2.8` (极速的热重载与构建性能，配置灵活，生态丰富)。
*   **UI 组件库**：`Element Plus 2.6.3` (基于 Vue 3 的桌面端组件库，提供高质量的 UI 组件支持)。
*   **状态管理**：`Pinia 2.1.7` (Vue 3 官方推荐的新一代状态流管理器，支持模块化、类型安全，去除了 mutations，代码结构更清爽)。
*   **路由控制**：`Vue Router 4.3.0` (支持动态路由、路由守卫实现基于 JWT 的登录态与权限拦截)。
*   **网络通信**：`Axios 1.6.8` (基于 Promise 的 HTTP 客户端，封装了统一请求/响应拦截器，负责与后端的高效异步交互)。
*   **辅助开发**：
    *   `unplugin-auto-import` 和 `unplugin-vue-components`：支持 **Element Plus 的全自动按需引入**，无需手动 `import` 组件，极大地优化了首屏加载性能与开发便利性。
    *   `@element-plus/icons-vue`：提供全套美观且易用的 SVG 图标。

---

## 📂 项目结构指南

以下是前端工程的详细目录结构说明：

```text
frontend/
├── dist/                  # 打包后的构建产物 (生产部署文件目录)
├── node_modules/          # 项目运行所需的 npm 依赖包
├── public/                # 静态公共资源目录 (不会被 Vite 编译，直接复制至产物根路径)
├── src/                   # 核心源代码目录
│   ├── api/               # 封装的所有 API 异步接口请求
│   │   ├── book.js        # 图书的增、删、改、分页查询 API 接口
│   │   ├── borrow.js      # 图书借阅、归还、个人借阅记录 API 接口
│   │   └── user.js        # 用户登录、注册、个人资料更新 API 接口
│   ├── layout/            # 通用布局框架
│   │   └── Layout.vue     # 后台管理与读者中心的自适应响应式侧边栏布局
│   ├── router/            # 路由管理
│   │   └── index.js       # 路由映射表与路由守卫拦截 (权限鉴定与未登录跳转)
│   ├── static/            # 静态资源目录 (存放本地图片、Logo等)
│   ├── stores/            # Pinia 全局状态存储
│   │   └── user.js        # 存储并管理当前登录用户的 Token、用户名、角色信息
│   ├── utils/             # 前端辅助公共工具
│   │   └── request.js     # 基于 Axios 封装的统一请求与响应拦截器
│   ├── views/             # 视图页面组件目录
│   │   ├── admin/         # 【管理员专用】页面视图
│   │   │   ├── BookManage.vue   # 图书信息维护页 (含动态条件查询、分类关联、图片上传、库存校验等)
│   │   │   └── Dashboard.vue    # 管理后台仪表盘 (数据看板展示、数据指标)
│   │   ├── reader/        # 【读者专用】页面视图
│   │   │   ├── BorrowCenter.vue # 借阅中心 (3D 图书卡片网格浏览、实时借阅、我的借阅与归还记录页)
│   │   │   └── HomeView.vue     # 读者端主页 (新书速递与借阅指南)
│   │   ├── LoginView.vue        # 统一系统登录页 (表单校验、防抖登录)
│   │   ├── RegisterView.vue     # 读者在线注册页 (表单完整性校验)
│   │   └── UserProfile.vue      # 个人资料设置页 (支持头像上传、昵称、手机号与邮箱的更新)
│   ├── App.vue            # 前端应用入口根组件 (挂载全局路由视图)
│   └── main.js            # 前端应用入口 JS 文件 (挂载 Vue 实例、Pinia、Router、Element Plus)
├── index.html             # HTML 模板入口
├── package.json           # 项目基本信息、开发依赖、生产依赖及编译脚本配置
├── vite.config.js         # Vite 核心配置文件 (包含依赖包按需自动导入、开发服务器代理等配置)
├── 后台首页.png           # 系统控制台页面预览图片
└── README.md              # 前端项目使用与开发指南说明文件
```

---

## 🚀 启动与部署说明

### 1. 开发环境准备

*   **Node.js 运行环境**：建议安装 Node.js 18.x 或更高版本 (测试开发环境为 `v24.1` / `v18.16.x`)。
*   **包管理工具**：推荐使用随 Node.js 一起安装的官方 `npm`。

### 2. 本地依赖安装

在 `frontend` 项目根目录下打开终端，运行以下命令安装项目所需的全部依赖：

```bash
npm install
```

### 3. 本地启动运行

运行开发服务器指令：

```bash
npm run dev
```

启动成功后，Vite 将会在本地自动拉起浏览器（若配置了自动开启），或者您可以手动访问：

*   **访问地址**：`http://localhost:5263`
*   **接口代理说明**：
    *   在开发环境下，Vite 的 `vite.config.js` 配置了反向代理服务器，所有以 `/api` 开头的网络请求都将被安全、自动地转发至后端的本地运行地址 `http://localhost:8781`。
    *   代理配置详情：
        ```javascript
        server: {
          host: "0.0.0.0",
          port: 5263,
          open: true,
          proxy: {
            "/api": {
              target: "http://localhost:8781",
              changeOrigin: true,
              rewrite: (path) => path.replace(/^\/api/, "/api"),
            },
          },
        }
        ```

### 4. 生产环境构建打包

若需要生成用于线上生产环境部署的高性能静态文件，运行：

```bash
npm run build
```

打包完成后，会在 `frontend` 目录下生成 `dist` 文件夹，该文件夹包含极度压缩优化后的 HTML、CSS 和 JavaScript。可以直接使用 **Nginx** 等 Web 服务器进行高性能托管。

---

## 🖥️ 页面预览效果

以下是系统后台管理页面的实际运行效果：

![后台首页](后台首页.png)

---

## ⚙️ 常见开发注意事项

1.  **接口配置**：
    若后端运行在其他主机上，请修改 `vite.config.js` 中 `server.proxy.target` 的 IP 地址与端口号。
2.  **Token 自动注入**：
    `src/utils/request.js` 中封装了请求拦截器，在发送接口请求时，如果 `localStorage` 或 Pinia 状态中存在有效的登录凭证 `Token`，该拦截器将自动在 HTTP Request Header 中注入 `Authorization: Bearer <your_token>`，无需开发者手动处理。
3.  **路由鉴权**：
    项目在 `src/router/index.js` 中配置了全局前置守卫 `router.beforeEach`，所有需要登录后访问的路径（如 `/admin` 和 `/reader` 路由组）都配置了元数据 `meta: { requiresAuth: true }`，对于未登录（或 Token 失效）的直接请求，系统会自动拦截并无缝重定向至统一登录页面 `/login`。