前言
项目地址
本项目是为开发一套容器化的开发、运行、测试环境,用以支持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;
}