# 图书管理前端

**Repository Path**: chimingchangyin/library-management-front-end

## Basic Information

- **Project Name**: 图书管理前端
- **Description**: 本图书管理系统前端基于 Vue3、TypeScript 构建，集成 Element Plus 组件库提升界面体验。支持用户认证、图书增删改查、图片上传等功能。采用 Pinia 管理状态，Vue Router 控制路由，未适配移动端，本人还不会做
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://cmcy.xyz
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-25
- **Last Updated**: 2025-07-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, TypeScript, Element-UI

## README

# 图书管理系统前端

## 项目背景
该项目是一个基于 Vue3 构建的图书管理系统前端，借助现代前端技术栈实现了图书管理的核心功能，同时支持用户认证和响应式布局，提升了系统的易用性和可维护性。

## 主要功能
### 用户认证
- **登录**：已注册用户可以使用账号密码登录系统。
- **注册**：新用户可以创建自己的账号。
- **路由守卫**：使用路由守卫控制页面访问权限，确保未登录用户无法访问需要认证的页面。

### 图书管理
- **搜索**：支持按图书名称搜索图书。
- **添加**：可以添加新的图书信息，包含封面图片上传功能。
- **编辑**：对已有的图书信息进行修改。
- **删除**：支持单本图书删除和批量删除操作。
- **列表展示**：展示图书列表，可根据搜索条件筛选。

### 图片上传
- 支持图书封面图片上传，并提供预览功能。
- 对上传的图片进行格式和大小验证（仅支持图片格式，大小不超过 3MB）。

### 响应式布局
适配移动端设备，在小屏幕设备上也能有良好的显示效果。

## 技术栈
### 前端框架
- **Vue3**：用于构建用户界面的渐进式 JavaScript 框架。
- **TypeScript**：为 JavaScript 添加了静态类型检查，提高代码的可维护性。

### UI 组件库
- **Element Plus**：基于 Vue3 的桌面端组件库，提供丰富的 UI 组件。

### 状态管理
- **Pinia**：Vue 的官方状态管理库，简单易用，支持 TypeScript。
- **pinia-plugin-persistedstate**：Pinia 的持久化插件，用于将状态保存到本地存储。

### 路由管理
- **Vue Router**：Vue.js 的官方路由管理器，用于实现页面导航。

### 构建工具
- **Vite**：新一代前端构建工具，提供快速的开发体验。

### 其他依赖
- **Axios**：基于 Promise 的 HTTP 客户端，用于与后端 API 进行通信。

## 项目结构
```plaintext
├── .gitignore            # Git 忽略文件配置
├── README.md             # 项目说明文档
├── dist                  # 项目构建输出目录
├── env.d.ts              # TypeScript 环境声明文件
├── index.html            # 项目入口 HTML 文件
├── package-lock.json     # 依赖版本锁定文件
├── package.json          # 项目依赖和脚本配置
├── public                # 公共资源目录
├── src                   # 源代码目录
│   ├── App.vue           # 根组件
│   ├── api               # API 请求封装目录
│   ├── components        # 公共组件目录
│   ├── main.ts           # 项目入口文件
│   ├── router            # 路由配置目录
│   ├── stores            # Pinia 状态管理目录
│   ├── styles            # 样式文件目录
│   └── views             # 页面组件目录
├── tsconfig.app.json     # TypeScript 应用配置文件
├── tsconfig.json         # TypeScript 基础配置文件
├── tsconfig.node.json    # TypeScript Node.js 配置文件
└── vite.config.ts        # Vite 配置文件
```

## 核心功能实现
### 用户认证
在 `src/stores/auth.ts` 中使用 Pinia 定义了 `auth` store，用于管理用户的登录状态。同时，在 `src/router/index.ts` 中实现了路由守卫，根据用户的登录状态控制页面访问权限。

```typescript:d%3A%5C%E6%8E%98%E9%87%91%E5%B0%8F%E5%86%8C%E5%AD%A6%E4%B9%A0%5C%E5%9B%BE%E4%B9%A6%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F%5Cbook-management-system-frontend%5Csrc%2Fstores%2Fauth.ts
import { defineStore } from 'pinia';

// 定义认证状态管理仓库
export const useAuthStore = defineStore('auth', {
    state: () => ({
        isAuthenticated: false, // 存储登录状态
        user: null,
    }),
    actions: {
        login(user: any) {
            this.isAuthenticated = true;
            this.user = user;
        },
        logout() {
            this.isAuthenticated = false;
            this.user = null;
        },
    },
    // 开启状态持久化
    persist: true,
});
```

### 图书管理
在 `src/views/BookManage.vue` 中实现了图书的搜索、添加、编辑、删除等功能，同时支持图片上传和预览。

```vue:d%3A%5C%E6%8E%98%E9%87%91%E5%B0%8F%E5%86%8C%E5%AD%A6%E4%B9%A0%5C%E5%9B%BE%E4%B9%A6%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F%5Cbook-management-system-frontend%5Csrc%2Fviews%2FBookManage.vue
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { list, updateBook, deleteBook, createBook, uploadImage } from "@/api/user/register.ts"
import { ElMessage, ElMessageBox } from "element-plus"

// 搜索表单数据
const searchForm = ref({
  name: ''
})

// 图书列表数据
const bookList = ref([])

// 获取图书列表
const getBookList = async (name?: string) => {
  try {
    // 显示加载状态
    loading.value = true
    const res = await list(name);
    bookList.value = res.data
  } catch (e: any) {
    ElMessage.error(e.response?.data?.message || e.message || '获取图书列表失败')
  } finally {
    // 隐藏加载状态
    loading.value = false
  }
}
</script>
```

## 项目安装与运行
### 安装依赖
```bash
npm install
```

### 开发模式运行
```bash
npm run dev
```
运行后，打开浏览器访问 `http://localhost:5173` 即可查看项目。

### 生产环境构建
```bash
npm run build
```
构建完成后，生成的文件会存放在 `dist` 目录中。

## 部署要求
### 前端部署
- 将 `dist` 目录下的文件部署到静态文件服务器（如 Nginx）。
- 配置 Nginx 支持 Vue Router 的历史模式。示例配置如下：
```nginx
server {
    listen 80;
    server_name your_domain_or_ip;

    root /path/to/your/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}
```

### 后端依赖
需要配置后端 API 服务，前端项目中的 `src/api` 目录封装了与后端的接口请求。确保后端服务正常运行，并且接口地址配置正确。

## 注意事项
- 开发前请确保已经安装了 Node.js 和 npm。
- 若需要修改项目配置，可编辑 `vite.config.ts` 文件。
- 若需要添加新的依赖，可使用 `npm install package-name` 命令进行安装。