返回

构建便捷校务管理神器——高校考勤系统小程序(二)

前端

课程表模块的实现

1. 数据库设计

课程表模块的数据存储至MongoDB数据库中,集合结构如下:

{
  "_id": "课程表ID",
  "课程名称": "课程名称",
  "上课时间": "上课时间",
  "上课地点": "上课地点",
  "任课老师": "任课老师"
}

2. 云函数开发

接下来编写云函数,用于实现课程表数据的增删改查操作:

// 导入云函数依赖库
const cloud = require("tencentcloud-sdk-nodejs");

// 实例化云函数
const app = new cloud.SCF();

// 添加课程
exports.main = async (event) => {
  // 获取请求参数
  const data = event.body;

  // 数据校验
  if (!data.课程名称 || !data.上课时间 || !data.上课地点 || !data.任课老师) {
    return {
      statusCode: 400,
      body: "参数不完整",
    };
  }

  // 数据入库
  try {
    const result = await app.database.collection("课程表").add(data);
    return {
      statusCode: 200,
      body: {
        success: true,
        data: result,
      },
    };
  } catch (error) {
    return {
      statusCode: 500,
      body: {
        success: false,
        error: error.message,
      },
    };
  }
};

// 删除课程
exports.delete = async (event) => {
  // 获取请求参数
  const data = event.body;

  // 数据校验
  if (!data._id) {
    return {
      statusCode: 400,
      body: "参数不完整",
    };
  }

  // 数据入库
  try {
    const result = await app.database.collection("课程表").doc(data._id).remove();
    return {
      statusCode: 200,
      body: {
        success: true,
        data: result,
      },
    };
  } catch (error) {
    return {
      statusCode: 500,
      body: {
        success: false,
        error: error.message,
      },
    };
  }
};

// 更新课程
exports.update = async (event) => {
  // 获取请求参数
  const data = event.body;

  // 数据校验
  if (!data._id) {
    return {
      statusCode: 400,
      body: "参数不完整",
    };
  }

  // 数据入库
  try {
    const result = await app.database.collection("课程表").doc(data._id).update(data);
    return {
      statusCode: 200,
      body: {
        success: true,
        data: result,
      },
    };
  } catch (error) {
    return {
      statusCode: 500,
      body: {
        success: false,
        error: error.message,
      },
    };
  }
};

// 查询课程
exports.query = async (event) => {
  // 获取请求参数
  const data = event.body;

  // 数据校验
  if (!data.课程名称 || !data.上课时间 || !data.上课地点 || !data.任课老师) {
    return {
      statusCode: 400,
      body: "参数不完整",
    };
  }

  // 数据入库
  try {
    const result = await app.database.collection("课程表").where({
      课程名称: data.课程名称,
      上课时间: data.上课时间,
      上课地点: data.上课地点,
      任课老师: data.任课老师,
    }).get();
    return {
      statusCode: 200,
      body: {
        success: true,
        data: result.data,
      },
    };
  } catch (error) {
    return {
      statusCode: 500,
      body: {
        success: false,
        error: error.message,
      },
    };
  }
};

3. 前端开发

在前端页面中,通过调用云函数实现课程表数据的增删改查操作,并展示课程表数据。

// 获取课程表数据
const getCourseList = async () => {
  const res = await wx.cloud.callFunction({
    name: "course",
    data: {},
  });
  if (res.result.success) {
    this.setData({
      courseList: res.result.data,
    });
  } else {
    wx.showToast({
      title: res.result.error,
      icon: "none",
    });
  }
};

// 添加课程
const addCourse = async (data) => {
  const res = await wx.cloud.callFunction({
    name: "course",
    data: {
      课程名称: data.课程名称,
      上课时间: data.上课时间,
      上课地点: data.上课地点,
      任课老师: data.任课老师,
    },
  });
  if (res.result.success) {
    wx.showToast({
      title: "添加课程成功",
    });
    this.getCourseList();
  } else {
    wx.showToast({
      title: res.result.error,
      icon: "none",
    });
  }
};

// 删除课程
const deleteCourse = async (id) => {
  const res = await wx.cloud.callFunction({
    name: "course",
    data: {
      _id: id,
    },
  });
  if (res.result.success) {
    wx.showToast({
      title: "删除课程成功",
    });
    this.getCourseList();
  } else {
    wx.showToast({
      title: res.result.error,
      icon: "none",
    });
  }
};

// 更新课程
const updateCourse = async (data) => {
  const res = await wx.cloud.callFunction({
    name: "course",
    data: {
      _id: data._id,
      课程名称: data.课程名称,
      上课时间: data.上课时间,
      上课地点: data.上课地点,
      任课老师: data.任课老师,
    },
  });
  if (res.result.success) {
    wx.showToast({
      title: "更新课程成功",
    });
    this.getCourseList();
  } else {
    wx.showToast({
      title: res.result.error,
      icon: "none",
    });
  }
};

结语

至此,课程表功能就已实现。如果您有任何疑问,请随时留言或与我讨论。敬请期待我们后续的内容分享。同时,欢迎大家扫码体验我们的高校考勤系统小程序,并提出宝贵的意见和建议。