MERN School Management System
1.0.0
Das Schulverwaltungssystem ist eine webbasierte Anwendung, die auf dem MERN-Stack (MongoDB, Express.js, React.js, Node.js) basiert. Ziel ist es, die Schulverwaltung und Klassenorganisation zu optimieren und die Kommunikation zwischen Schülern, Lehrern und Administratoren zu erleichtern.
Benutzerrollen: Das System unterstützt drei Benutzerrollen: Administrator, Lehrer und Schüler. Jede Rolle verfügt über spezifische Funktionalitäten und Zugriffsebenen.
Admin-Dashboard: Administratoren können neue Schüler und Lehrer hinzufügen, Klassen und Fächer erstellen, Benutzerkonten verwalten und Systemeinstellungen überwachen.
Anwesenheitsverfolgung: Lehrer können ganz einfach die Anwesenheit für ihre Kurse erfassen, Schüler als anwesend oder abwesend markieren und Anwesenheitsberichte erstellen.
Leistungsbewertung: Lehrer können die Leistung der Schüler bewerten, indem sie Noten und Feedback geben. Die Schüler können ihre Noten einsehen und ihren Fortschritt im Laufe der Zeit verfolgen.
Datenvisualisierung: Schüler können ihre Leistungsdaten mithilfe interaktiver Diagramme und Tabellen visualisieren und so ihre akademischen Leistungen auf einen Blick verstehen.
Kommunikation: Benutzer können mühelos über das System kommunizieren. Lehrer können Nachrichten an Schüler senden und umgekehrt und so eine effektive Kommunikation und Zusammenarbeit fördern.
git clone https://github.com/Yogndrr/MERN-School-Management-System.gitÖffnen Sie 2 Terminals in separaten Fenstern/Registerkarten.
Terminal 1: Backend einrichten
cd backend
npm install
npm startErstellen Sie eine Datei mit dem Namen .env im Backend-Ordner. Schreiben Sie darin Folgendes:
MONGO_URL = mongodb://127.0.0.1/schoolWenn Sie MongoDB Compass verwenden, können Sie diesen Datenbanklink verwenden. Wenn Sie jedoch MongoDB Atlas verwenden, schreiben Sie anstelle dieses Links Ihren eigenen Datenbanklink.
Terminal 2: Frontend einrichten
cd frontend
npm install
npm start Navigieren Sie nun in Ihrem Browser zu localhost:3000 . Die Backend-API wird unter localhost:5000 ausgeführt.
Möglicherweise tritt bei der Anmeldung ein Fehler auf, entweder ein Netzwerkfehler oder ein Ladefehler, der auf unbestimmte Zeit anhält.
Um es zu beheben:
Navigieren Sie zum frontend > .env Datei.
Kommentieren Sie die erste Zeile aus. Beenden Sie anschließend das Frontend-Terminal. Öffnen Sie ein neues Terminal und führen Sie die folgenden Befehle aus:
cd frontend
npm startVersuchen Sie nach Abschluss dieser Schritte erneut, sich anzumelden. Wenn das Problem weiterhin besteht, führen Sie die folgenden zusätzlichen Schritte aus, um es zu beheben:
Navigieren Sie zur Datei frontend > src > redux > userRelated > userHandle.js .
Fügen Sie nach den Importanweisungen die folgende Zeile hinzu:
const REACT_APP_BASE_URL = "http://localhost:5000" ;process.env.REACT_APP_BASE_URL durch REACT_APP_BASE_URL .WICHTIG: Wiederholen Sie den gleichen Vorgang für alle anderen Dateien mit „Handle“ im Namen.
Im redux -Ordner gibt es beispielsweise andere Ordner wie userRelated . Im Ordner teacherRelated finden Sie eine Datei mit dem Namen teacherHandle . Ebenso enthalten andere Ordner Dateien mit „Handle“ im Namen. Stellen Sie sicher, dass Sie auch diese Dateien aktualisieren.
Das Problem entsteht, weil die .env Datei im Frontend möglicherweise nicht für alle Benutzer funktioniert, während sie bei mir funktioniert.
Zusätzlich:
Wenn Sie das Projekt testen, beginnen Sie mit der Registrierung, anstatt sich als Gast anzumelden oder die reguläre Anmeldung zu verwenden, wenn Sie noch kein Konto erstellt haben.
Um den Gastmodus zu verwenden, navigieren Sie zu LoginPage.js und geben Sie eine E-Mail-Adresse und ein Passwort aus einem bereits im System erstellten Projekt ein. Dies vereinfacht den Anmeldevorgang und nach der Erstellung Ihres Kontos können Sie Ihre Zugangsdaten verwenden.
Diese Schritte sollten den Netzwerkfehler im Frontend beheben. Wenn das Problem weiterhin besteht, können Sie mich gerne kontaktieren, um weitere Hilfe zu erhalten.
Wenn Sie versuchen, Elemente zu löschen, wird möglicherweise die Popup-Meldung „Leider ist die Löschfunktion vorerst deaktiviert“ angezeigt. Diese Meldung wird angezeigt, weil ich die Löschfunktion auf meiner Live-Site deaktiviert habe, um zu verhindern, dass Gäste Elemente löschen. Wenn Sie die Löschfunktion aktivieren möchten, befolgen Sie bitte diese Schritte:
Navigieren Sie zur Datei frontend > src > redux > userRelated > userHandle.js .
Wenn Sie keine Änderungen vorgenommen haben, sollten Sie die Funktion deleteUser in Zeile 71 finden. Sie ist möglicherweise auskommentiert. Es könnte so aussehen:
// 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 -Funktion und kommentieren Sie diese deleteUser -Funktion aus, die derzeit von Zeile 87 bis Zeile 90 ausgeführt wird: export const deleteUser = ( id , address ) => async ( dispatch ) => {
dispatch ( getRequest ( ) ) ;
dispatch ( getFailed ( "Sorry the delete function has been disabled for now." ) ) ;
} Wenn Sie den Code zuvor geändert haben, finden Sie die deleteUser -Funktionen möglicherweise in verschiedenen Zeilen. Kommentieren Sie in diesem Fall den ursprünglichen Code aus und kommentieren Sie den aktuellen aus.
Navigieren Sie als Nächstes zum Ordner frontend > src > pages > admin . Hier finden Sie verschiedene Ordner mit dem Zusatz „Related“. Öffnen Sie jeden Ordner und suchen Sie nach Dateien mit dem Präfix „Anzeigen“.
Öffnen Sie jede Datei mit „Show“ als Präfix und suchen Sie nach einer Funktion namens deleteHandler . Zum Beispiel:
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"));
// })
} Dies ist ein Beispielausschnitt von ShowClasses . In anderen Dateien mit „Show“ als Präfix kann es abweichen.
Kommentieren Sie den auskommentierten Code in der deleteHandler -Funktion aus und kommentieren Sie den vorhandenen Code aus. Es sollte etwa so aussehen:
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" ) ) ;
} )
}deleteHandler -Funktion auch in Dateien mit dem Präfix „View“ gefunden werden. Überprüfen Sie diese Dateien und wiederholen Sie den gleichen Vorgang.Wenn das Problem weiterhin besteht, können Sie mich gerne kontaktieren, um weitere Hilfe zu erhalten.
Vergessen Sie nicht, diesem Projekt einen Stern zu hinterlassen, wenn Sie die Lösung hilfreich fanden. Danke schön!
