Блог Yunheng

Блог Yunheng — система блога с разделением фронтенда и бэкенда, основанная на архитектуре микросервисов

Введение

Этот проект представляет собой многопользовательскую систему блога, которую я недавно разработал. Бэкенд основан на микросервисах на Java с использованием Spring Cloud, а фронтенд разработан с использованием Vue.

Я буду рассматривать этот проект как открытый проект и буду постоянно его поддерживать.

Затем я буду использовать GitHub Pages для публикации статей, объясняющих содержание различных модулей проекта, таких как управление правами доступа, архитектурное проектирование, пользовательские AOP и т.д.

Все желающие могут оставлять Issues, а также помогать голосовать за проект, спасибо!

Описание проекта- Блог Yunheng — система блога с разделением фронтенда и бэкенда, основанная на архитектуре микросервисов.

• Фронтенд разработан с использованием Vue + Element, а бэкенд — с использованием Spring Boot + Spring Cloud + MyBatis-Plus.
• Используется Jwt + Spring Security + Redis для аутентификации и проверки прав доступа.
• Используется ElasticSearch как сервис поиска.
• Поддерживается загрузка файлов на Qiniu Cloud и хранение статических файлов на локальном сервере Nginx.
• Используется RabbitMQ как очередь сообщений.
• В базе данных используется MySQL Sharding для разделения на таблицы и базы данных, основной базой данных является MySQL, а Redis используется как кэш, что позволяет эффективно использовать кэш и увеличивать пропускную способность системы.
• Код проекта прост и структурирован, с четкими ограничениями.
• Модули разделены четко, что позволяет достичь высокой степени декомпозиции.## Демонстрация сайта

Демонстрация фронтенда

Админ-панель

[Демонстрационный аккаунт](hy2020 123456)

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

Настройка запуска

Блог Yunheng использует некоторые компоненты мониторинга Spring Cloud, но не все они требуются для запуска. Обязательные для запуска службы включают hy_admin, hy_web, hy_picture, hy_sms, hy_search, hy_gateway.

Остальные JAR-файлы можно не запускать, что не влияет на нормальную работу.

Рекомендуемая конфигурация: 2 ядра, 4 ГБ ОЗУ

Основные характеристики проекта- Дружественная структура кода и комментарии, что облегчает чтение и вторичное развитие.

• Реализация разделения фронтенда и бэкенда, с использованием JSON для взаимодействия данных, фронтенд больше не зависит от технологий бэкенда.
• Взаимодействие страниц использует Vue 2.x, что значительно повышает эффективность разработки.
• Введение поддержки Swagger документации, что облегчает написание документации API.
• Введение RabbitMQ для сообщений, используемое для отправки электронной почты, обновления Redis и Elasticsearch.
• Введение JustAuth для открытой библиотеки авторизации сторонних сервисов, поддерживающей вход через аккаунты Gitee и GitHub.
• Введение ElasticSearch для полнотекстового поиска, с поддержкой конфигурируемых плагинов.
• Введение облачного хранилища Qiniu, с поддержкой локального хранения файлов через nginx.
• Введение RBAC для управления правами доступа, с гибким контролем прав, до уровня кнопок, что удовлетворяет большинство требований к правам доступа.
• Введение Zipkin для отслеживания транзакций, что позволяет быстро определить сервисы с высокой задержкой.
• Использование пользовательских аннотаций для проверки параметров, что облегчает проверку параметров на бэкенде.
• Создание пользовательских аспектов AOP с использованием аннотаций для проверки прав доступа, ограничения трафика, записи логов действий и т. д.- Использование Nacos в качестве центра управления конфигурациями и сервисами, что облегчает управление конфигурациями проекта.
• Использование Sentinel для управления трафиком, что позволяет легко защитить сайт от атак.## Документация проекта

Адрес документации: в процессе написания (я планирую завершить это в ближайшее время)

Адрес проекта

Проект временно хостится на платформах Gitee и Github, всем приветствуется поддержка в виде звезд и форков!

• Адрес на Github: https://github.com/hzh0425/yunheng_blog
• Адрес на Gitee: https://gitee.com/zisuu/yunheng_blog

Описание директорий

