# cloudlibrary-frontend2

**Repository Path**: dshabao/cloudlibrary-frontend2

## Basic Information

- **Project Name**: cloudlibrary-frontend2
- **Description**: 图书馆vue3前端--仓库内有后端
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-14
- **Last Updated**: 2025-10-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 图书管理系统 - 前端项目

## 项目介绍

本项目是图书管理系统的前端界面，基于 Vue 3 + TypeScript 开发，结合 Ant Design Vue 组件库构建现代化用户界面。系统提供图书搜索、详情查看、借阅管理、评论互动等核心功能，旨在为用户提供便捷的图书资源查询与管理体验。

## 技术栈

- **核心框架**：Vue 3
- **编程语言**：TypeScript
- **UI 组件库**：Ant Design Vue
- **路由管理**：Vue Router
- **状态管理**：Pinia
- **HTTP 客户端**：Axios
- **样式预处理器**：SCSS
- **构建工具**：Vite

## 环境要求

- Node.js 14.x 及以上
- npm 6.x 及以上 或 yarn 1.x 及以上

## 安装与运行

### 克隆仓库

```bash
git clone <仓库地址>
cd <项目目录>
```

### 安装依赖

```bash
npm install
# 或
yarn install
```

### 开发环境运行

```bash
npm run dev
# 或
yarn dev
```

### 生产环境构建

```bash
npm run build
# 或
yarn build
```

## 目录结构

```
src/
├── api/                 # API 请求相关配置与接口定义
│   ├── bookController.ts  # 图书相关接口
│   ├── commentController.ts # 评论相关接口
│   └── ...
├── assets/              # 静态资源（图片、全局样式等）
├── components/          # 通用组件
├── layouts/             # 布局组件
│   └── BasicLayout.vue  # 基础布局（包含导航、侧边栏等）
├── pages/               # 页面组件
│   ├── book/            # 图书相关页面
│   │   ├── BookDetailPage.vue  # 图书详情页
│   │   ├── MyBookRecordPage.vue # 我的借阅记录页
│   │   └── ...
│   ├── comment/         # 评论相关页面
│   ├── home/            # 首页相关
│   └── ...
├── router/              # 路由配置
├── stores/              # Pinia 状态管理
├── styles/              # 全局样式
├── utils/               # 工具函数
├── App.vue              # 应用入口组件
└── main.ts              # 程序入口文件
```

## 核心功能模块

### 1. 图书模块
- 图书搜索：支持按书名、作者、ISBN 等关键词搜索
- 图书详情：展示图书基本信息、借阅状态、评论等
- 借阅管理：图书借阅、续借、归还记录查询
- 图书推荐：热门图书排行榜、相似图书推荐

### 2. 用户模块
- 个人中心：用户信息管理
- 借阅记录：查询历史借阅与当前借阅状态
- 收藏管理：图书收藏与取消收藏

### 3. 评论模块
- 评论列表：查看图书相关评论
- 评论互动：发布、回复、点赞评论

## 开发规范

1. **代码规范**：遵循 ESLint 与 Prettier 配置，提交前需通过代码检查
2. **组件命名**：采用 PascalCase 命名规范（如 `BookDetailPage.vue`）
3. **样式规范**：使用 scoped 样式隔离，全局样式统一放在 `styles/` 目录
4. **提交规范**：提交信息需符合 Angular 提交规范（feat: 新功能, fix: 修复 bug 等）

## 常见问题

1. **依赖安装失败**：
   - 检查 Node.js 版本是否符合要求
   - 尝试删除 `node_modules` 与 `package-lock.json` 后重新安装

2. **API 请求失败**：
   - 检查后端服务是否启动
   - 确认 API 基础地址配置正确（通常在 `utils/request.ts` 中）

3. **样式错乱**：
   - 检查是否正确引入 Ant Design Vue 样式
   - 避免 scoped 样式穿透问题，必要时使用 `:deep()` 修饰符

## 联系方式

如有问题，请联系：[项目负责人邮箱]

---

最后更新时间：[2025.10.14]