# 前后端登录连接完整指南

## ✅ 已完成的配置

### 后端配置
1. ✅ 已移除所有验证注解（`@Valid`、`@NotBlank`等）
2. ✅ 已移除验证框架依赖
3. ✅ 已实现手动参数验证
4. ✅ 登录接口：`POST /api/user/login`
5. ✅ 密码MD5加密验证
6. ✅ 跨域配置：`@CrossOrigin(origins = "*")`

### 前端配置
1. ✅ API工具类已创建：`books/utils/api.js`
2. ✅ API配置文件已创建：`books/utils/config.js`
3. ✅ 登录页面已连接后端：`books/pages/login/login.vue`
4. ✅ 微信小程序配置：`manifest.json` 中 `urlCheck: false`

## 📋 数据库用户信息

根据 `insert_data.sql`，测试账号如下：

| 用户名 | 密码 | 昵称 | VIP状态 | 状态 |
|--------|------|------|---------|------|
| `zhangsan` | `123456` | 张三 | 否 | 启用 |
| `lisi` | `123456` | 李四 | 是 | 启用 |
| `wangwu` | `123456` | 王五 | 否 | 启用 |

**密码说明**：
- 数据库存储：MD5加密后的值 `e10adc3949ba59abbe56e057f20f883e`
- 登录输入：明文密码 `123456`
- 后端处理：自动MD5加密后比对

## 🚀 启动步骤

### 第一步：确保数据库有数据

执行SQL脚本（如果还没有执行）：

```bash
# 方法1：使用MySQL命令行
mysql -u root -p books_db < src/main/resources/db/insert_data.sql

# 方法2：直接在MySQL工具中执行
# 打开 src/main/resources/db/insert_data.sql 文件并执行
```

或者手动插入测试数据：

```sql
USE books_db;

INSERT INTO `users` (`username`, `nickname`, `avatar`, `phone`, `email`, `password`, `is_vip`, `vip_expire_time`, `status`) VALUES
('zhangsan', '张三', 'https://picsum.photos/seed/avatar1/100/100', '13800138001', 'zhangsan@example.com', 'e10adc3949ba59abbe56e057f20f883e', 0, NULL, 1),
('lisi', '李四', 'https://picsum.photos/seed/avatar2/100/100', '13800138002', 'lisi@example.com', 'e10adc3949ba59abbe56e057f20f883e', 1, '2025-12-31 23:59:59', 1),
('wangwu', '王五', 'https://picsum.photos/seed/avatar3/100/100', '13800138003', 'wangwu@example.com', 'e10adc3949ba59abbe56e057f20f883e', 0, NULL, 1);
```

### 第二步：启动后端服务

```bash
# 进入后端项目目录
cd book

# 清理并重新编译（重要！）
mvn clean compile

# 启动服务
mvn spring-boot:run
```

**验证后端启动成功**：
- 查看控制台日志，应该看到：
  ```
  Started BookApplication in X.XXX seconds
  ```
- 访问：`http://localhost:8081`（应该返回404或错误页面，说明服务已启动）

### 第三步：配置前端API地址

编辑 `books/utils/config.js`：

```javascript
// 开发环境（微信开发者工具）
return 'http://localhost:8081/api'

// 真机调试（需要改为你的IP地址）
// return 'http://192.168.1.100:8081/api'
```

**获取本机IP地址**：
- Windows: `ipconfig` 查找 IPv4 地址
- Mac/Linux: `ifconfig` 查找 inet 地址

### 第四步：微信开发者工具设置

1. 打开微信开发者工具
2. 导入 `books` 项目
3. 点击右上角 **"详情"** 按钮
4. 在 **"本地设置"** 标签页中：
   - ✅ 勾选 **"不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书"**

### 第五步：测试登录

1. 在微信开发者工具中打开项目
2. 进入登录页面（`pages/login/login.vue`）
3. 输入测试账号：
   - 用户名：`zhangsan`
   - 密码：`123456`
4. 点击 **"登录"** 按钮
5. 查看结果

## ✅ 登录成功标志

### 前端显示
- ✅ 显示"登录成功"提示
- ✅ 自动跳转到首页（`/pages/index/index`）
- ✅ 用户信息已保存到本地存储

### 后端日志
- ✅ 可以看到登录请求日志
- ✅ 可以看到SQL查询日志（如果开启了MyBatis日志）
- ✅ 返回200状态码

### 检查本地存储
在微信开发者工具的 **"调试器"** -> **"Storage"** 中可以看到：
- `userInfo`：包含用户详细信息
- `isLogin`：`true`

## 🔍 API接口详情

### 登录接口

**请求**：
```
POST http://localhost:8081/api/user/login
Content-Type: application/json

{
  "username": "zhangsan",
  "password": "123456"
}
```

