Загрузка 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/)

О

Система управления школой — это веб-приложение, созданное с использованием стека MERN (MongoDB, Express.js, React.js, Node.js). Он направлен на оптимизацию управления школой, организацию классов и облегчение общения между учениками, учителями и администраторами.

Функции

Роли пользователя: Система поддерживает три роли пользователя: администратор, учитель и ученик. Каждая роль имеет определенные функции и уровни доступа.
Панель администратора: администраторы могут добавлять новых учеников и преподавателей, создавать классы и предметы, управлять учетными записями пользователей и контролировать настройки системы.
Отслеживание посещаемости: учителя могут легко отслеживать посещаемость своих занятий, отмечать учащихся как присутствующих или отсутствующих, а также создавать отчеты о посещаемости.
Оценка успеваемости: Учителя могут оценивать успеваемость учащихся, выставляя оценки и отзывы. Учащиеся могут просматривать свои оценки и отслеживать свой прогресс с течением времени.
Визуализация данных: учащиеся могут визуализировать данные о своей успеваемости с помощью интерактивных диаграмм и таблиц, что помогает им с первого взгляда понять свою успеваемость.
Коммуникация: пользователи могут легко общаться через систему. Учителя могут отправлять сообщения ученикам и наоборот, способствуя эффективному общению и сотрудничеству.

Используемые технологии

Фронтенд: React.js, Material UI, Redux
Бэкенд: Node.js, Express.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/school

Если вы используете MongoDB Compass, вы можете использовать эту ссылку на базу данных, но если вы используете MongoDB Atlas, вместо этой ссылки напишите свою собственную ссылку на базу данных.

Терминал 2: Настройка внешнего интерфейса

 cd frontend
npm install
npm start

Теперь перейдите к localhost:3000 в вашем браузере. Backend API будет работать по адресу localhost:5000 .

Ошибка Решение

При регистрации вы можете столкнуться с ошибкой: либо сетевой ошибкой, либо ошибкой загрузки, которая продолжается неопределенное время.

Чтобы решить эту проблему:

Перейдите к frontend > .env .
Раскомментируйте первую строку. После этого завершите работу внешнего терминала. Откройте новый терминал и выполните следующие команды:

 cd frontend
npm start

После выполнения этих действий попробуйте зарегистрироваться еще раз. Если проблема не устранена, выполните следующие дополнительные действия для ее решения:

Перейдите к frontend > src > redux > userRelated > userHandle.js .
Добавьте следующую строку после операторов импорта:

 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 .
Если вы не вносили никаких изменений, вы должны найти функцию deleteUser в строке 71. Ее можно закомментировать. Это может выглядеть так:

 // 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 и закомментируйте эту функцию deleteUser , которая в данный момент выполняется со строки 87 по строку 90:

 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 . В других файлах с префиксом «Показать» все может быть иначе.
Раскомментируйте закомментированный код внутри функции 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». Проверьте эти файлы и повторите тот же процесс.

Если проблема не исчезнет, свяжитесь со мной для получения дальнейшей помощи.

Не забудьте поставить звездочку этому проекту, если решение показалось вам полезным. Спасибо!