山东大学软件学院项目实训weblab-15-优快云博客

本文介绍了一种基于容器技术的教学平台开发方案，旨在为Web开发和程序设计等课程提供统一的开发、运行与测试环境。文章详细展示了如何通过前端技术实现教师端与学生端的功能，包括组织管理、课程加入与退出、通知发布等。

前言

项目地址
本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。

教师端

新建组织

const AddCurriculum = () => {
  createCurrForm.name = '';
  createCurrForm.courseId = '';
  createCurrForm.des = '';

  createCurrFormVisible.value = true;
}
const ConfirmAddCurr = () => {
  console.log(createCurrForm.time);
  let param = new FormData();
  param.append('name', createCurrForm.name);
  param.append('desc', createCurrForm.des);
  param.append('courseId', createCurrForm.courseId);
  param.append('beginTime', createCurrForm.time[0]);
  param.append('endTime', createCurrForm.time[1]);
  request('/weblab/organization/createOrg', param)
    .then(res => {
      console.log(res.data)
      let createData = res.data;
      let code = '';
      let getMessageParam = new FormData();
      getMessageParam.append('orgId', createData.pkg);
      request('/weblab/organization/getOrgMessageById', getMessageParam)
        .then(getMessageRes => {
          console.log(getMessageRes);
          code = getMessageRes.data.pkg.code;
          curriculumData.value!.push({
            title: createCurrForm.name,
            id: `${createData.pkg}`,
            student: [
              {
                name: '张三',
                email: '123@126.com',
                message: '这是张三同学这是张三同学这是张三同学这是张三同学这是张三同学',
                score: 0,
              }
            ],
            data: [{
              time: createCurrForm.time,
              code: code,
              courseId: createCurrForm.courseId,
              description: createCurrForm.des
            }]
          })
        })
        .catch(error => {
          console.log(error);
        })
      createCurrFormVisible.value = false;
    })
    .catch(error => {
      console.log(error)
    })

}

删除组织

const DeleteCurr = (currIdx: number) => {
  ElMessageBox.confirm('将删除该组织，继续？', 'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    })
    .then(() => {
      let param = new FormData();
      param.append('id', curriculumData.value[currIdx].id);
      request('weblab/organization/deleteOrg', param)
        .then(res => {
          console.log(res);
          if (res.data.msg == 'success') {
            curriculumData.value.splice(currIdx, 1);
          }
        })


    })
    .catch(() => {

    })
}

更新组织信息

const UpdateCurrInfo = (currIdx: number) => {
  updateCurrForm.name = '';
  updateCurrForm.courseId = '';
  updateCurrForm.des = '';
  updateCurrForm.idx = currIdx;
  updateCurrForm.time = ['', ''];
  updateCurrFormVisible.value = true;
}
const ConfirmUpdateCurr = () => {
  let param = new FormData();
  const currData = curriculumData.value[updateCurrForm.idx];
  param.append('id', currData.id);
  param.append('name', updateCurrForm.name);
  param.append('desc', updateCurrForm.des);
  param.append('courseId', updateCurrForm.courseId);
  param.append('beginTime', updateCurrForm.time[0]);
  param.append('endTime', updateCurrForm.time[1]);
  request('/weblab/organization/updateOrg', param)
    .then(res => {
      if (res.data.msg == 'success') {
        console.log(res);
        const data = res.data.pkg;
        currData.title = data.name;
        currData.data[0].courseId = data.courseId;
        currData.data[0].description = data.description;
        currData.data[0].time = [data.beginTime, data.endTime];
        updateCurrFormVisible.value = false;

      }

    })
}

学生端

根据邀请码加入班级

const addOrganization = () => {
  let param = new FormData();
  param.append('code', invitationCode.value);
  request('weblab/organization/getOrgMessageByCode', param)
    .then(res => {
      console.log(res);
      if (res.data.msg == 'success') {
        const data = res.data.pkg;
        if (data != undefined && data != null) {
          ElMessageBox.alert(`是否加入课程${data.name},教师${data.founderName}`, '加入班级', {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
          })
            .then(() => {
              let joinParam = new FormData();
              joinParam.append('orgId', data.id);
              request('weblab/organization/confirmJoinOrg', joinParam)
                .then(res => {
                  if (res.data.msg == 'success') {
                    organizationData.value.push({
                      id: data.id,
                      lesson: data.name,
                      teacher: data.founderName
                    })
                  }
                })
            })
        } else {
          ElMessage({
            showClose: true,
            message: '未找到该课程',
            type: 'error',
            center: true,
            grouping: true
          })
        }

      }
    })

}

退出班级

const deleteOrganization = (val: orgIF) => {
  ElMessageBox.confirm('将删除该课程，继续？', 'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    })
    .then(() => {
      console.log(val);
      let param = new FormData();
      param.append('orgId', val.id);
      request('weblab/organization/confirmQuitOrg', param)
        .then(res => {
          console.log(res);
          if (res.data.msg == 'success') {
            const targetIdx = organizationData.value.findIndex((d) => d == val);
            organizationData.value.splice(targetIdx, 1);
          }
        })

    })
}

发布通知

const releaseNotice = (curr: CurriculumDataIf) => {
  releaseNoticeForm.content='';
  releaseNoticeForm.title='';
  releaseNoticeForm.id=curr.id;
  releaseNoticeFormVisible.value=true;
}
const ConfirmReleaseNotice=()=>{
  let param=new FormData();
  param.append('orgId',releaseNoticeForm.id);
  param.append('name',releaseNoticeForm.title);
  param.append('desc',releaseNoticeForm.content);
  request('weblab/message/createMessage',param)
  .then(res=>{
    console.log(res);
    if(res.data.msg=='success'){
      releaseNoticeFormVisible.value=false;
    }
  })
}