MERN School Management System下載 - MERN School Management System原始碼下載

MERN School Management System

其他類別

1.0.0

下載

學校管理系統

簡化學校管理、班級組織，並增加學生和教師。
無縫追蹤出勤情況、評估績效並提供回饋。
輕鬆存取記錄、查看標記並進行交流。

[Youtube 影片](https://youtu.be/ol650KwQkgY?si=rKcboqSv3n-e4UbC)

[LinkedIn](https://www.linkedin.com/in/yogndr/)

關於

學校管理系統是一個基於 Web 的應用程序，使用 MERN（MongoDB、Express.js、React.js、Node.js）堆疊建構。它旨在簡化學校管理、班級組織，並促進學生、教師和管理人員之間的溝通。

特徵

使用者角色：系統支援三種使用者角色：管理員、教師和學生。每個角色都有特定的功能和存取等級。
管理儀表板：管理員可以新增學生和教師、建立班級和科目、管理使用者帳戶以及監督系統設定。
出席追蹤：教師可以輕鬆記錄課堂出席情況，將學生標記為出席或缺勤，並產生出勤報告。
表現評估：教師可以透過提供分數和回饋來評估學生的表現。學生可以查看他們的分數並追蹤他們隨時間的進展。
數據視覺化：學生可以透過互動式圖表將自己的成績數據視覺化，幫助他們一目了然地了解自己的學業成績。
溝通：使用者可以透過系統輕鬆溝通。教師可以向學生發送訊息，反之亦然，促進有效的溝通和協作。

使用的技術

前端：React.js、Material UI、Redux
後端：Node.js、Express.js
資料庫：MongoDB

安裝

git clone https://github.com/Yogndrr/MERN-School-Management-System.git

在單獨的視窗/標籤中開啟 2 個終端。

終端 1：設定後端

 cd backend
npm install
npm start

在後端資料夾中建立一個名為 .env 的檔案。在裡面寫下這樣的內容：

MONGO_URL = mongodb://127.0.0.1/school

如果您使用 MongoDB Compass，則可以使用此資料庫鏈接，但如果您使用 MongoDB Atlas，則不用此鏈接編寫您自己的資料庫鏈接。

Terminal 2：設定前端

 cd frontend
npm install
npm start

現在，在瀏覽器中導航到localhost:3000 。後端 API 將在localhost:5000運行。

錯誤解決方法

您在註冊時可能會遇到錯誤，可能是網路錯誤，也可能是無限期持續的載入錯誤。

解決方法：

導覽至frontend > .env檔。
取消第一行的註解。之後，終止前端終端。打開一個新終端機並執行以下命令：

 cd frontend
npm start

完成這些步驟後，請嘗試重新註冊。如果問題仍然存在，請按照以下附加步驟解決問題：

導覽至frontend > src > redux > userRelated > userHandle.js檔案。
在 import 語句後面加入以下行：

 const REACT_APP_BASE_URL = "http://localhost:5000" ;

將process.env.REACT_APP_BASE_URL的所有實例替換為REACT_APP_BASE_URL 。

重要資訊：對名稱中包含“Handle”的所有其他檔案重複相同的過程。

例如，在redux資料夾中，還有其他資料夾，例如userRelated 。在teacherRelated資料夾中，您將找到一個名為teacherHandle的檔案。同樣，其他資料夾包含名稱中帶有“Handle”的檔案。請確保也更新這些文件。

出現此問題的原因是前端中的.env檔案可能不適用於所有用戶，但它適用於我。

另外：

測試項目時，請先註冊，而不是以訪客身分登入或使用常規登入（如果您尚未建立帳戶）。
若要使用訪客模式，請導覽至LoginPage.js並提供系統中已建立的項目的電子郵件和密碼。這簡化了登入過程，建立帳戶後，您可以使用您的憑證。

這些步驟應該可以解決前端的網路錯誤。如果問題仍然存在，請隨時與我聯繫以獲取進一步協助。

刪除功能不起作用的解決方案

嘗試刪除項目時，您可能會遇到一條彈出訊息，指出「抱歉，刪除功能暫時已停用」。出現此訊息是因為我在即時網站上停用了刪除功能，以防止訪客刪除項目。如果您想啟用刪除功能，請依照下列步驟操作：

導覽至frontend > src > redux > userRelated > userHandle.js檔案。
如果您沒有進行任何更改，您應該在第 71 行找到deleteUser函數。它可能看起來像這樣：

 // export const deleteUser = (id, address) => async (dispatch) => {
//     dispatch(getRequest());

//     try {
//         const result = await axios.delete(`${process.env.REACT_APP_BASE_URL}/${address}/${id}`);
//         if (result.data.message) {
//             dispatch(getFailed(result.data.message));
//         } else {
//             dispatch(getDeleteSuccess());
//         }
//     } catch (error) {
//         dispatch(getError(error));
//     }
// }

取消上面的deleteUser函數的註釋，並註解掉目前正在運行的第87行到第90行的這個deleteUser函數：

 export const deleteUser = ( id , address ) => async ( dispatch ) => {
    dispatch ( getRequest ( ) ) ;
    dispatch ( getFailed ( "Sorry the delete function has been disabled for now." ) ) ;
}

如果您之前修改過程式碼，您可能會在不同的行中找到deleteUser函數。在這種情況下，請取消註解原始程式碼並註解掉目前程式碼。
接下來，導覽至frontend > src > pages > admin資料夾。在這裡，您會發現後綴為“相關”的不同資料夾。打開每個資料夾並找到前綴為“Show”的檔案。
打開每個以“Show”為前綴的檔案並蒐索名為deleteHandler函數。例如：

 const deleteHandler = ( deleteID , address ) => {
  console . log ( deleteID ) ;
  console . log ( address ) ;
  setMessage ( "Sorry, the delete function has been disabled for now." ) ;
  setShowPopup ( true ) ;
  // dispatch(deleteUser(deleteID, address))
  //   .then(() => {
  //     dispatch(getAllSclasses(adminID, "Sclass"));
  //   })
}

這是ShowClasses的範例片段。在其他以“Show”作為前綴的文件中，它可能有所不同。
取消deleteHandler函式內被註解掉的程式碼的註釋，並註解掉現有的程式碼。它應該類似於這樣：

 const deleteHandler = ( deleteID , address ) => {
  // console.log(deleteID);
  // console.log(address);
  // setMessage("Sorry, the delete function has been disabled for now.");
  // setShowPopup(true);
  dispatch ( deleteUser ( deleteID , address ) )
    . then ( ( ) => {
      dispatch ( getAllSclasses ( adminID , "Sclass" ) ) ;
    } )
}