目录前情回顾与本节目标第一步数据模型准备第二步管理端资料发布2.1 创建页面2.2 页面布局2.3 添加数据表格第三步小程序端资料中心3.1 创建页面3.2 页面头部3.3 分类筛选区域3.4 资料列表区域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修改首页模块跳转方法贴入我们的页面IDexportdefault function({event, data}){const actionTypedata.target;switch(actionType){casecheckin:$w.utils.navigateTo({pageId:u_jin_ri_qie_dao});break;caseschedule:$w.utils.navigateTo({pageId:u_wo_de_ke_biao});break;casecard:$w.utils.navigateTo({pageId:u_xue_xi_ka});break;casehomework:$w.utils.navigateTo({pageId:u_zuo_ye_ti_jiao});break;caseresources:$w.utils.navigateTo({pageId:u_zi_liao_guan_li});break;casesurvey:$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 下载功能创建自定义方法downloadResourceexportdefaultasyncfunctiondownloadResource({event,data}){try{constresourcedata.target;if(!resource){return$w.utils.showToast({title:文件不存在,icon:error});}$w.utils.showLoading({title:下载中...});// 获取临时下载链接consttempUrlawait$w.cloud.getTempFileURL(resource.file_url);// 下载文件wx.downloadFile({url:tempUrl,success:(res){$w.utils.hideLoading();if(res.statusCode200){// 保存到本地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});}}给按钮设置点击事件传入附件地址数据列表设置数据筛选课件类型等于我们的自定义变量最终效果教师先上传课件学员打开资料中心下载课件总结本节完成了资料管理功能的实现管理端资料发布创建资料管理页面上传资料表单小程序端资料中心资料列表展示分类筛选文件下载