# 内容管理模块

## 功能概述

内容管理模块包含以下三个子模块：
- **分类管理**：管理内容分类，支持分类名称和分类图片
- **标签管理**：管理内容标签，支持标签名称
- **Banner管理**：管理轮播图，支持名称、排序、跳转链接和图片

## 文件结构

```
src/
├── api/content/
│   ├── category.js    # 分类管理API
│   ├── tag.js         # 标签管理API
│   └── banner.js      # Banner管理API
└── views/content/
    ├── category/
    │   └── index.vue  # 分类管理页面
    ├── tag/
    │   └── index.vue  # 标签管理页面
    └── banner/
        └── index.vue  # Banner管理页面
```

## 后端接口

### 分类管理接口
- 列表查询：`GET /back/category/list`
- 新增分类：`POST /back/category` (FormData格式)
- 修改分类：`PUT /back/category` (FormData格式)
- 删除分类：`DELETE /back/category/{id}`

### 标签管理接口
- 列表查询：`GET /back/tag/list`
- 新增标签：`POST /back/tag`
- 修改标签：`PUT /back/tag`
- 删除标签：`DELETE /back/tag/{id}`

### Banner管理接口
- 列表查询：`GET /back/banner/list`
- 新增Banner：`POST /back/banner/add` (FormData格式)
- 修改Banner：`PUT /back/banner` (FormData格式)
- 删除Banner：`DELETE /back/banner/{id}`

## 图片处理说明

### 图片上传方式
- **不再预先上传**：图片不会先上传到服务器
- **直接提交**：图片作为二进制文件直接随表单提交到后端
- **本地预览**：使用 `URL.createObjectURL()` 创建本地预览
- **FormData格式**：使用 `multipart/form-data` 格式提交

### 图片显示方式
- **字段映射**：
  - 分类管理：使用 `backImg` 字段
  - Banner管理：使用 `imageUrl` 字段
- **URL拼接**：后端返回图片路径，前端拼接完整URL
- **工具方法**：使用 `src/utils/image.js` 中的 `getImageUrl()` 方法

### 请求格式示例
```javascript
// 分类新增请求
const formData = new FormData()
formData.append('name', '分类名称')
formData.append('file', fileObject) // 文件对象

// Banner新增请求
const formData = new FormData()
formData.append('name', 'Banner名称')
formData.append('sort', '1')
formData.append('jumpUrl', 'https://example.com')
formData.append('file', fileObject) // 文件对象
```

### 图片URL处理示例
```javascript
// 后端返回数据
{
  "id": 1,
  "name": "分类名称",
  "backImg": "/upload/category/image.jpg"  // 图片路径
}

// 前端显示
const fullUrl = getImageUrl(backImg) 
// 结果: "http://60.205.107.210:8080/upload/category/image.jpg"
```

## 安装步骤

### 1. 执行菜单SQL
在数据库中执行 `content_menu.sql` 文件，创建菜单和权限配置。

### 2. 重启前端服务
```bash
npm run dev
```

### 3. 分配权限
登录系统后，在角色管理中为相应角色分配内容管理模块的权限。

## 功能特性

### 分类管理
- ✅ 分类列表展示（支持分页）
- ✅ 分类搜索（按名称）
- ✅ 新增分类（支持图片上传）
- ✅ 编辑分类
- ✅ 删除分类
- ✅ 图片预览

### 标签管理
- ✅ 标签列表展示（支持分页）
- ✅ 标签搜索（按名称）
- ✅ 新增标签
- ✅ 编辑标签
- ✅ 删除标签

### Banner管理
- ✅ Banner列表展示（支持分页）
- ✅ Banner搜索（按名称）
- ✅ 新增Banner（支持图片上传）
- ✅ 编辑Banner
- ✅ 删除Banner
- ✅ 图片预览
- ✅ 排序功能

## 注意事项

1. **图片上传**：分类和Banner模块支持图片上传，图片直接作为二进制流传给后端。

2. **FormData格式**：分类和Banner的新增/修改接口使用FormData格式，标签管理使用JSON格式。

3. **权限控制**：所有操作都有相应的权限控制，需要在角色管理中分配权限。

4. **分页支持**：所有列表都支持分页查询。

5. **文件大小限制**：图片大小限制为2MB，支持JPG/PNG/GIF格式。

## 常见问题

### Q: 图片上传失败怎么办？
A: 检查以下几点：
- 图片格式是否为JPG/PNG/GIF
- 图片大小是否超过2MB
- 网络连接是否正常
- 后端接口是否正常接收FormData格式

### Q: 菜单不显示怎么办？
A: 检查以下几点：
- 是否执行了菜单SQL
- 当前用户角色是否有相应权限
- 是否刷新了页面

### Q: 接口调用失败怎么办？
A: 检查以下几点：
- 后端服务是否正常运行
- 接口地址是否正确
- 网络连接是否正常
- 请求参数格式是否正确

### Q: 图片预览不显示怎么办？
A: 检查以下几点：
- 文件是否成功选择
- 浏览器是否支持 `URL.createObjectURL()`
- 图片格式是否正确 