https://github.com/danteck-dev/ems_frontend_reactjs
Клиентская часть разработана на React. Приложение позволяет взаимодействовать с API для управления сотрудниками, поддерживает добавление, редактирование и удаление данных через удобный интерфейс.
https://github.com/danteck-dev/ems_frontend_reactjs
axios bootstrap5 css3 html5 javascript reactjs
Last synced: 2 months ago
JSON representation
Клиентская часть разработана на React. Приложение позволяет взаимодействовать с API для управления сотрудниками, поддерживает добавление, редактирование и удаление данных через удобный интерфейс.
- Host: GitHub
- URL: https://github.com/danteck-dev/ems_frontend_reactjs
- Owner: DANTECK-dev
- License: mit
- Created: 2025-01-16T17:29:00.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-01-18T13:02:04.000Z (over 1 year ago)
- Last Synced: 2025-01-18T14:22:58.548Z (over 1 year ago)
- Topics: axios, bootstrap5, css3, html5, javascript, reactjs
- Language: JavaScript
- Homepage:
- Size: 191 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Employee Managment Sysytem (EMS) Frontend (ReactJS)
Это фронтенд-приложение для управления сотрудниками, реализованное с использованием React. Оно взаимодействует с серверной частью, построенной на Spring Boot, и базой данных MySQL. Приложение позволяет добавлять, изменять и удалять информацию о сотрудниках.
>Ссылка на [BackEnd](https://github.com/DANTECK-dev/ems-springboot-react-backend)
## Стек технологий
- **React**: Основной фреймворк для разработки пользовательского интерфейса.
- **Axios**: Библиотека для выполнения HTTP-запросов к API.
- **React Router DOM**: Для управления маршрутизацией в приложении.
- **Bootstrap**: Для стилизации компонентов и создания адаптивного дизайна.
## Основные возможности
1. **Добавление сотрудников**:
- Форма для ввода имени, фамилии и email сотрудника.
- Отправка данных на сервер через API.
2. **Редактирование сотрудников**:
- Возможность выбора сотрудника из списка.
- Обновление данных через соответствующую форму.
3. **Удаление сотрудников**:
- Кнопка для удаления сотрудника из базы данных.
- Отправка DELETE-запроса на сервер.
4. **Список сотрудников**:
- Отображение всех сотрудников, полученных из базы данных MySQL.
- Адаптивный интерфейс для удобной работы на различных устройствах.
## Установка и запуск
### 1. Клонирование репозитория
```bash
git clone https://github.com/your-repository/ems-frontend.git
cd ems-frontend
```
### 2. Установка зависимостей
Убедитесь, что у вас установлен Node.js. Затем выполните команду:
```bash
npm install
```
### 3. Запуск приложения
```bash
npm start
```
Приложение будет доступно по адресу [http://localhost:3000](http://localhost:3000).
## Конфигурация
Для взаимодействия с сервером необходимо указать базовый URL API. Это можно сделать в файле `src/services/EmployeeService.js`:
```javascript
import axios from "axios";
const EMPLOYEE_API_BASE_URL = 'http://localhost:8080/api/v1/employees';
const EmployeeService = {
//////////////////////////////
};
export default EmployeeService;
```
## Структура проекта
- **`src/components`**: Компоненты React.
- **`src/services`**: Конфигурация API и взаимодействие с сервером.
## Скрипты
- `npm start` — Запуск приложения в режиме разработки.
- `npm run build` — Сборка приложения для продакшена.
- `npm test` — Запуск тестов.
## Зависимости
- `axios` — Для выполнения HTTP-запросов.
- `react-router-dom` — Для маршрутизации.
- `bootstrap` — Для стилизации.
- `react` и `react-dom` — Основные библиотеки React.
## Скриншоты
### Главная страница
### Добавление сотрудника
### Добавленый сотрудник
### Редактирование сотрудника
### Новый отредактированный сотрудник
### Автор
- Cтудент **Александр Немеров**
- Вуз **ВСГУТУ**
- Группа **Б761-2**
- Связь **lol@kek-work.ru**
### Лицензия
Проект распространяется под лицензией [MIT LICENSE](LICENSE).