微搭低代码MBA 培训管理系统实战 32——资料管理功能

前情回顾与本节目标

在上一节中，我们完成了作业管理功能。本节我们将实现资料管理功能，包括管理端发布资料和小程序端下载资料。

本节核心目标：

• 管理端资料发布：管理员可以上传资料，设置资料类型
• 小程序端资料中心：学生可以查看资料列表，下载资料

第一步：数据模型准备

资料表（MBA_Resources）

用于记录发布的资料：

第二步：管理端资料发布

2.1 创建页面

点击创建页面图标，输入"资料管理"，选择教师布局

切换到布局设计，添加菜单

2.2 页面布局

在教师布局下添加布局组件

修改标题改为资料管理

2.3 添加数据表格

在页面中添加数据表格组件

数据模型选择资料表，勾选对应的场景

第三步：小程序端资料中心

3.1 创建页面

点击创建页面图标，输入"资料中心"

复制页面的ID

修改首页模块跳转方法，贴入我们的页面ID

exportdefault 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 页面头部

添加容器组件，设置宽、高和背景色

:root{width:100%;min-height: 100vh;background-color:#F6F7F9;}

继续添加普通容器，设置背景色、内边距和圆角

:root{background: linear-gradient(135deg,#3b82f6 0%, #1d4ed8 100%);padding: 48px 20px 24px 20px;border-radius:0024px 24px;}

里边添加文本组件，设置文本颜色、字号和加粗的效果

3.3 分类筛选区域

添加容器组件，里边添加标签选择组件

设置标签项为全部、课件、视频、案例、笔记，这里全部的值设置为0，其余的按照1、2、3、4的顺序设置

创建一个自定义变量用来接收标签选择的选中值

配置值改变事件，当选择全部时候给变量赋空值，否则赋组件的值

3.4 资料列表区域

添加数据列表组件，数据模型选择资料表

第二个文本改为文件的类型、大小和发布日期的组合

将图标改为下载图标

3.5 下载功能

创建自定义方法downloadResource：

exportdefaultasyncfunctiondownloadResource({event,data}){try{constresource=data.target;if(!resource){return$w.utils.showToast({title:'文件不存在',icon:'error'});}$w.utils.showLoading({title:'下载中...'});// 获取临时下载链接consttempUrl=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'});}}

给按钮设置点击事件，传入附件地址

数据列表设置数据筛选，课件类型等于我们的自定义变量

最终效果

教师先上传课件

学员打开资料中心下载课件

总结

本节完成了资料管理功能的实现：

1. 管理端资料发布：创建资料管理页面，上传资料表单
2. 小程序端资料中心：资料列表展示，分类筛选，文件下载