Back_end_Management_System/前后端登录连接完整指南.md

前后端登录连接完整指南

✅ 已完成的配置

后端配置

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脚本（如果还没有执行）：

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

# 方法2：直接在MySQL工具中执行
# 打开 src/main/resources/db/insert_data.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);

第二步：启动后端服务

# 进入后端项目目录
cd book

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

# 启动服务
mvn spring-boot:run

验证后端启动成功：

• 查看控制台日志，应该看到：

  Started BookApplication in X.XXX seconds
  

• 访问：http://localhost:8081（应该返回404或错误页面，说明服务已启动）

第三步：配置前端API地址

编辑 books/utils/config.js：

// 开发环境（微信开发者工具）
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"
}

成功响应：

{
  "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"
  }
}

失败响应：

{
  "code": 400,
  "message": "用户名或密码错误",
  "data": null
}

🐛 常见问题排查

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

错误信息：

HV000030: No validator could be found for constraint 'javax.validation.constraints.NotBlank'

解决方法：

1. ✅ 已移除所有验证注解
2. ✅ 已移除验证框架依赖

3. 必须重新编译后端：

   cd book
   mvn clean compile
   mvn spring-boot:run
   

4. 如果还有问题，检查是否有缓存：

   • 删除 book/target 目录
   • 重新编译

问题2：网络请求失败

可能原因：

• 后端服务未启动
• API地址配置错误
• 端口不匹配

解决方法：

1. 检查后端服务是否运行：

   # 检查端口是否被占用
   netstat -ano | findstr 8081
   

2. 检查 books/utils/config.js 中的端口是否正确

3. 检查后端 application.properties 中的端口配置

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

可能原因：

• 数据库中不存在该用户
• 密码不匹配

解决方法：

1. 检查数据库是否有测试用户：

   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测试：

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

4. 检查数据库连接

-- 检查用户是否存在
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. 启动后端：

   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

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