# 🎯 Axios API 集成 - 一句话总结

## 你问的问题

> 是不是少了axios相关的东西？调用后台接口，后台接口会传递json数据上来，我应该怎么做？你只用做一个登录示例就可以了。

## 答案

✅ **已为你完成！** 完整的 axios 配置和登录 API 示例已创建。

---

## 📂 新增文件

### API 层（前端代码）

```
src/api/
├── index.ts           ← axios 实例 + 拦截器
│   • baseURL 自动添加 API 前缀
│   • 请求拦截器自动添加 token
│   • 响应拦截器自动处理错误
│
└── auth.ts           ← 登录 API
    • loginApi(username, password) - 调用 POST /api/auth/login
    • logoutApi() 
    • getUserInfoApi()
    • 完整的 TypeScript 类型定义
```

### 环境配置

```
.env.development       ← API 地址：http://localhost:3000/api
.env.production        ← API 地址：https://api.example.com/api
.env.local             ← 本地覆盖
```

### 文档

```
WHAT_TO_DO_NEXT.md              ← 👈 你接下来该做什么（先读这个）
API_IMPLEMENTATION_COMPLETE.md  ← 完整总结
API_INTEGRATION_GUIDE.md         ← 详细教程
BACKEND_API_EXAMPLE.md           ← 后端代码示例
API_QUICK_REFERENCE.md           ← 快速参考
```

---

## 🔄 工作流程

### 简单版本

```
用户登录
  ↓
await authStore.login(username, password)
  ↓
loginApi(credentials)
  ↓
http.post('/auth/login', credentials)
  ↓
axios 拦截器处理
  ↓
POST http://localhost:3000/api/auth/login
  ↓
后端返回 JSON
  ↓
axios 拦截器提取 response.data
  ↓
前端收到数据
  ↓
保存 token 和 user 到 localStorage
  ↓
登录成功！
```

---

## 💻 后端返回的 JSON 格式

你的后端需要返回这样的格式：

```json
{
  "code": 200,
  "message": "登录成功",
  "data": {
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
    "user": {
      "id": "1",
      "username": "admin",
      "email": "admin@example.com",
      "role": "admin"
    }
  }
}
```

**关键点：**
- `code` 必须是 200 表示成功
- `data.token` 是 JWT，后续请求会自动在 `Authorization: Bearer <token>` 中发送
- `data.user` 包含用户信息

---

## 🚀 立即测试

### 选项 1：使用提供的后端示例

```bash
# 创建后端项目
mkdir admin-backend && cd admin-backend
npm init -y && npm install express cors jsonwebtoken

# 复制 BACKEND_API_EXAMPLE.md 中的代码到 server.js
# 然后运行
node server.js

# 在另一个终端启动前端
npm run dev

# 访问 http://localhost:5173
# 输入 admin / 123456 登录
```

### 选项 2：集成你自己的后端

1. 实现 `POST /api/auth/login` 接口
2. 返回上述格式的 JSON
3. 配置 CORS
4. 启动后端
5. 运行 `npm run dev`
6. 测试登录

---

## 📝 代码示例

### 在组件中使用（已更新）

```typescript
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()

// 登录
const success = await authStore.login('admin', '123456')
if (success) {
  console.log('登录成功！')
}

// 获取当前用户
console.log(authStore.user)
console.log(authStore.token)

// 登出
await authStore.logout()
```

### 添加新的 API（参考登录示例）

```typescript
// src/api/users.ts
import http from './index'

export const getUsersApi = () => {
  return http.get('/users')
}

export const createUserApi = (data) => {
  return http.post('/users', data)
}

// 在组件中使用
const response = await getUsersApi()
if (response.code === 200) {
  console.log(response.data)
}
```

---

## ✅ 检查清单

### 前端（✅ 已完成）

- [x] Axios 配置
- [x] 拦截器设置
- [x] API 服务层
- [x] 登录示例
- [x] TypeScript 类型
- [x] 环境配置

### 你需要做（⏳ 待实施）

- [ ] 实现后端登录接口
- [ ] 配置 CORS
- [ ] 启动后端
- [ ] 测试集成

---

## 📚 快速参考

| 需求 | 文件 | 说明 |
|------|------|------|
| 快速上手 | `WHAT_TO_DO_NEXT.md` | 下一步该做什么 |
| 详细教程 | `API_INTEGRATION_GUIDE.md` | 完整 API 使用指南 |
| 后端参考 | `BACKEND_API_EXAMPLE.md` | Node.js/Python 实现 |
| 代码参考 | `API_QUICK_REFERENCE.md` | 快速代码片段 |
| 原理说明 | `API_IMPLEMENTATION_COMPLETE.md` | 完整工作流程 |

---

## 🎉 总结

```
✅ 前端：完整的 API 层 + 登录示例
⏳ 你的工作：实现后端 API + 配置 CORS + 测试

预计时间：15 分钟
结果：功能完整的登录系统
```

**现在就开始吧！** 🚀

---

**相关文档快速链接：**
- 👉 [接下来该做什么](./WHAT_TO_DO_NEXT.md)
- 📖 [详细集成指南](./API_INTEGRATION_GUIDE.md)
- 💻 [后端代码示例](./BACKEND_API_EXAMPLE.md)
- ⚡ [快速参考](./API_QUICK_REFERENCE.md)