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

目录

• 前情回顾与本节目标
• 第一步：数据模型准备
• 第二步：管理端资料发布
• • [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

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

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

: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: 0 0 24px 24px;
}

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

3.3 分类筛选区域

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

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

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

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

3.4 资料列表区域

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

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

将图标改为下载图标

3.5 下载功能

创建自定义方法 downloadResource：

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' });
  }
}

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

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

---

最终效果

教师先上传课件

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

总结

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

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