1分鐘完成在線測試部署便捷收集班級同學文件的web管理系統

  • 2022 年 11 月 7 日
  • 筆記

最近CSDN推出了一個新功能【雲IDE】,個人對這個新功能(比賽獎金 )挺感興趣的🤭,於是瞬速地拿之前自己搞的一個便捷收集班級同學文件的web管理系統(下面簡稱該項目為cfile)體驗了一下,發現功能還是挺好用的,讓自己或其他對自己項目的人可以快捷地了解自己的項目部署和跑起來的demo是怎麼樣!

以下是具體使用的操作步驟:

一、創建項目

直接fork別人的項目,不用自己創建,想使用別人的項目搭建個demo環境可以使用這種方式

例如,想使用cfile項目搭建個測試環境,可以直接打開cfile項目地址://gitcode.net/weixin_37610397/1024 ,然後點擊下面截圖的上紅框fork,去fork這個項目 (如果覺得這個項目可以,也麻煩幫忙點擊一下fork旁邊的start 給個關注!)
cfile fork步驟

如果自己有github或gitlab相關的項目,可以進入CSDN的git地址://gitcode.net/,然後進行創建項目,創建項目的時候,我們一般選擇自己導入項目就可以了,可以導入自己github上的項目
在這裡插入圖片描述
在這裡插入圖片描述

二、進入雲IDE

在創建完項目後,可以直接在自己的項目鏈接地址上前面加上 ide ,然後回車,例如: //gitcode.net/weixin_37610397/1024 變成 //idegitcode.net/weixin_37610397/1024 ,進入添加ide後的鏈接中

進入ide,鏈接上添加文字

就會自動給該項目創建一個帶有VS Code編輯器的容器,該容器自動帶有mysql8.0,node ,npm ,java11 ,maven 等相關軟體了

項目內的ide

三、構建部署項目

如果項目是fork的,例如fork了cfile項目//gitcode.net/weixin_37610397/1024 ,項目中帶有自動構建文件preview.yml,則自動等待項目自己構建部署完成,等待部署完成後,就會自動打開已經部署好的demo環境,例如下圖即為部署好的介面,點擊截圖中紅框部分就可以在瀏覽器中看到對應項目部署後的demo環境
部署完成後的介面
cfile部署完成後介面

如果項目是自己的項目或者項目中沒 preview.yml 自動部署文件,則需要自己在項目中添加preview.yml 自動部署文件了,具體示例preview.yml如下,根據自己項目特點替換下面對應內容即可

# preview.yml
autoOpen: true # 打開工作空間時是否自動開啟所有應用的預覽
apps:
  - port: 3000 # 應用的埠
    run: npm i && npm run dev # 應用的啟動命令
    command: # 使用此命令啟動服務,且不執行run
    root: ./ # 應用的啟動目錄
    name: 1024雲IDE挑戰賽項目 # 應用名稱
    description: 1024雲IDE挑戰賽項目。 # 應用描述
    autoOpen: true # 打開工作空間時是否自動開啟預覽(優先順序高於根級 autoOpen

總結

以上就是CSDN新功能雲IDE的介紹了,用來做項目的demo搭建還是挺方便的,不過目前容器能選擇的容器鏡像只有一個固定了mysql版本和java版本等,如果想使用其他版本或其他軟體,只能自己在項目啟動時進行安裝部署,有點麻煩。另外目前雖然是免費的,但是不確保後面該功能是否會收費,希望後面盡量不要收費為好,這個功能還是挺別人熟悉一個項目的

回到標題,按照文章中的三個步驟,如果選擇 cfile項目//gitcode.net/weixin_37610397/1024 進入fork,fork後然後進入雲IDE,就可以1分鐘內完成部署便捷收集班級同學文件的web管理系統了。

這個系統是我自己之前大學臨近畢業時花了10天左右時間寫的,後面現在又花了1天左右完善一下相關bug,當時因為自己是班裡班委和某些科的課代表,經常要收集班裡同學的作業、實驗報告和照片等,所以便做了這個項目想著可以方便自己或他人去收集這些文件,不用每個人到手動發送郵件或微信,而且要去統計等。不過最後由於自己已經臨近畢業了,最後這個項目也沒有怎麼用起來。具體的項目介紹可以進入項目中查看 //gitcode.net/weixin_37610397/1024