目录
- 前情回顾与本节目标
- 第一步：数据模型准备
- 第二步：管理端资料发布
-
- [2.1 创建页面](#2.1 创建页面)
- [2.2 页面布局](#2.2 页面布局)
- [2.3 添加数据表格](#2.3 添加数据表格)
- 第三步：小程序端资料中心
-
- [3.1 创建页面](#3.1 创建页面)
- [3.2 页面头部](#3.2 页面头部)
- [3.3 分类筛选区域](#3.3 分类筛选区域)
- [3.4 资料列表区域](#3.4 资料列表区域)
- [3.5 下载功能](#3.5 下载功能)
- 最终效果
- 总结
前情回顾与本节目标
在上一节中，我们完成了作业管理功能。本节我们将实现资料管理功能，包括管理端发布资料和小程序端下载资料。
本节核心目标：
- 管理端资料发布：管理员可以上传资料，设置资料类型
- 小程序端资料中心：学生可以查看资料列表，下载资料
第一步：数据模型准备
资料表（MBA_Resources）
用于记录发布的资料：
| 字段名称 | 字段标识 | 字段类型 | 说明 |
|---|---|---|---|
| 资料ID | _id | 文本 | 主键，系统自动生成 |
| 关联班级 | rel_class_id | 多对一 | 关联 Classes 表 |
| 资料标题 | title | 文本 | 资料标题 |
| 资料类型 | type | 枚举 | 1-课件、2-视频、3-案例、4-笔记 |
| 文件大小 | file_size | 文本 | 文件大小（如"2.4MB"） |
| 文件地址 | file_url | 文件 | 上传的文件 |
| 发布时间 | created | 日期时间 | 发布时间 |
第二步：管理端资料发布
2.1 创建页面
点击创建页面图标，输入"资料管理"，选择教师布局
切换到布局设计，添加菜单
2.2 页面布局
在教师布局下添加布局组件
修改标题改为资料管理
2.3 添加数据表格
在页面中添加数据表格组件
数据模型选择资料表，勾选对应的场景
第三步：小程序端资料中心
3.1 创建页面
点击创建页面 图标，输入"资料中心"
复制页面的ID
修改首页模块跳转方法，贴入我们的页面ID
bash
export default function({event, data}) {
const actionType = data.target;
switch(actionType) {
case 'checkin':
$w.utils.navigateTo({ pageId: 'u_jin_ri_qie_dao' });
break;
case 'schedule':
$w.utils.navigateTo({ pageId: 'u_wo_de_ke_biao' });
break;
case 'card':
$w.utils.navigateTo({ pageId: 'u_xue_xi_ka' });
break;
case 'homework':
$w.utils.navigateTo({ pageId: 'u_zuo_ye_ti_jiao' });
break;
case 'resources':
$w.utils.navigateTo({ pageId: 'u_zi_liao_guan_li' });
break;
case 'survey':
$w.utils.navigateTo({ pageId: 'survey' });
break;
}
}给模块配置点击事件，传入入参
3.2 页面头部
添加容器组件，设置宽、高和背景色
bash
:root {
width: 100%;
min-height: 100vh;
background-color: #F6F7F9;
}
继续添加普通容器，设置背景色、内边距和圆角
bash
:root {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
padding: 48px 20px 24px 20px;
border-radius: 0 0 24px 24px;
}
里边添加文本组件，设置文本颜色、字号和加粗的效果
3.3 分类筛选区域
添加容器组件 ，里边添加标签选择组件
设置标签项为全部、课件、视频、案例、笔记，这里全部的值设置为0，其余的按照1、2、3、4的顺序设置
创建一个自定义变量用来接收标签选择的选中值
配置值改变事件，当选择全部时候给变量赋空值，否则赋组件的值
3.4 资料列表区域
添加数据列表组件 ，数据模型选择资料表
第二个文本改为文件的类型、大小和发布日期的组合
将图标改为下载图标
3.5 下载功能
创建自定义方法 downloadResource：
javascript
export default async function downloadResource({ event, data }) {
try {
const resource = data.target;
if (!resource) {
return $w.utils.showToast({ title: '文件不存在', icon: 'error' });
}
$w.utils.showLoading({ title: '下载中...' });
// 获取临时下载链接
const tempUrl = await $w.cloud.getTempFileURL(resource.file_url);
// 下载文件
wx.downloadFile({
url: tempUrl,
success: (res) => {
$w.utils.hideLoading();
if (res.statusCode === 200) {
// 保存到本地
wx.saveFile({
tempFilePath: res.tempFilePath,
success: () => {
$w.utils.showToast({ title: '下载成功', icon: 'success' });
},
fail: () => {
$w.utils.showToast({ title: '保存失败', icon: 'error' });
}
});
} else {
$w.utils.showToast({ title: '下载失败', icon: 'error' });
}
},
fail: () => {
$w.utils.hideLoading();
$w.utils.showToast({ title: '下载失败', icon: 'error' });
}
});
} catch (e) {
console.error('下载资料失败', e);
$w.utils.hideLoading();
$w.utils.showToast({ title: '下载失败', icon: 'error' });
}
}给按钮设置点击事件，传入附件地址
数据列表设置数据筛选，课件类型等于我们的自定义变量
最终效果
教师先上传课件
学员打开资料中心下载课件
总结
本节完成了资料管理功能的实现：
- 管理端资料发布：创建资料管理页面，上传资料表单
- 小程序端资料中心：资料列表展示，分类筛选，文件下载