226 lines
5.3 KiB
Markdown
226 lines
5.3 KiB
Markdown
# 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-云打包 → 不勾选"打包为自定义调试基座"
|
||
```
|