Интерфейс и дизайн
Введение
Разработка фронтенда, то есть того, что визуально обрабатывается браузером, выполняется внутри папки ui.
По умолчанию в этой папке находится среда разработки, созданная на ReactJS с Ant.Design и Less, компилируемая с использованием Vite.
Хотя стандартная среда настроена под эти технологии, поскольку они довольно широко используются сегодня, она не ограничена ими.
Если вы хотите использовать другую технологию, например VueJS, MaterialUI, Sass, Bootstrap, TypeScript и т. д., достаточно изменить внутри папки 📂 ui настройки 📂 package.json и 📂 vite.config.js на предпочитаемые вами технологии.
Подробнее об интегрированном и централизованном терминале.
Предварительные требования
Перед началом важно убедиться, что у вас установлен Bun.
См. как установить Bun.
Чтобы лучше понять, как работает интерфейс использования, рекомендуем:
Расширение сервиса
После создания сервиса работники в 📂 server/services/работники.js через Visual Studio Code, который предоставляет информацию в JSON по адресу:
Следующий шаг — расширить его, чтобы отобразить данные в интерфейсе браузера.
С этими данными мы отобразим их в таблице и на графике.
Предполагая, что у вас открыт Visual Studio Code или другой текстовый редактор с приложением Демо.
Откройте в редакторе следующий файл:
📂 ui/src/containers/КонтейнерПанели/index.jsx
Мы изменим этот существующий код.
Подготовка state
В самом начале компонента КонтейнерПанели внутри function находится определение его state.
Добавьте новую запись для хранения данных работников следующим образом:
// 👇 Добавьте новые строки кода ниже:
const [работники, setРаботники] = useState([]);
const [загрузка, setЗагрузка] = useState(false);
То есть добавьте новую строку состояния const [работники, setРаботники] = useState([]);.
Создание функции загрузитьРаботников
Ниже обратите внимание, что есть функция с именем загрузитьРаботников; эта функция получает данные работников, которые в настоящее время отображаются на дашборде.
Эта функция используется для загрузки данных работников.
Вставьте код ниже:
/**
*** 🚀 Загружает данные работников.
*** Через выполнение сервиса:
** http://localhost:9000/services/работники
*/
const загрузитьРаботников = () => {
setРаботники([]);
setЗагрузка(true);
_service({
url: intl.locale.indexOf('ru') == 0 ? '/services/работники' : '/services/workers',
success: (ответ) => {
setРаботники(ответ.json);
setЗагрузка(false);
},
fail: (ошибка) => {
setЗагрузка(false);
console.error('Ошибка в сервисе работников.', ошибка);
message.error(intl.formatMessage({ id: `${messages}.loading_error` }));
}
});
};
Что делает этот код выше: он передаёт данные работников в state компонента в ReactJS, а именно через выполнение сервиса работники, который, получая данные в JSON, сохраняет их в state через выполнение setРаботники.
Итоговый код должен быть структурирован следующим образом:
useEffect(() => {
...
}, []);
const загрузитьРаботников = () => {
...
}
return (
...
);
Где
...— это различные строки кода, опущенные внутри соответствующих блоков.
Выполнение хука useEffect
Теперь осталось выполнить наш хук useEffect, когда компонент «монтируется»; этот хук выполняется, когда компонент создаётся в визуальном представлении браузера.
Для этого достаточно чуть выше добавить строку кода загрузитьРаботников(); внутри хука useEffect следующим образом:
useEffect(() => {
загрузитьРаботников();
}, []);
Эта новая строка кода вызовет функцию, которая выполняет сервис http://localhost:9000/services/работники, созданный ранее, чтобы получить данные в JSON и сохранить их в state (состояние) компонента для отображения в return (представление).
Компиляция
Сохраните файл и сразу после этого обратите внимание, что в терминале, где запущен Netuno, появится результат новой компиляции ui, с новыми строками результата компиляции ReactJS + Vite.
Ожидаемый вывод в терминале должен быть примерно таким:
> ui@1.0.0 watch netuno/apps/демо/ui
> bunx --bun vite build --watch
vite v7.1.2 building for production...
watching for file changes...
(!) outDir netuno/apps/демо/public is not inside project root and will not be emptied.
Use --emptyOutDir to override.
build started...
transforming...
✓ 4008 modules transformed.
rendering chunks...
computing gzip size...
../public/scripts/ui.js 1,433.96 kB │ gzip: 421.89 kB
built in 2128ms.
Если при компиляции возникнет ошибка, в терминале появится указание на проблему.
До этого момента мы выполняли потребление нашего сервиса работники, при котором полученные данные сохраняются в state компонента КонтейнерПанели, и таким образом становятся доступны для использования в return.
Отображение данных
Осталось визуально отобразить данные в интерфейсе, который пользователь видит в браузере.
Чтобы отобразить данные в браузере, нам нужно изменить return, который обрабатывает визуальный вид компонентов в ReactJS.
В конце кода КонтейнерПанели вы найдёте: return ( ... );
Давайте изменим его, добавив всего одну строку кода для ещё одного компонента ВизуализацияДанных, который будет отображать данные о работниках; код должен выглядеть следующим образом:
// 🔍 Найдите в существующем коде:
return (
<div ref={ref}>
{ загрузка == false ?
<ВизуализацияДанных data={работники} />
: <Spin/>
}
<СписокСервисов />
</div>
);
Обратите внимание, что нужно добавить только строку ниже:
<ВизуализацияДанных data={работники} />
Таким образом, ВизуализацияДанных получит данные, полученные через сервис работники по JSON, которые сохранились в state.
Финальная компиляция
Сохраните файл со всеми изменениями, сделанными до этого момента.
Убедитесь, что в выводе терминала нет ошибок.
Теперь обновите страницу в браузере, и вы должны увидеть окончательный результат, или, как вариант, перейдите по ссылке ниже:
Если дашборд отображается пустым, это означает, что в коде есть ошибки.
Проверьте в консоли браузера в инструментах разработчика, есть ли ошибки.
Узнать больше 👇
Краткое введение в ReactJS: