# 微信小程序连接后端API配置说明

## 重要配置步骤

### 1. 配置 manifest.json（已配置）

在 `books/manifest.json` 中，微信小程序配置如下：

```json
"mp-weixin": {
    "appid": "",
    "setting": {
        "urlCheck": false  // 开发环境不校验域名
    },
    "usingComponents": true
}
```

**说明**：
- `urlCheck: false` 表示开发环境不校验合法域名，允许访问本地服务器
- 正式发布时需要在小程序后台配置服务器域名

### 2. 配置API地址

编辑 `books/utils/config.js` 文件，修改API地址：

#### 方式一：使用 localhost（仅开发工具可用）
```javascript
return 'http://localhost:8081/api'
```

#### 方式二：使用本机IP地址（推荐，真机调试可用）
```javascript
// 取消注释并填入你的本机IP地址
return 'http://192.168.1.100:8081/api'
```

#### 获取本机IP地址方法：

**Windows系统：**
```bash
ipconfig
```
查找 "IPv4 地址"，例如：192.168.1.100

**Mac/Linux系统：**
```bash
ifconfig
```
查找 "inet"，例如：192.168.1.100

### 3. 微信开发者工具设置

1. 打开微信开发者工具
2. 点击右上角"详情"
3. 在"本地设置"中：
   - ✅ 勾选"不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书"
   - ✅ 勾选"不校验安全域名、TLS版本以及HTTPS证书"

### 4. 启动后端服务

```bash
cd book
mvn spring-boot:run
```

确保后端服务运行在 `http://localhost:8081` 或对应的IP地址

## 测试登录

### 测试账号

根据数据库中的测试数据，可以使用以下账号：

1. **用户名**: `zhangsan` **密码**: `123456`
2. **用户名**: `lisi` **密码**: `123456`  
3. **用户名**: `wangwu` **密码**: `123456`

### 测试步骤

1. 在微信开发者工具中打开项目
2. 进入登录页面
3. 输入用户名和密码
4. 点击登录按钮
5. 查看控制台是否有错误信息

## 常见问题

### 1. 网络请求失败

**问题**：显示"网络请求失败，请检查网络连接"

**解决方案**：
- 检查后端服务是否启动
- 检查 `config.js` 中的API地址是否正确
- 如果使用IP地址，确保手机/电脑与开发机器在同一网络
- 检查防火墙是否阻止了8080端口

### 2. 域名不在合法域名列表中

**问题**：提示"不在以下 request 合法域名列表中"

**解决方案**：
- 确保在微信开发者工具中勾选了"不校验合法域名"
- 检查 `manifest.json` 中 `urlCheck` 是否为 `false`

### 3. 真机调试无法连接

**问题**：开发工具可以，真机不行

**解决方案**：
- 必须使用IP地址，不能使用 `localhost`
- 确保手机和电脑在同一WiFi网络
- 检查手机是否能访问电脑的IP地址（可以在手机浏览器中测试）

### 4. 后端跨域问题

**问题**：后端返回CORS错误

**解决方案**：
- 检查后端 `UserController` 是否有 `@CrossOrigin(origins = "*")` 注解
- 如果还有问题，检查后端配置

## 生产环境配置

正式发布时，需要：

1. **在小程序后台配置服务器域名**：
   - 登录微信公众平台
   - 进入"开发" -> "开发管理" -> "开发设置"
   - 在"服务器域名"中添加你的后端API域名
   - 必须使用HTTPS（生产环境）

2. **修改API地址**：
   ```javascript
   // books/utils/config.js
   return 'https://your-domain.com/api'
   ```

3. **修改manifest.json**：
   ```json
   "mp-weixin": {
       "setting": {
           "urlCheck": true  // 生产环境启用域名校验
       }
   }
   ```

## 调试技巧

### 1. 查看网络请求

在微信开发者工具中：
- 点击"调试器" -> "Network"
- 可以看到所有网络请求和响应

### 2. 查看控制台日志

在登录页面添加日志：
```javascript
console.log('API地址:', BASE_URL)
console.log('请求参数:', { username, password })
```

### 3. 测试API连接

可以在小程序中临时添加测试代码：
```javascript
uni.request({
    url: 'http://localhost:8081/api/user/login',
    method: 'POST',
    data: { username: 'zhangsan', password: '123456' },
    success: (res) => {
        console.log('测试请求成功:', res)
    },
    fail: (err) => {
        console.error('测试请求失败:', err)
    }
})
```

## 文件结构

```
books/
├── utils/
│   ├── config.js       # API配置文件（修改这里）
│   └── api.js          # API请求封装
├── pages/
│   └── login/
│       └── login.vue   # 登录页面（已连接后端）
└── manifest.json       # 小程序配置（已配置urlCheck）
```

## 快速开始

1. ✅ 修改 `books/utils/config.js` 中的API地址
2. ✅ 启动后端服务：`cd book && mvn spring-boot:run`
3. ✅ 在微信开发者工具中打开项目
4. ✅ 确保勾选"不校验合法域名"
5. ✅ 测试登录功能