Два года назад автор разработалnodejsполный стек с открытым исходным кодомcmsсистемаXPCMS, в основном для устранения ограничений разработчиков технологий, создающих собственную платформу контента, и снижения стоимости использования.Хотя версия 1.0 была завершена, все еще есть много недостатков с точки зрения удобства общего развертывания и вторичной разработки, и она более подходит для разработки с определенными техническими возможностями.
чтобы решитьXPCMSВ прошлом году автор и мои друзья специально разработали легкую и удобную систему управления контентом——simpleCMS, в настоящее время находится вgithubС открытым исходным кодом и может адаптироваться как для ПК, так и для мобильных устройств.
Есть много зрелыхcmsсистемы, такие какworldPress, система блоговhexo, Техническим разработчикам очень просто использовать и развертывать, но с точки зрения настройки и пользовательского расширения требуются определенные технические пороги и затраты на разработку.
Основываясь на вышеупомянутых болевых точках и ограничениях, мы разработали полный стек, который прост в использовании и, естественно, поддерживает рендеринг на стороне сервера (SSR).cmsсистема, так что вы можете легко настроить свой собственный веб-сайт блога.Автор возьмет вас для анализа его вместеsimpleCMSфункции и технические реализации.
Техническая архитектура и схема реализации
Чтобы сократить расходы на использование и развертывание, мы внедрили следующие технологии:
- Сервисный уровень:koa2 + nodejs + jsonSchema(Конечно, их много.
nodejsпромежуточное ПО) - Титульная страница:pug(комбинированный
nodejsРеализовать изоморфизм интерфейсов и серверов, а также естественныйssr) - Управление за кулисами:umi3.0 + react + antd + axios + typescript(Конечно, используются многие интерфейсные плагины, такие как форматированный текст,
mdредактор) - Связанные с системой/сервером:linux / pm2 / nginx
Базовый архитектурный шаблон показан на следующем рисунке:Схема архитектуры системной страницы:
Функциональный анализ
Далее автор представитsimpleCMSФункциональная точка Давайте сначала проанализируем систему фонового управления.
Функциональный анализ системы фонового управления
Система управления фоном является необходимым модулем для динамической системы блогов, которая может легко управлять данными нашего веб-сайта Здесь автор сначала рассмотрит основные модули системы управления фоном:
- страница авторизации
- диск данных
- Управление содержанием
- конфигурация страницы
- Конфигурация объявления
- Управление информацией о пользователях
- Многоязычная поддержка
ВышеcmsНеобходимые модули системы управления, здесь мы в основном используемreact hooksЧтобы написать, конкретная страница выглядит следующим образом:
- страница авторизации
2. Панель данных
3. Управление статьями
4. Редактирование контента
5. Многоязычная поддержка
Другие страницы не отображаются одна за другой, и заинтересованные друзья могут ознакомиться с ними.Основная технология принимаетumi + antd + react + typescriptреализации, заинтересованные могут быть найдены наgithubУзнайте из справки.
Анализ основных функций стойки регистрации
Стойка регистрации в основном является нашим веб-сайтом блога, здесь мы используемpugЭтот механизм шаблонов реализован, а интерактивная функция использует наиболее знакомыйjquery.Основными модулями стойки регистрации являются:
- Блог Главная
- Страница со списком статей
- Страница сведений о статье
Соответствующие интерактивные функцииподобно, Комментарий, Поиск статьиФункции и т. д., основная страница выглядит следующим образом:
- титульная страница
2. Страница со списком
3. Страница сведений
4. Комментарии и лайки
из-заpugМеханизм шаблонов подходит для некоторых экранных веб-сайтов, поэтому он очень удобен для использования вcmsсистема, мы также можем использоватьejsи другие шаблонизаторы.
Детали технической реализации
из-за всегоcmsСистема представляет собой полный технический замкнутый цикл, и поток данных связан.Здесь автор в основном резюмирует реализациюcmsТехнические подробности.
- Реализация функции статистики данных - использование
nodejsДела по расписанию (node-schedule) - Реализация расширенного текста и md-редактора
- Фоновая многоязычная схема реализации
- Дизайн процесса управления контентом
-
pugВзаимодействие шаблонов и данных -
jsonSchemaпроектирование структуры данных - Рукописный простой алгоритм шифрования и дешифрования
- Междоменные решения и дизайн прав пользователей
-
pm2управлятьnodeбалансировка процессов и нагрузки - Параллельная конструкция блокировки в сценарии с несколькими процессами
Реализация функции статистики данных
Статистика данных в основном предназначена для подсчета pv веб-сайта, количества прочтений и лайков одной статьи. Чтобы лучше анализировать данные за один день, нам нужно подсчитывать и хранить данные за один день. реализация заключается в использовании задач по времени для сбора данных до конца дня статистика, здесь мы используемnode-scheduleДля этого в предыдущей статье также был представлен конкретный метод использования, вы можете обратиться к нему, если вам интересно.Основное использование заключается в следующем:
let schedule = require('node-schedule');
let testJob = schedule.scheduleJob('42 * * * *', function(){
console.log('将在未来的每个时刻的42分时执行此代码, 比如22:42, 23:42');
});
Внедрение форматированных текстовых и md-редакторов
Компонент расширенного текста, который мы используем здесь,braft, функциональность и масштабируемость в основном соответствуют потребностям бизнеса,mdРедактор — это основной способ ведения блогов программистами, здесь мы в основном используемfor-editor, а второй - дважды инкапсулировать его для поддержки функции сдвига панели.
план интернационализации
В основном используется на нескольких языкахreact-intl, из-заumiОн имеет хорошую интеграцию, поэтому нам нужно построить только базовые многоязычные правила, например, построить в каталоге проектаlocalesпапку, а затем сохранитьzh(Китайский язык)/en(английский) файл достаточно,
Основной код выглядит следующим образом:
// locales/en/user
export default {
simpleCMS_DESC: 'Easy to use CMS system, help everyone to have their own website blog.',
CopyrightText: 'SimpleCMS r&d team',
}
// locales/zh/user
export default {
simpleCMS_DESC: '简单易用的cms系统, 助力每个人都能拥有自己的网站博客。',
CopyrightText: 'SimpleCMS 研发团队'
}
Если вас интересует многоязычная реализация, вы можете обратиться кsimpleCMSисходный код.
Позже я продолжу писать соответствующие статьи, чтобы представить конкретный план реализации.Если вам интересно, вы можете продолжать обращать внимание и общаться.
адрес гитхаба:портал
Партнер по разработке SimpleCMS
- Путь, отвечающий за закулисное управление исследованиями и разработками, Nuggets:Талант /user/412502…
- Ху Сяолэй, ответственный за разработку блога Nuggets:Талант /user/129268…
- Дуанг, отвечающий за общий дизайн пользовательского интерфейса cms, ведет блог:miaochenhao.com/
наконец
найти его полезным? Любимый, если хотите, кстатиотличныйЧто ж, ваша поддержка - моя самая большая поддержка! Поиск в WeChat »Интересный разговор о фронтенде», откройте для себя больше интересных игр H5, webpack, node, gulp, css3, javascript, nodeJS, визуализацию данных на холсте и другие интерфейсные знания и реальный бой.