Реализовать проект полного стека CMS от 0 до 1 на основе nodeJS (включено)

внешний интерфейс

Как фронтенд-разработчик, помимо накопления javascript, css и html, нам также необходимо иметь некоторые знания о http, принципах браузерного рендеринга и даже некоторые знания о бэкенде, которые будут более полезны для наш карьерный рост.

Предыстория проекта

Поскольку я очень интересуюсь фронтендом и раньше имел дело с фронтендом, я обычно использую фронтенд-технологию, чтобы делать интересные вещи, включая игры H5, упаковку некоторых простых фреймворков, проектирование строительных лесов и др. Также в статье есть более подробное введение. В последнее время, поскольку я надеюсь обобщить технические приемы технологии Node Server, Vue и React Hooks, я также надеюсь, что смогу сделать несколько практических проектов и открыть их для улучшения, оптимизации и повторения вместе.

Итак, основываясь на этой идее, я подумал о CMS.Можем ли мы сделать такую ​​систему и создать свой собственный веб-сайт блога с помощью некоторой конфигурации? Хотя есть много лучших систем блогов, которые можно использовать, например, hexo и т. д., вы также можете обратиться к этим превосходным исходным кодам с открытым исходным кодом, и вы много выиграете.

Технологическая архитектура

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

  • Сервер: NodeJs + Koa + Redis + Json-Schema
  • Фон управления: Vue-cli3 + vue + vuex + typescript + axios + antd
  • Первая страница: WP (скаффолдинг на основе webpack) + React + axios + antd
  • Развертывание онлайн: PM2 + Nginx
  • Управление кодом: git

Для реакции мы будем использовать последние основы реактивных хуков и научим их базовому использованию. Схема технической архитектуры:

(Эта картинка нарисована с помощью adobeXD, больше навыков и больше обменов)

Достижение результатов и ключевые технические моменты Введение

1.Строительство узлового сервера

Здесь мы используем Koa, относительно легкий серверный фреймворк от сообщества узлов, а затем серверное промежуточное ПО включает в себя:

  • ramdaФункциональная библиотека, предоставляющая элегантные методы вызова для реализации бизнес-логики, адресаramda
  • koa-staticОбеспечьте доступ к статическим ресурсам, конкретное использование будет подробно описано в деталях реализации проекта.
  • koa-loggerКонсоль выводит лог запросов, что удобно для отладки при разработке
  • koa-bodyОбработайте сообщение запроса, чтобы коа мог легко получить данные post/put
  • koa-sessionОбработка операций, связанных с сеансом
  • koa2-corsОбрабатывайте междоменные проблемы с помощью cors во время локальной совместной отладки.
  • ioredisКлиент Redis на базе nodejs имеет отличную производительность и режим работы.
  • jsonschemaПроверьте формат данных json, здесь я использую для инкапсуляции схемы в виде redis
  • multerИспользуется для обработки загрузки файлов
  • koa-routerИспользуется для написания маршрутизации на стороне сервера и API.
  • bcryptЗашифровать пароль пользователя

Вышеупомянутое промежуточное программное обеспечение в основном используется нашим веб-сервером.Что касается того, как организовать и структурировать каждую часть, включая реализацию промежуточного программного обеспечения для проверки ошибок, я представлю их по одному позже, потому что я также консультировался с большим количеством информации в процессе. написания сервера.Если есть какие-либо недостатки или области, которые необходимо оптимизировать, добро пожаловать на общение.

Сервер примерно разделен на следующие уровни:

Он в основном делится на уровень данных, уровень обслуживания и базовый уровень структуры.

2. Система фонового управления

Система фонового управления в основном использует экологию, связанную с vue. Я буду использовать typescript и vuex для организации и управления кодом и статусом проекта. Основные модули включают модуль входа в систему, контроль разрешений, страницу конфигурации блога, страницу написания и модификации статьи, страницу статистики данных. и т. д. Сторонний пользовательский интерфейс принимает antd, эффект следующий:

Модуль входа:

Домашний модуль:

Страница предварительного просмотра: поддержка ПК и мобильного предварительного просмотра

Затем ключевым моментом является то, как поддерживать данные конфигурации и дизайн структуры данных конфигурации, потому что, учитывая, что функция предварительного просмотра и отредактированное состояние дизайна являются как синхронными, так и асинхронными, 80% нашего бизнеса выполняется в vuex. Wangeditor используется для редактирования статей, вы также можете использовать другие лучшие редакторы форматированного текста для достижения и мощных функций. Схема эффекта выглядит следующим образом:

В общем, система управления фоном, созданная Vue, в основном использует основные библиотеки vuex, vue-router, antd, axios и wangeditor. Typescript в основном используется для проверки типов, которая в основном включает определение типов интерфейса. Первая версия будет не требует дополнительных знаний, таких как дженерики, но потребует небольшого наследования интерфейса. Использование компонентов на странице и инкапсуляция пользовательских компонентов также будут подробно описаны позже.Если у вас есть лучшее мышление и опыт, вы можете больше общаться.

3. Реализация переднего плана CMS

Для реализации интерфейса я в основном использую экологию, связанную с реакцией, для ее реализации. Также можно использовать для этого vue. Основная причина в том, что я хочу просмотреть и в дальнейшем использовать хуки реакции для достижения некоторых интересных вещей. Используемые технологии: response-router-dom, antd, axios, react-hooks. Если вы хотите попробовать использовать redux, вы также можете использовать его. Позже я также подытожу соответствующие статьи и технические навыки.

Теоретически эта часть включает в себя рендеринг на стороне сервера, потому что важным моментом продуктов C-стороны является SEO, поэтому технические реализации, связанные с ssr, будут добавлены позже. В настоящее время каркасный экран используется для реализации технологии псевдо-SSR.

Затем мы используем create-react-app для скаффолдинга проекта, но мы обобщаем и разрабатываем скаффолдинг на основе вебпака.Если вам интересен вебпак, вы можете исследовать тайну вебпака вместе. Поскольку все настраивают страницу по-своему, здесь я показываю сайт блога, настроенный через нашу систему управления:

наконец

Поскольку в последнее время в свободное время я занимаюсь оптимизацией и настройкой кода проекта, настройкой сервера nginx и оптимизацией производительности сервера, я надеюсь, что заинтересованные друзья смогут вместе поучаствовать в создании более совершенной CMS. Позже я более подробно расскажу о конкретном процессе реализации и деталях системы и конфигурации, связанной с сервером, включая адрес проекта с открытым исходным кодом. Я сообщу вам до ноября. Добро пожаловать, присоединяйтесь к нам в общедоступном аккаунте «Интересно». Фронтенд" для обсуждения.

больше рекомендаций

Категории