MERN School Management System
1.0.0
학교 관리 시스템은 MERN(MongoDB, Express.js, React.js, Node.js) 스택을 사용하여 구축된 웹 기반 애플리케이션입니다. 이는 학교 관리, 학급 조직을 간소화하고 학생, 교사 및 행정관 간의 의사소통을 촉진하는 것을 목표로 합니다.
사용자 역할: 시스템은 관리자, 교사, 학생의 세 가지 사용자 역할을 지원합니다. 각 역할에는 특정 기능과 액세스 수준이 있습니다.
관리 대시보드: 관리자는 새로운 학생과 교사를 추가하고, 수업과 과목을 만들고, 사용자 계정을 관리하고, 시스템 설정을 감독할 수 있습니다.
출석 추적: 교사는 수업 출석을 쉽게 확인하고 학생의 출석 또는 결석을 표시하며 출석 보고서를 생성할 수 있습니다.
수행 평가: 교사는 점수와 피드백을 제공하여 학생의 수행을 평가할 수 있습니다. 학생들은 자신의 성적을 확인하고 시간 경과에 따른 진행 상황을 추적할 수 있습니다.
데이터 시각화: 학생들은 대화형 차트와 표를 통해 자신의 학업 성과 데이터를 시각화하여 학업 성과를 한눈에 이해할 수 있습니다.
커뮤니케이션: 사용자는 시스템을 통해 쉽게 커뮤니케이션할 수 있습니다. 교사는 학생에게 메시지를 보낼 수도 있고 그 반대의 경우도 가능하여 효과적인 의사소통과 협력을 촉진할 수 있습니다.
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/schoolMongoDB Compass를 사용하는 경우 이 데이터베이스 링크를 사용할 수 있지만 MongoDB Atlas를 사용하는 경우 이 링크 대신 고유한 데이터베이스 링크를 작성하세요.
터미널 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"가 접두사로 포함된 각 파일을 열고 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" ) ) ;
} )
}deleteHandler 함수는 "View" 접두사가 붙은 파일에서도 찾을 수 있습니다. 해당 파일을 확인하고 동일한 과정을 반복하십시오.문제가 지속되면 언제든지 저에게 연락해 추가 지원을 받으세요.
솔루션이 도움이 되었다면 이 프로젝트에 별표를 남기는 것을 잊지 마세요. 감사합니다!
