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

前言

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

项目部署

选择分支、分配容器

<el-dialog v-model="setProjectFormVisible" width="400px">
              <el-form>
                <el-form-item label="选择分支">
                  <el-select v-model="setProjectForm.branch" placeholder="选择分支">
                    <el-option v-for="bs in setProjectForm.branches" :label="bs" :value="bs" />
                  </el-select>
                </el-form-item>
                <el-form-item label="内核数量">
                  <el-input-number v-model="setProjectForm.coreNum" class="mx-4" :min="1" :max="10"
                    controls-position="right" />
                </el-form-item>
                <el-form-item label="内存分配">
                  <el-input-number v-model="setProjectForm.mem" class="mx-4" :min="1" :max="8192"
                    controls-position="right" />
                </el-form-item>
              </el-form>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="setProjectFormVisible = false">取消</el-button>
                  <el-button type="primary" @click="confirmSetProject">确认</el-button>
                </span>
              </template>
            </el-dialog>

const setProject = async (project: projectDataIF) => {
  console.log(project);
  setProjectFormVisible.value = true;
  //TODO: 请求分支
  let param = new FormData();
  param.append('projectId', project.id);
  const res = await request('weblab/project/getProjectWithBranch', param);
  console.log(res.data.pkg);
  setProjectForm.branches.splice(0, setProjectForm.branches.length);
  setProjectForm.id = res.data.pkg.projectID;
  for (let item of res.data.pkg.branchList) {
    console.log(item)
    setProjectForm.branches.push(item);
  }
}
const confirmSetProject = async () => {
  // let param = new FormData();
  // param.append('projectID', setProjectForm.id);
  // param.append('projectID', '2');
  // param.append('branch', setProjectForm.branch);
  // param.append('coreNum',setProjectForm.coreNum);
  // param.append('memoryMB',setProjectForm.mem);
  let param = {
    'projectID': setProjectForm.id,
    'branch': setProjectForm.branch,
    'coreNum': setProjectForm.coreNum,
    'memoryMB': setProjectForm.mem
  }
  console.log(param);
  const res = await jrequest('/sdu-weblab/jenkins/select-branch', JSON.stringify(param));
  console.log(res);
  if (res.data == 'success') {
    ElMessage({
      showClose: true,
      message: '部署成功',
      type: 'success',
      center: true,
      grouping: true
    })
    setProjectFormVisible.value = false;
  }

}

选择数据库及查看现有服务

<el-form>
          <el-form-item label="选择数据库及版本">
            <el-cascader v-model="softwareService.service" :options="softwareOptions" />
          </el-form-item>
          <el-form-item label="服务名称">
            <el-input v-model="softwareService.service_name" style="width:200px;"></el-input>
          </el-form-item>
        </el-form>
        <el-footer>
          <el-button size="large" type="primary" plain @click="submitDB()">
            确定
          </el-button>
        </el-footer>
      </el-tab-pane>
      <el-tab-pane label="现有服务" name="2">
        <el-collapse v-model="activeService" @change="handleServiceChange" accordion>
          <el-collapse-item v-for="item in curService" :name="item.id"
            :title="item.ip + ':' + item.port + '    服务id: ' + item.serviceId">
            <el-input type="textarea" v-model="item.info" rows="15" :readonly="item.disabled"></el-input>
            <el-button @click="reconnect(item)">重新连接</el-button>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>

const activeService = ref('0');
const totalServiceId = ref(0);
interface serviceInfo {
  id: string,
  ip: string,
  port: string,
  info: string,
  wsUrl: string,
  ws: WebSocket,
  serviceId: string,
  disabled: boolean
}
const handleServiceChange = (val: string) => {
  console.log(val);
}
const reconnect = (data: serviceInfo) => {
  data.ws = new WebSocket(data.wsUrl);
  data.ws.onmessage = (val: any) => {
    data.disabled = false;
    data.info += val.data + '\n';
    data.disabled = true;
  };
  data.ws.onerror = () => {
    data.info += '连接发生错误，请重新连接\n';
  };
  data.ws.onopen = () => {
    data.info += '连接成功\n';
  }
}
const activeMarketName = ref('1');
const curService = ref<serviceInfo[]>([]);
const softwareService = ref({
  service: 'MySQL / 18.1.0',
  service_name: ''
});
const softwareOptions = [
  { value: 'MySQL', label: 'MySQL', children: [{ value: '18.1.0', label: '18.1.0' }, { value: '12.2.0', label: '12.2.0' }] },
  { value: 'Oracle', label: 'Oracle', children: [{ value: '12.1.0.2', label: '12.1.0.2' }, { value: '12.2.0.1', label: '12.2.0.1' }] }
]
const onIndexChange = async (idx: string) => {
  activeIndex.value = idx;
  if (idx == '4' && curService.value.length == 0) {
    const res = await request('weblab/project/getServiceList', undefined);
    console.log(res);
    if (res.data.msg == 'success') {
      const data = res.data.pkg;

      for (let item of data) {
        const wsUrl = 'ws://' + item.ip + ':' + item.logWebsocketPort + item.logWebsocketPath;
        console.log(wsUrl);
        curService.value.push({
          id: `${totalServiceId.value++}`,
          ip: 'http://' + item.ip,
          port: item.hostPort,
          info: '',
          wsUrl: wsUrl,
          ws: new WebSocket(wsUrl),
          serviceId: item.serviceId,
          disabled: true
        })
      }
      for (let item of curService.value) {
        item.ws.onmessage = (data: any) => {
          item.disabled = false;
          item.info += data.data + '\n';
          item.disabled = true;
        };
        item.ws.onerror = () => {
          item.info += '连接发生错误，请重新连接\n';
        };
        item.ws.onopen = () => {
          item.info += '连接成功\n';
        }
      }
    }
  }
}