山东大学软件学院项目实训weblab-14

前言

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

学生项目管理

获取已有项目

const handleProjectTabClick = (pane: TabsPaneContext, ev: Event) => {
  if (pane.paneName == '3' && projectData.value.length == 0) {
    request('/weblab/project/getProjectList', undefined)
      .then(res => {
        if (res.data.msg == 'success') {
          const data = res.data.pkg;
          for (let item of data) {
            projectData.value.push({
              id: item.id,
              projectName: item.name,
              introduction: item.description,
              date: item.lastModifyTime.slice(0, 10),
              url: item.url,
              detail: {
                outputlog: '',
                introduction: '',
                files: []
              }
            })
          }
        }
      })
    
  }
}

创建项目

//添加项目
const addProject = () => {
  createProjectFormVisible.value = true;
}
const confirmAddProject = () => {
  createProjectFormVisible.value = false;
  let param = new FormData();
  param.append('name', createProjectForm.name);
  param.append('description', createProjectForm.description);
  request('weblab/project/createProject', param)
    .then(res => {
      if (res.data.msg == 'success') {
        const data = res.data.pkg;
        projectData.value.push({
          id: data.id,
          projectName: data.name,
          introduction: data.description,
          date: getFormDate(),
          url: data.url,
          detail: {
            outputlog: '',
            introduction: '',
            files: []
          }
        })
      }
    })
    .catch(error => {
      console.log(error);
    })

}

删除项目

const deleteProject = () => {
  ElMessageBox.confirm('将删除选中的项目，继续？', 'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    })
    .then(() => {

      // projectData.value = projectData.value.filter((x) => !selectedProject.value!.some((item) => x.projectName === item.projectName));
      for (let data of selectedProject.value!) {
        let param = new FormData();
        param.append('projectId', data.id);
        request('/weblab/project/deleteProjectByProjectId', param)
          .then(res => {
            console.log(res);
            if (res.data.msg == 'success') {
              projectData.value = projectData.value.filter(item => item !== data);
            }
          })
          .catch(error => {
            console.log(error);
          })
      }
      projectTableRef.value!.clearSelection();

    })

}

websocket获取项目运行输出日志

//查看项目详情
const showProjectDetail = (data: projectDataIF) => {
  const idx = projectData.value.findIndex(item => item == data);
  selectedProjectDetail.value = projectData.value[idx].detail;
  let param=new FormData();
  param.append('projectId',data.id);
  request('weblab/project/getProjectLogUrl',param)
  .then(res=>{
    console.log(res);
    if(res.data.msg=='success'){
      selectedProjectDetail.value!.wsUrl=res.data.pkg;
      if(selectedProjectDetail.value!.ws==undefined){
        selectedProjectDetail.value!.ws=new WebSocket(res.data.pkg);
        selectedProjectDetail.value!.ws.onmessage=onMsg;
      }
    }
  })
  showDetail.value = true;
}
const closeProjectDetail = () => {
  showDetail.value = false;
  selectedProjectDetail.value?.ws?.close();
}
//websocket
const onMsg=(data:any)=>{
  console.log(data);
  selectedProjectDetail.value!.outputlog+=data;
}