**成功响应**：
```json
{
  "code": 200,
  "message": "登录成功",
  "data": {
    "user": {
      "id": 1,
      "username": "zhangsan",
      "nickname": "张三",
      "avatar": "https://picsum.photos/seed/avatar1/100/100",
      "phone": "13800138001",
      "email": "zhangsan@example.com",
      "isVip": false,
      "status": 1
    },
    "token": "mock_token_1"
  }
}
```

**失败响应**：
```json
{
  "code": 400,
  "message": "用户名或密码错误",
  "data": null
}
```

## 🐛 常见问题排查

### 问题1：验证器错误（HV000030）

**错误信息**：
```
HV000030: No validator could be found for constraint 'javax.validation.constraints.NotBlank'
```

**解决方法**：
1. ✅ 已移除所有验证注解
2. ✅ 已移除验证框架依赖
3. **必须重新编译后端**：
   ```bash
   cd book
   mvn clean compile
   mvn spring-boot:run
   ```
4. 如果还有问题，检查是否有缓存：
   - 删除 `book/target` 目录
   - 重新编译

### 问题2：网络请求失败

**可能原因**：
- 后端服务未启动
- API地址配置错误
- 端口不匹配

**解决方法**：
1. 检查后端服务是否运行：
   ```bash
   # 检查端口是否被占用
   netstat -ano | findstr 8081
   ```
2. 检查 `books/utils/config.js` 中的端口是否正确
3. 检查后端 `application.properties` 中的端口配置

### 问题3：用户名或密码错误

**可能原因**：
- 数据库中不存在该用户
- 密码不匹配

**解决方法**：
1. 检查数据库是否有测试用户：
   ```sql
   SELECT * FROM users WHERE username = 'zhangsan';
   ```
2. 确认密码是 `123456`（MD5加密后：`e10adc3949ba59abbe56e057f20f883e`）

### 问题4：跨域问题

**已解决**：
- 后端已添加 `@CrossOrigin(origins = "*")`
- 如果还有问题，检查后端是否重启

### 问题5：真机无法连接

**解决方法**：
1. 必须使用IP地址，不能使用 `localhost`
2. 确保手机和电脑在同一WiFi网络
3. 在手机浏览器中测试：`http://你的IP:8081`
4. 检查防火墙是否阻止了8081端口

## 📝 调试技巧

### 1. 查看网络请求

在微信开发者工具中：
- 打开 **"调试器"** -> **"Network"**
- 可以看到所有API请求和响应
- 检查请求URL、请求参数、响应数据

### 2. 查看后端日志

在后端控制台查看：
- 请求是否到达
- 是否有错误信息
- SQL查询是否执行

### 3. 测试API接口

使用Postman或curl测试：

```bash
curl -X POST http://localhost:8081/api/user/login \
  -H "Content-Type: application/json" \
  -d '{"username":"zhangsan","password":"123456"}'
```

### 4. 检查数据库连接

```sql
-- 检查用户是否存在
SELECT * FROM users WHERE username = 'zhangsan';

-- 检查密码是否正确（MD5值）
SELECT username, password FROM users WHERE username = 'zhangsan';
-- 应该返回：e10adc3949ba59abbe56e057f20f883e
```

## ✅ 验证清单

在测试前，请确认：

- [ ] 数据库中有测试用户数据（至少一条）
- [ ] 后端服务正常运行（`http://localhost:8081`可访问）
- [ ] API地址配置正确（`books/utils/config.js`）
- [ ] 微信开发者工具已勾选"不校验合法域名"
- [ ] 后端代码已重新编译（`mvn clean compile`）
- [ ] 后端服务已重启
- [ ] 前端代码已保存

## 📞 完整测试流程

1. **启动后端**：
   ```bash
   cd book
   mvn clean compile
   mvn spring-boot:run
   ```

2. **打开前端**：
   - 在微信开发者工具中打开 `books` 项目

3. **测试登录**：
   - 用户名：`zhangsan`
   - 密码：`123456`
   - 点击登录

4. **验证结果**：
   - 应该显示"登录成功"
   - 应该跳转到首页
   - 应该保存用户信息

## 🎯 关键文件位置

### 后端
- 登录接口：`book/src/main/java/com/yu/book/controller/UserController.java`
- 登录服务：`book/src/main/java/com/yu/book/service/UserService.java`
- 登录DTO：`book/src/main/java/com/yu/book/dto/LoginDTO.java`
- 数据库配置：`book/src/main/resources/application.properties`
- 数据库脚本：`book/src/main/resources/db/insert_data.sql`

### 前端
- 登录页面：`books/pages/login/login.vue`
- API工具：`books/utils/api.js`
- API配置：`books/utils/config.js`
- 小程序配置：`books/manifest.json`

现在可以开始测试登录功能了！