少儿舞蹈小程序（10）活动与作品后台功能

前言

上一篇我们介绍了校区信息的展示，在小程序首页中，我们还有一块需要展示的内容，就是日常教学的成果。通常决定家长是否选择这个机构的因素，教学质量是比较重要的。我看很多讲机构招生的自媒体，说你管孩子学成啥样，情绪价值给满就行。

我认为这种价值观是有问题的，家长花大几千报这种看似对学习帮助不大的兴趣班，也不是一笔小数目。你教学质量没有保证，虽然说很多家长不见得专业，但是孩子有没有进步还是一眼可以看到的。为了打消家长的顾虑，我们在设计小程序的时候就采用多媒体的形式比如视频、图片来展示教学成果，以此来提高家长的转化。

除了分类展示外，我们还直观的展示了作品的浏览量和点赞量，让数据更有说服力。本篇我们就来拆解一下后台功能如何开发。

1 设计表结构

根据我们的原型，在设计表结构时候要充分考虑需求。在首页展示的时候，我们是按照分类，每一个类别展示一个作品。到了更多页面的时候，采用双列布局展示更多的信息，表结构设计如下：

2 创建数据模型

有了数据表结构，就可以根据设计来创建数据模型。点击控制台的MySQL数据库，点击+号创建

输入模型名称和模型标识

点击添加字段，添加作品标题，类型选择文本

继续添加字段，添加作品分类，类型选择枚举

枚举值，录入’学员表演’,‘教学环境’,‘活动风采’,'比赛获奖‘

继续添加字段，添加作品类型，选择枚举

枚举值设置为图片、视频

继续添加字段，添加作品日期，类型选择日期时间

继续添加字段，添加浏览次数，类型选择数字

继续添加字段，添加点赞数，类型选择数字

继续添加字段，添加图片作品，类型选择图片

继续添加字段，添加视频作品，类型选择视频

继续添加字段，添加缩略图，类型选择图片

3 创建后台功能

表有了之后，我们就可以开发管理页面的功能。打开后台应用

点击创建页面的图标

选择表格与表单页面，选择作品表，选择左侧导航布局

切换到布局设计，选择左侧导航布局，选择布局导航，添加平级菜单

选择列表页面作为菜单

修改菜单的图标和标题

设置好之后就可以录入相关数据

4 创建API

有了基础数据之后，我们来开发一个API供首页显示使用。首页展示的时候每个类别显示一个作品，我们的逻辑是按照分类每个分类去获取一个作品，最后把数据组装好返回，代码如下：

/**
 * 获取作品与活动预览API
 * 获取每个分类的第一个作品
 */

module.exports = async function (params, context) {
  try {
    const categories = ['1', '2', '3', '4'];
    const categoryNames = {
      '1': '学员精彩表演',
      '2': '教学环境',
      '3': '节日活动',
      '4': '比赛获奖'
    };
    const showcasePreviews = [];

    for (const category of categories) {
      const result = await context.callModel({
        dataSourceName: 'showcase',
        methodName: 'wedaGetRecordsV2',
        params: {
          filter: {
            where: {
              category: { $eq: category }
            }
          },
          pageSize: 1,
          pageNumber:1,
          orderBy: [{publishDate:"desc"}]
        }
      });

      if (result.records && result.records.length > 0) {
        showcasePreviews.push( {
          id: result.records[0]._id,
          title: result.records[0].title,
          type: result.records[0].type,
          categoryName: categoryNames[category], // 添加分类名称
          imageUrl: result.records[0].image_url, // 图片URL
          videoUrl: result.records[0].video_url, // 视频URL
          thumbnailUrl: result.records[0].thumbnail_url // 缩略图URL
        });
      } else {
        showcasePreviews[category] = null; // 或者设置一个默认的占位符
      }
    }

    return {
      code: 200,
      message: '获取作品与活动预览成功',
      data: showcasePreviews,
      timestamp: Date.now()
    };

  } catch (error) {
    console.error('获取作品与活动预览错误:', error);
    return {
      code: 500,
      message: '服务器内部错误',
      data: null,
      timestamp: Date.now()
    };
  }
};

在我们的机构管理下边新添加一个方法，测试成功后点击出参自动映射

总结

本篇我们带着大家拆解了首页作品展示的后台功能搭建过程，设计了数据表，创建了数据模型，搭建了管理页面功能。为了方便的在首页展示数据，我们还创建了API按照前端的格式要求进行了返回，下一篇我们介绍一下首页的展示，敬请期待。