Разработка персонального сайта «Имитация Mac» ｜Обзор проекта

预览.gif

Введение

Если у вас есть лучшие идеи или вы заинтересованы, присоединяйтесь к нам, чтобы бросить и бросить 👏🏻👏🏻👏🏻👏🏻👏🏻

Род занятий: Front-end, back-end (нода), UI (слишком сложно придумать красивый интерфейс)

Технология: просто как бросание (новичок не может держать его 🐶🐶🐶)

Расположение: предпочтительно Ханчжоу (если вам нужна линия удобства ниже базы)

1.1 Источники вдохновения

В первые годы мне посчастливилось увидеть один, сделанный иностранными воротилами.Настольная развлекательная система Windows XP с веб-интерфейсом, В то время у меня как раз была идея создания личного блога, поэтому я задавался вопросом, смогу ли я реализовать личный блог, имитирующий Mac UI на основе WEB, и отображать различные функции блога в виде приложений!

1.2 Ссылки по теме

Интерфейс с открытым исходным кодом:GitHub.com/traction925/…
Бэкенд с открытым исходным кодом:GitHub.com/traction925/…
Библиотека компонентов (независимая библиотека компонентов извлекается при разработке проекта):GitHub.com/traction925/…
Онлайн-предварительный просмотр (гости имеют ограниченный доступ для просмотра всех приложений):www.qianyin925.com/

2. Зачем писать этот проект

Применяйте то, что вы узнали, к конкретным проектам и поддерживайте все зависимости и версии фреймворка проекта как можно более актуальными, чтобы быть в курсе последних знаний.
Лично я считаю, что только постоянное мышление и мозговой штурм могут способствовать лучшему росту.Благодаря глубокому анализу продуктов, архитектуры, пользовательского интерфейса, взаимодействия, развертывания проекта, управления требованиями и т. д. в проекте мы можем расширить наши возможности.
Опыт внутренней (узловой) разработки и понимание общего процесса работы каждого функционального модуля.
Реализация некоторых ваших собственных причудливых идей в конкретных проектах может принести вам полное чувство выполненного долга и поддерживать энтузиазм в отношении технологий в любое время.

...

Три стека технологий

3.1 Передняя часть

использоватьReact HooksКодируйте функциональные компоненты и используйте новую версиюAntdразвивать
Используйте личную библиотеку компонентовqyrcВыполнение разработки проекта и инкапсуляция некоторых компонентов проекта вqyrcи опубликовать
использоватьReduxуправлять государством и использоватьredux-sagaРешить асинхронную проблему
использоватьSassпрепроцессор для написания стилей
использоватьWebpackСоздайте проект с нуля и завершите базовую настройку проекта.
использоватьEslintСтандартизируйте синтаксис и стиль кода
использоватьhusky + commitlintТехнические характеристикиgit commitОтправить информацию

3.2 Серверная часть

использоватьGraphql + KoaСоздайте бэкэнд-систему
использоватьMongo + mongooseдля хранения внутренних данных
использоватьnode-rsaПароль для входа пользователяrsaШифрование и дешифрование
использоватьjsonwebtokenАутентифицировать пользователя (JWT)
использоватьtinifyСжать загруженные изображения
использоватьcronДля управления системными запланированными задачами (в настоящее время реализовано ежедневное запланированное резервное копирование системных данных)
использоватьnodemailerРеализовать функцию отправки почты (в основном используется для резервного копирования данных, отправка резервных данных в указанный почтовый ящик)
использоватьpm2Развертывание внутреннего основного проекта и запланированных задач
использоватьboxen + inquirer + ora + shelljs + chalkдля достижения интерактивногоnpmСкрипт, необязательные сценарии включают в себя: резервное копирование данных, восстановление данных, авторизацию роли, создание ключа, создание временногоToken...
использоватьwinstonВедение журнала, включая генерацию файла журнала, распечатку журнала терминала, согласованиеwebsocketВизуальное отображение журналов на внешнем интерфейсе
использоватьdocker + docker-composeКонтейнер способом для развертывания проекта

4. Скриншоты системы

4.1 Редактор

Используется для управления личными статьями, каталог слева эквивалентен файлуtag
Завершенные функции: статьи и оглавление (tag) CRUD, публикация статей, настройки эскизов, предварительный просмотр...

4.2 Дневник (данные на рисунке ниже являются смоделированными данными)

Используется для записи повседневной жизни, веса, жировых отложений, диеты, упражнений, счетов
Завершенные функции: добавление, удаление, изменение и проверка данных, историческая статистика доходов и расходов, статистика ежедневных счетов, статистика физических признаков (физические признаки, жировые отложения)...

4.3 Расширенная функция сенсорной панели Mac (данные на рисунке ниже являются смоделированными данными)

Отображение ежедневного веса и ежемесячных расходов на сенсорной панели Mac

4.4 Управление изображениями

Используется для управления ресурсами системных изображений, включая иллюстрации к статьям, миниатюры, аватары по умолчанию, обои для рабочего стола...
Завершенные функции: пакетная загрузка, удаление и сжатие изображений (внутренняя реализация)

4.5 Системные настройки

Используется для установки системных настроек
Для реализации функций: настройки автоматического скрытия док-станции, отображение значков в полноэкранном режиме в строке меню, отображение недели в строке меню, настраиваемый формат даты в строке меню.

4.6 Управление словарем данных

Используется для управления данными полей системных данных. Реализованы функции: добавление данных, удаление, изменение, запрос...

4.7 Панель системных уведомлений

Имитация MAC-уведомления, отображающая пользовательскую информацию (включая функцию выхода), прогноз погоды ... Реализация Функция: Информация о пользовательской информации (включая функцию выхода)

4.8 Регистрация журнала

Используется для просмотра информации журнала, выводимой фоновой службой в режиме реального времени (реализация веб-сокета). Реализованные функции: сбор и отображение журнала

5. Список дел

Читатель: для отображения, запроса и чтения статей блога.
Управление разрешениями: установка разрешений с помощью ролей (в настоящее время устанавливается с помощью сценариев)
Управление сценариями: добавляйте, удаляйте, изменяйте и проверяйте указанные онлайн-скрипты, можно настроить их на регулярный запуск и выполнить, отправив спецификации в окне чата.
Музыкальный проигрыватель: воспроизведение музыки (попробуйте получить доступ к облаку Netease)
Модуль комментариев: добавьте функцию сообщения в панель уведомлений, добавьте функцию комментария к статье, добавьте функцию ответа на сообщение комментария в фоновом режиме, а рабочий стол может открыть функцию заграждения (сообщения).
Графические функции: онлайн-редактирование блок-схем, интеллект-карт...
Конфигурация системы: настройки обоев рабочего стола, реализация динамических обоев (canvas,webGL)…
Мониторинг системы: мониторинг журналов, мониторинг системных ресурсов, внешние и внутренние скрытые точки...

...

Эта статья участвует в «Весенней рекрутинговой кампании Nuggets 2021», нажмите, чтобы просмотретьсведения о деятельности