• hy_admin: предоставляет API-интерфейсы для административного конца;
• hy_web: предоставляет API-интерфейсы для веб-конца;
• hy_picture: служба для загрузки и скачивания изображений;
• hy_sms: служба для отправки сообщений, используется для обновления ElasticSearch, Redis, электронной почты и SMS;
• hy_search: служба поиска, ElasticSearch используется как инструмент полнотекстового поиска;
• hy_commons: модуль общего назначения,主要用于存放实体类、Feign远程调用接口以及公共配置;
• hy_utils: содержит часто используемые утилиты;
• hy_xo: содержит VO, Service и слои Dao;
• hy_base: содержит базовые классы;
• doc: содержит конфигурационные файлы для MySQL, Docker, Nacos и т.д.;
• hy_monitor: служба мониторинга, интегрирована с SpringBootAdmin для управления и мониторинга SpringBoot-приложений;
• hy_spider: служба для парсинга данных (в настоящее время не завершена);
• hy_gateway: служба шлюза;
• hy_zipkin: служба трассировки транзакций, в настоящее время запускается с помощью java -jar;
• vue_hy_admin: страницы управления backend на Vue;
• vue_hy_web: веб-портал на Vue.## Технический выбор### Схема архитектуры системы### Технологии backend| Технология | Описание | Официальный сайт | | :------------------: | :-------------------------: | :----------------------------------------------------------: | | SpringBoot | MVC-фреймворк | https://spring.io/projects/spring-boot | | SpringCloud | Микросервисный фреймворк | https://spring.io/projects/spring-cloud/ | | SpringSecurity | Фреймворк аутентификации и авторизации | https://spring.io/projects/spring-security | | MyBatis-Plus | ORM-фреймворк | https://mp.baomidou.com/ | | Swagger-UI | Инструмент для создания документации | https://github.com/swagger-api/swagger-ui | | Kibana | Платформа анализа и визуализации | https://www.elastic.co/cn/kibana | | Elasticsearch | Поисковый движок | https://github.com/elastic/elasticsearch | | Solr | Поисковый движок | http://lucene.apache.org/solr/ | | RabbitMQ | Система очередей | https://www.rabbitmq.com/ | | Redis | Распределенная кэшированная система | https://redis.io/ | | Docker | Фреймворк контейнеризации | https://www.docker.com | | Druid | Фреймворк подключения к базе данных | https://github.com/alibaba/druid | | Qiniu Cloud | Qiniu Cloud - Система хранения объектов | https://developer.qiniu.com/sdk#official-sdk | | JWT | Поддержка аутентификации JWT | https://github.com/com/jwtk/jjwt | | SLF4J | Фреймворк логирования | http://www.slf4j.org/ | | Lombok | Инструмент упрощения работы с объектами | https://github.com/rzwitserloot/lombok | | Nginx | HTTP и обратный прокси-сервер | http://nginx.org/ | | JustAuth | Инструмент для работы с третьими сторонами | https://github.com/justauth/JustAuth | | Hutool | Библиотека Java-инструментов | https://hutool.cn/docs/#/ | | АлиДаю | Платформа отправки SMS | https://doc.alidayu.com/doc2/index.htm | | Github Actions | Автоматизация развертывания | https://help.github.com/en/actions | | Zipkin | Отслеживание трассировки | https://github.com/openzipkin/zipkin | | Flexmark-java | Преобразование Markdown в HTML | https://github.com/vsch/flexmark-java | | Ip2region | Библиотека для офлайн-определения IP-адреса | https://github.com/lionsoul2014/ip2region |### Фронтенд-технологии| Технология | Описание | Официальный сайт | | :--------------------------: | :-----------------------: | :----------------------------------------------------------: | | Vue.js | Фронтенд-фреймворк | https://vuejs.org/ | | Vue-router | Фреймворк маршрутизации | https://router.vuejs.org/ | | Vuex | Фреймворк управления глобальным состоянием | https://vuex.vuejs.org/ | | Element | Фронтенд-фреймворк UI | https://element.eleme.io | | Axios | Фронтенд-фреймворк HTTP | https://github.com/axios/axios | | ECharts | Фреймворк для графиков | www.echartsjs.com | | mavon-editor | Редактор Markdown | https://www.jianshu.com/p/78ea4f94a3d0 | | highlight.js | Плагин подсветки синтаксиса кода | https://github.com/highlightjs/highlight.js | | tui-editor | Редактор Markdown | https://github.com/nhn/tui.editor | | vue-cropper | Компонент для обрезки изображений | https://github.com/xyxiao001/vue-cropper | | vue-image-crop-upload | Компонент для обрезки и загрузки изображений в Vue | https://github.com/dai-siki/vue-image-crop-upload | | vue-emoji-comment | Vue Emoji-компонент для комментариев | https://github.com/pppercyWang/vue-emoji-comment | | clipboard.js | Современный компонент для копирования текста | http://www.clipboardjs.cn/ || js-beautify | Плагин для форматирования кода на JavaScript | https://github.com/beautify-web/js-beautify | | FileSaver.js | Плагин для сохранения файлов на клиенте | https://github.com/eligrey/FileSaver.js | | vue-side-catalog | Компонент навигационного меню | https://www.jb51.net/article/179514.htm |## Запуск проекта

Бэкенд

1. Импортируйте скрипты базы данных из папки doc в базу данных MySQL.

2. Вытяните проект на свой компьютер и импортируйте его в IntelliJ IDEA. В терминале введите:

