api-server

Введение

Уже давно хотел сделать блог, который бы включал в себя как фронтенд, так и бэкенд, чтобы глубже изучить Node.js и MongoDB. Ранее у меня был блог на Hexo, который был удобен в использовании и легко собирался с нуля. Однако, для написания статей требовалось использовать Markdown, что не позволяло легко расширять функциональность. Также я часто сталкивался с различными блогами и изучал открытые исходные коды некоторых из них, и всегда восхищался их работой. Поэтому я решил использовать архитектуру нескольких открытых проектов, включая фронтенд Vue + Nuxt и бэкенд Koa2 + MongoDB + Mongoose.

Описание

• Сепарация фронтенда и бэкенда

• Отличное мобильное взаимодействие

• На данный момент десктопная версия довольно простая

• Креативный дизайн блога, вдохновленный работами многих блогеров, особенно хотелось бы поблагодарить блогеров Elmore, Jooger и jkchao за их открытые проекты, которые помогли мне многому научиться. (Мой дизайн слишком прост, прошу понимания)

• Связаться со мной: email zhongqiang1839@163.com | QQ 289860723

• Адрес блога, Адрес предпросмотра

• Адрес фронтенд проекта на Github, Адрес фронтенд проекта на Gitee

• Адрес бэкенд проекта на Github, Адрес бэкенд проекта на Gitee### Технологический стек

• Фронтенд Nuxt (включает в себя архитектуру Nuxt, в том числе router, axios, vuex и т.д.)

  • LESS
  • BEM
  • Gravatar (сервис для аватарок)
  • marked highlight.js (решение для выделения кода в markdown)
  • v-viewer (функция для просмотра изображений)
  • mavon-editor (редактор markdown, очень крутой)
  • vue-count-to, vue-awesome-swiper, vue-amap (счетчик, слайдер, карта Google)

• Бэкенд

  • koa2 + koa-router
  • koa-bodyparser
  • koa-multer (загрузка файлов)
  • koa-static
  • koa2-cors (решение для CORS)
  • mongoose mongoose-paginate

• Операционное обслуживание

  • pm2 (демон для обслуживания и балансировки нагрузки)
  • pm2 (автоматизация развертывания)
  • nginx (прокси-сервер)

Реализованные функции

• Главная страница + Страница списка + Ответственный боковой панель
• Страница категорий + Страница тегов + Пагинация
• Ответственный дизайн для мобильных устройств
• Пользовательская настройка выделения кода в markdown
• Переключение тем
• Редактирование markdown
• Функция ответов на комментарии

Планируемые функции

• Установка домена, домена, домена
• PWA
• Архивация
• Дружественные ссылки
• CDN для изображений
• Переработка страницы "О нас"

Скриншоты

Мобильная версия

Десктопная версия

Написание статьи

PS: Если вам понравилось, не забудьте поставить звездочку ★ или сделать fork, чтобы посмотреть. Если у вас есть какие-либо предложения, вы можете создать issue.