# 后台管理系统项目结构说明

## 📁 项目结构

```
book/
├── src/main/java/com/yu/book/
│   ├── admin/                          # 后台管理模块
│   │   ├── controller/
│   │   │   ├── AdminController.java    # 管理员登录控制器
│   │   │   └── AdminBookController.java # 书籍管理控制器
│   │   ├── service/
│   │   │   ├── AdminService.java       # 管理员服务
│   │   │   └── AdminBookService.java   # 书籍管理服务
│   │   ├── dto/
│   │   │   ├── AdminLoginDTO.java      # 登录DTO
│   │   │   └── BookManageDTO.java      # 书籍管理DTO
│   │   ├── vo/
│   │   │   ├── AdminLoginVO.java       # 登录VO
│   │   │   └── AdminBookVO.java        # 书籍管理VO
│   │   ├── interceptor/
│   │   │   └── AdminInterceptor.java   # 权限拦截器
│   │   └── config/
│   │       └── AdminWebConfig.java     # Web配置
│   └── ...
├── src/main/resources/
│   ├── db/
│   │   └── admin_schema.sql            # 数据库脚本
│   └── mapper/
│       └── BookMapper.xml              # 书籍Mapper XML
└── book-admin/                         # 前端项目目录
    ├── src/main/resources/static/      # 静态资源目录
    │   ├── pages/
    │   │   ├── login.html              # 登录页面
    │   │   ├── books.html              # 书籍管理页面
    │   │   └── test-connection.html    # 连接测试页面
    │   └── utils/
    │       └── api.js                  # API接口文件
    ├── package.json                    # npm配置文件
    ├── README.md                       # 说明文档
    ├── 启动指南.md                     # 启动指南
    ├── 完整功能说明.md                 # 功能说明
    └── 快速启动.md                     # 快速启动
```

## 🎯 文件说明

### 后端文件

#### Controller层
- `AdminController.java` - 管理员登录控制器
- `AdminBookController.java` - 书籍管理控制器

#### Service层
- `AdminService.java` - 管理员服务（登录验证）
- `AdminBookService.java` - 书籍管理服务（增删改查、上架下架）

#### DTO和VO
- `AdminLoginDTO.java` - 管理员登录DTO
- `AdminLoginVO.java` - 管理员登录VO
- `BookManageDTO.java` - 书籍管理DTO
- `AdminBookVO.java` - 书籍管理VO

#### 权限控制
- `AdminInterceptor.java` - 管理员权限拦截器
- `AdminWebConfig.java` - Web配置（注册拦截器）

### 前端文件

#### 页面
- `login.html` - 登录页面
- `books.html` - 书籍管理页面
- `test-connection.html` - 连接测试页面

#### 工具类
- `api.js` - API接口文件（统一请求方法、所有API接口）

#### 配置文件
- `package.json` - npm配置文件（启动脚本、依赖配置）

## 🔧 配置文件

### package.json

```json
{
  "scripts": {
    "dev": "http-server src/main/resources/static -p 8000 -o",
    "start": "http-server src/main/resources/static -p 8000 -o",
    "serve": "http-server src/main/resources/static -p 8000"
  }
}
```

### api.js

```javascript
const BASE_URL = 'http://localhost:8081'
```

## 🚀 启动方式

### 方式1：使用npm（推荐）

```bash
cd book-admin
npm install
npm run dev
```

### 方式2：使用Python

```bash
cd book-admin/src/main/resources/static
python -m http.server 8000
```

### 方式3：使用Node.js

```bash
cd book-admin/src/main/resources/static
npx http-server -p 8000
```

## 📝 访问地址

- 登录页面：`http://localhost:8000/pages/login.html`
- 书籍管理页面：`http://localhost:8000/pages/books.html`（需要登录）
- 连接测试页面：`http://localhost:8000/pages/test-connection.html`

## 🔐 权限控制

### 后端权限控制

- 所有 `/api/admin/**` 接口都需要token
- 登录接口 `/api/admin/login` 不需要token
- 权限拦截器验证token，如果无效返回401错误

### 前端权限控制

- 登录页面检查是否已登录，如果已登录跳转到书籍管理页面
- 书籍管理页面检查token，如果token不存在跳转到登录页面

## 📊 数据库表

### users表

- 添加 `role` 字段（admin-管理员，user-普通用户）
- 默认管理员账号：admin / admin123

### books表

- 包含书籍的所有字段
- 支持状态管理（status：0-下架，1-上架）

## 🎨 前端技术

- Vue.js 3（通过CDN引入）
- Fetch API（用于HTTP请求）
- HTML5 + CSS3
- 响应式设计

## 🔄 数据流

1. 用户登录 → 后端验证 → 返回token
2. 前端保存token → 后续请求携带token
3. 后端拦截器验证token → 允许或拒绝请求
4. 前端显示数据 → 用户操作 → 更新数据

## 📌 注意事项

1. **后端服务必须启动**：前端依赖后端服务（端口8081）
2. **使用本地服务器**：不要直接双击HTML文件
3. **Token管理**：Token保存在localStorage中
4. **API地址**：前端API地址配置在 `utils/api.js` 中
5. **CORS配置**：后端已配置CORS，允许跨域请求