mvn clean install -Dmaven.wagon.http.ssl.insecure=true -Dmaven.wagon.http.ssl.allowall=true

3. Импортируйте конфигурационный файл Nacos из папки doc в собственный Nacos, измените адреса всех служб в конфигурации (например, rabbitmq, redis и т.д.).

4. Измените файл bootstrap.yml в каждом модуле, заменив адрес Nacos на свой адрес.

5. Запустите hy_gateway, hy_admin, hy_sms, hy_search, hy_web.

Примечание: запуск только hy_gateway и hy_admin также возможен, но некоторые специфические функции не будут работать.

После запуска можно открыть интерфейс swagger-ui, например для admin:

localhost:8601/swagger-ui.html

Фронтенд

1. Импортируйте vue_hy_admin в VS.

2. В терминале введите:

# Используйте зеркальный источник npm для ускорения загрузки в Китае (предупреждения можно игнорировать)
npm install --registry=https://registry.npm.taobao.org

# Запустите проект
npm run dev

3. После завершения откроется страница администратора.

4. Если возникли ошибки, такие как "node-sass module not found" или "xxx module not found", выполните:

npm install xxxxx --save

5. Для vue_hy_web шаги аналогичны.

Установка окружения

Разработка| Инструмент | Описание | Официальный сайт |

| :-----------------: | :-------------------: | :----------------------------------------------------------: | | IntelliJ IDEA | IDE для Java | https://www.jetbrains.com/idea/download | | Visual Studio | IDE для фронтенда | https://code.visualstudio.com/ | | Redis Desktop Manager | Визуализация Redis | https://redisdesktop.com/download | | SwitchHosts | Управление локальными хостами | https://oldj.github.io/SwitchHosts/ | | Xshell | Инструмент для удаленного подключения к Linux | https://xshell.en.softonic.com/ | | Xftp | Инструмент для передачи файлов в Linux | https://www.netsarang.com/zh/all-downloads/ | | SQLyog | Инструмент для подключения к базе данных | https://sqlyog.en.softonic.com/ | | ScreenToGif | Инструмент для записи GIF-анимации | https://www.screentogif.com/ |### Окружение разработки| Инструмент | Версия | Скачать | | :-----------------: | :------: | :----------------------------------------------------------: | | JDK | | https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html | | Elasticsearch | 6.3.0 | https://www.elastic.co/downloads | | Spring Cloud | H версия | https://spring.io/projects/spring-cloud/ | | MySQL | 8.0 | https://www.mysql.com/ | | Erlang | 20.3 | https://www.erlang.org/ | | RabbitMQ | 3.7.4 | http://www.rabbitmq.com/download.html | | Nginx | 1.10 | http://nginx.org/en/download.html | | Redis | 3.3.0 | https://redis.io/download | | Docker | 1.13.1 | https://www.docker.com/ |## Благодарности

Всем привет от тех, кто оставляет issue!

Планы на будущее- [x] Добавить страницу входа на портал

• Поддержка входа через третьи стороны
• Интеграция ElasticSearch
• Хранение изображений на Qiniu Cloud
• Создание модуля комментариев
• Уровневое управление правами доступа для кнопок
• Добавление эмодзи для комментариев
• Добавление управления словарем данных
• Добавление личного кабинета пользователя на фронтенде
• Добавление документа FAQ с часто задаваемыми вопросами
• Использование Sentinel для ограничения трафика и отказоустойчивости сервисов
• Добавление проекта мобильного приложения для блога YunHeng (uniapp_hy_web), основанного на ColorUI и Uniapp
• Интеграция GitHub Actions для обеспечения непрерывной интеграции сервиса YunHeng Blog
• Улучшение управления облачным хранилищем
• Добавление истории обновлений
• Улучшение модуля шлюза
• Использование технологии Freemark для статической генерации страниц блога
• Позволить публикациям статьей быть синхронизированными на нескольких платформах, таких как CSDN, JianGuo, и блоги на Яндексе
• Добавление функции миграции блога, чтобы блоги на других платформах, таких как CSDN, блоги на Яндексе, и WordPress, могли быть синхронизированы на блоге YunHeng
• Адаптация мобильной версии портала## Внесение вклада

Открытые проекты не могут существовать без поддержки сообщества. Если у вас есть идеи или реализации кода, пожалуйста, подайте Pull Request!

1. Fork этого проекта в свой репозиторий
2. Клонируйте forkнутый проект в вашей локальной системе
3. Измените код
4. После коммита push в свой репозиторий
5. Отправьте запрос на слияние (pull request) в ветку dev
6. Подождите, пока авторы примут ваш вклад

Поддержка

Покупка и продление серверов и доменов требуют определенных затрат. Чтобы поддерживать проект в рабочем состоянии, если вы считаете, что этот проект помог вам, пожалуйста, поддержите нас. Большое спасибо!

Скриншоты

Веб-конечная точка

Админ-конечная точка