166 lines
4.9 KiB
Markdown
166 lines
4.9 KiB
Markdown
# 教师仪表板数据获取方式升级总结
|
||
|
||
## 改进概述
|
||
|
||
成功将教师仪表板(`pages/sport/teacher/dashboard.uvue`)的数据获取方式从老式的 supadb 组件模式升级为现代的 `supa.executeAs()` 直接调用模式，参考了 `/pages/msg/` 下面页面的最佳实践。
|
||
|
||
## 主要改进
|
||
|
||
### 1. **移除旧式组件依赖**
|
||
- ❌ 移除了 `SupadbComponentPublicInstance` 组件引用
|
||
- ❌ 移除了 `statsRef` 和 `activitiesRef` 组件引用
|
||
- ❌ 移除了基于组件 `refresh()` 方法的数据加载方式
|
||
|
||
### 2. **引入现代数据服务**
|
||
- ✅ 引入 `supa from '@/components/supadb/aksupainstance.uts'`
|
||
- ✅ 引入 `AkReqResponse` 类型支持
|
||
- ✅ 使用直接的 `supa.executeAs<T>()` 调用方式
|
||
|
||
### 3. **类型安全改进**
|
||
```typescript
|
||
// 定义强类型的数据结构
|
||
type TeacherStats = {
|
||
total_assignments: number
|
||
completed_assignments: number
|
||
pending_review: number
|
||
total_students: number
|
||
}
|
||
|
||
type Activity = {
|
||
id: string
|
||
title: string
|
||
description: string
|
||
type: string
|
||
created_at: string
|
||
updated_at: string
|
||
}
|
||
```
|
||
|
||
### 4. **数据获取方法重构**
|
||
|
||
#### 教师统计数据获取
|
||
```typescript
|
||
const loadTeacherStats = async (): Promise<void> => {
|
||
// 获取作业统计
|
||
const assignmentStatsResponse = await supa
|
||
.from('ak_assignments')
|
||
.select('id, status', {})
|
||
.eq('teacher_id', currentUser)
|
||
.executeAs<Array<{ id: string, status: string }>>()
|
||
|
||
// 获取学生数量统计
|
||
const studentStatsResponse = await supa
|
||
.from('ak_users')
|
||
.select('id', {})
|
||
.eq('role', 'student')
|
||
.executeAs<Array<{ id: string }>>()
|
||
}
|
||
```
|
||
|
||
#### 最近活动数据获取
|
||
```typescript
|
||
const loadRecentActivities = async (): Promise<void> => {
|
||
const activitiesResponse = await supa
|
||
.from('ak_assignments')
|
||
.select('id, title, description, status, created_at, updated_at', {})
|
||
.eq('teacher_id', currentUser)
|
||
.order('updated_at', { ascending: false })
|
||
.limit(5)
|
||
.executeAs<Array<{...}>>()
|
||
}
|
||
```
|
||
|
||
### 5. **异步数据加载优化**
|
||
- ✅ 使用 `Promise.all()` 并行加载多个数据源
|
||
- ✅ 统一的加载状态管理
|
||
- ✅ 完善的错误处理和重试机制
|
||
|
||
### 6. **用户体验改进**
|
||
- ✅ 添加加载状态指示器
|
||
- ✅ 添加错误状态和重试功能
|
||
- ✅ 改进空状态显示
|
||
- ✅ 更好的数据访问函数（移除 UTSJSONObject 依赖）
|
||
|
||
### 7. **性能优化**
|
||
- ✅ 移除不必要的 `safeGet()` 调用
|
||
- ✅ 直接访问强类型对象属性
|
||
- ✅ 减少运行时类型检查开销
|
||
|
||
## 代码对比
|
||
|
||
### 旧版本（组件模式）
|
||
```typescript
|
||
// 组件引用
|
||
const statsRef = ref<SupadbComponentPublicInstance | null>(null)
|
||
const activitiesRef = ref<SupadbComponentPublicInstance | null>(null)
|
||
|
||
// 数据处理函数
|
||
const handleStatsData = (result: UTSJSONObject) => {
|
||
const data = result.get('data')
|
||
if (data != null && Array.isArray(data)) {
|
||
stats.value = data[0] ?? new UTSJSONObject()
|
||
}
|
||
}
|
||
|
||
// 数据加载
|
||
const loadDashboardData = () => {
|
||
if (statsRef.value != null) {
|
||
const strefresh = statsRef.value?.refresh
|
||
strefresh?.()
|
||
}
|
||
}
|
||
```
|
||
|
||
### 新版本（直接调用模式）
|
||
```typescript
|
||
// 直接数据服务调用
|
||
const loadTeacherStats = async (): Promise<void> => {
|
||
const response = await supa
|
||
.from('ak_assignments')
|
||
.select('id, status', {})
|
||
.eq('teacher_id', currentUser)
|
||
.executeAs<Array<{ id: string, status: string }>>()
|
||
|
||
if (response.status >= 200 && response.status < 300 && response.data) {
|
||
// 直接处理强类型数据
|
||
stats.value.total_assignments = response.data.length
|
||
}
|
||
}
|
||
|
||
// 异步并行加载
|
||
const loadDashboardData = async (): Promise<void> => {
|
||
await Promise.all([
|
||
loadTeacherStats(),
|
||
loadRecentActivities(),
|
||
loadMessageStats()
|
||
])
|
||
}
|
||
```
|
||
|
||
## 优势
|
||
|
||
1. **类型安全**: 编译时类型检查，减少运行时错误
|
||
2. **性能更好**: 直接数据访问，无组件封装开销
|
||
3. **代码更清晰**: 移除 UTSJSONObject 依赖，代码更易读
|
||
4. **错误处理**: 统一的异常处理和用户反馈
|
||
5. **可维护性**: 强类型定义，IDE 支持更好
|
||
6. **一致性**: 与消息系统等现代模块保持一致的架构
|
||
|
||
## 兼容性
|
||
|
||
- ✅ uni-app-x 完全兼容
|
||
- ✅ Android 平台测试通过
|
||
- ✅ 类型系统完全支持
|
||
- ✅ 与现有消息系统架构一致
|
||
|
||
## 后续建议
|
||
|
||
1. 考虑将学生仪表板也升级为相同的模式
|
||
2. 统一项目中所有数据获取方式
|
||
3. 考虑添加数据缓存机制以提升性能
|
||
4. 进一步优化数据库查询性能
|
||
|
||
## 总结
|
||
|
||
此次升级成功实现了教师仪表板的现代化改造，不仅提升了代码质量和性能，还为后续的功能扩展奠定了良好的基础。新的架构模式与项目中的消息系统保持一致，有助于维护代码的一致性和可维护性。
|