guoyu/APP课件访问地址验证.md

# APP 课件访问地址验证

## 📊 当前配置分析

### 1. 后端配置
**文件：** `Study-Vue-redis/ry-study-admin/src/main/resources/application.yml`
```yaml
ruoyi:
  profile: D:\wwwroot\study_web\web\profile
```

**静态资源映射：**
```
URL: /profile/**
映射到: file:D:\wwwroot\study_web\web\profile/
```

---

### 2. 前端配置
**文件：** `fronted_uniapp/utils/config.js`
```javascript
API_BASE_URL: http://192.168.0.106:30091
FILE_BASE_URL: http://192.168.0.106:30091/profile
```

---

### 3. 数据库存储
**表：** `courseware`
**字段：** `file_path`
**示例值：** `/profile/upload/2025/11/18/xxx.mp4`

---

### 4. 文件物理位置
```
D:\wwwroot\study_web\web\profile\upload\2025\11\18\xxx.mp4
```

---

## 🔄 URL 构建流程

### 步骤 1：从数据库读取
```javascript
courseware.filePath = "/profile/upload/2025/11/18/xxx.mp4"
```

### 步骤 2：去除 /profile 前缀（避免重复）
```javascript
// 代码位置：fronted_uniapp/pages/course/detail.vue:460
if (filePath.startsWith('/profile/')) {
    filePath = filePath.substring(8)  // 去掉 '/profile'
}
// 结果：filePath = "/upload/2025/11/18/xxx.mp4"
```

### 步骤 3：对文件名进行 URL 编码
```javascript
// 代码位置：fronted_uniapp/pages/course/detail.vue:474
const pathParts = filePath.split('/')
const encodedPath = pathParts.map((part, index) => {
    if (index === pathParts.length - 1) {
        return encodeURIComponent(part)  // 只编码文件名
    }
    return part
}).join('/')
// 结果：encodedPath = "/upload/2025/11/18/xxx.mp4"
```

### 步骤 4：拼接完整 URL
```javascript
// 代码位置：fronted_uniapp/pages/course/detail.vue:486
const fileUrl = config.FILE_BASE_URL + encodedPath
// 结果：fileUrl = "http://192.168.0.106:30091/profile/upload/2025/11/18/xxx.mp4"
```

---

## ✅ 验证结果

### 完整的访问路径：
```
1. 数据库路径：/profile/upload/2025/11/18/xxx.mp4
2. 去除前缀后：/upload/2025/11/18/xxx.mp4
3. 拼接 FILE_BASE_URL：http://192.168.0.106:30091/profile/upload/2025/11/18/xxx.mp4
4. 后端映射：/profile/** → D:\wwwroot\study_web\web\profile/
5. 最终物理路径：D:\wwwroot\study_web\web\profile/upload/2025/11/18/xxx.mp4
```

### ✅ 路径匹配正确！

---

## 🧪 测试验证

### 测试 1：直接访问 URL
在浏览器中访问：
```
http://192.168.0.106:30091/profile/upload/2025/11/18/xxx.mp4
```
**预期结果：** 视频可以正常播放

### 测试 2：在 APP 中播放
1. 打开课程详情页
2. 点击播放视频
3. 查看控制台日志

**预期日志：**
```
[课程学习] 🔗 URL构建信息:
  - FILE_BASE_URL: http://192.168.0.106:30091/profile
  - 原始filePath: /profile/upload/2025/11/18/xxx.mp4
  - 编码后路径: /upload/2025/11/18/xxx.mp4
  - 完整URL: http://192.168.0.106:30091/profile/upload/2025/11/18/xxx.mp4
```

---

## 🔍 可能的问题和解决方案

### 问题 1：视频无法加载（404）

**检查清单：**
- [ ] 文件是否存在于物理路径
- [ ] 后端服务是否启动
- [ ] 防火墙是否开放 30091 端口
- [ ] 手机和电脑是否在同一局域网

**解决方法：**
```bash
# 检查文件是否存在
dir "D:\wwwroot\study_web\web\profile\upload\2025\11\18"

# 检查后端服务
netstat -ano | findstr 30091
```

---

### 问题 2：中文文件名乱码

**原因：** URL 编码问题

**解决：** 代码已经处理了文件名编码
```javascript
// 只对文件名进行 encodeURIComponent
if (index === pathParts.length - 1) {
    return encodeURIComponent(part)
}
```

---

### 问题 3：路径重复（/profile/profile/）

**原因：** 数据库中的路径已包含 `/profile/`，前端又拼接了一次

**解决：** 代码已经处理了前缀去除
```javascript
if (filePath.startsWith('/profile/')) {
    filePath = filePath.substring(8)  // 去掉 '/profile'
}
```

---

## 📝 配置总结

### ✅ 当前配置正确

| 配置项 | 值 | 状态 |
|--------|-----|------|
| 后端端口 | 30091 | ✅ |
| 后端 profile 路径 | D:\wwwroot\study_web\web\profile | ✅ |
| 前端 API 地址 | http://192.168.0.106:30091 | ✅ |
| 前端 FILE_BASE_URL | http://192.168.0.106:30091/profile | ✅ |
| 数据库路径格式 | /profile/upload/2025/11/18/xxx.mp4 | ✅ |
| 文件物理位置 | D:\wwwroot\study_web\web\profile\upload\2025\11\18\xxx.mp4 | ✅ |

### ✅ URL 构建逻辑正确

代码已经正确处理了：
1. ✅ 去除重复的 `/profile/` 前缀
2. ✅ 对文件名进行 URL 编码
3. ✅ 拼接完整的访问 URL
4. ✅ 路径映射正确

---

## 🎯 结论

**APP 课件访问地址配置完全正确！** ✅

所有配置都已经正确设置，URL 构建逻辑也处理了各种边界情况：
- 去除重复前缀
- 文件名编码
- 路径规范化

现在可以放心打包 APP 了！

---

## 📱 打包建议

### 打包前检查清单：
- [x] 后端配置正确
- [x] 前端配置正确
- [x] 数据库路径正确
- [x] 文件已迁移到正确位置
- [x] URL 构建逻辑正确
- [ ] 后端服务正常运行
- [ ] 测试视频可以正常访问

### 打包方式：
使用 **云端打包** 来编译 UTS 插件（语音识别功能）：
```
发行 → 原生App-云打包 → 勾选"打包为自定义调试基座"
```

或者打正式包：
```
发行 → 原生App-云打包 → 不勾选"打包为自定义调试基座"
```