XBoot-front

Автор в основном занимается бэкенд-разработкой, и его опыт в этой области ограничен. Автор будет рад получить исправления, если в тексте есть ошибки.

Видеоролик для продвижения — Автор самостоятельно создал XBoot-видеоролик с мигающей надписью для продвижения (доступен по ссылке: http://www.bilibili.com/av30284667). — Автор также самостоятельно создал видеоролики для продвижения других проектов (доступны по ссылке: https://www.bilibili.com/video/av23121122/).

Веб-сайт — Веб-сайт: http://xb.exrick.cn. — Исходный код веб-сайта: https://github.com/Exrick/xboot-show.

Онлайн-демонстрация — Онлайн-демонстрация: http://xboot.exrick.cn. — Страница для входа с использованием одного аккаунта: http://sso.exrick.cn. — Платформа для аутентификации: http://xboot.exrick.cn/authorize.

Самая полная документация в сети https://www.kancloud.cn/exrick/xboot/content.

Бэкенд проекта — Используемые технологии: Spring Boot 2.x, Spring Security, JWT, Spring Data JPA + Mybatis-Plus, Redis, Elasticsearch, распределённая система ограничения трафика, синхронизация блокировок, проверка подлинности, алгоритм «снежинка» для генерации идентификаторов, динамическое управление правами доступа, управление доступом к данным, генерация кода, ведение журнала, задачи по расписанию, сторонние учётные записи и SMS-логин.

Проект создан на основе Vue-Cli 4.x. Основной компонентный фреймворк основан на iView-admin версии 1.0, в котором исправлены некоторые ошибки. UI-компонентная библиотека обновлена до iView/View UI 4.x. Бэкенд загружает динамические меню с правами доступа и упрощает управление кнопками для отображения. Предоставляются пустые шаблоны Vue, которые требуют только изменения запросов бэкенда и соответствующих полей сущности для завершения разработки страницы. Поддерживаются многоязычность, управление сообщениями, сторонние социальные учётные записи или SMS-логин. В проекте используются иконки из библиотеки ionicons и дополнительные значки из vue-awesome. Предлагаются готовые компоненты с бэкендом, содержащим реальные данные, для использования в бизнес-компонентах XBoot.

Скриншоты предварительного просмотра На ПК:

• Изображение 1: QQ-снимок экрана от 26 августа 2018 года в 16:39:17.
• Изображение 2: QQ-снимок экрана от 26 августа 2018 года в 16:40:58.
• Изображение 3: QQ-снимок экрана от 26 августа 2018 года в 16:41:44.

На iPad Mini 5:

На iPhone X:

Для полного просмотра скриншотов посетите страницу: https://github.com/Exrick/x-boot/wiki/%E5%AE%8C%E6%95%B4%E7%89%88%E6%88%AA%E5%9B%BE%E7%BB%86%E8%8A%82%E5%B1%95%E7%A4%BA.

Архитектура системы

.

Основные используемые технологии

• Vue 2.6.x: официальный сайт на китайском языке: https://cn.vuejs.org/.
• Vue Cli 4.x: официальная китайская документация: https://github.com/vuejs/vue-cli/tree/dev/docs/zh/config.
• Vue Router.
• Vuex.
• vue-i18n: плагин интернационализации и локализации для Vue.js, версия 5.0.x.
• iView/View UI.
• iview-admin.
• iview-area: компонент для городов.
• wangeditor: облегчённый редактор форматированного текста.
• gitalk: плагин для комментариев на основе GitHub Issue.
• vue-stomp.
• vue-json-pretty: инструмент для улучшения JSON.
• Print.js: инструмент для печати.
• ES6.
• webpack.
• axios.
• echarts.
• cookie.
• Сторонние плагины или сервисы:
  • hotjar: комплексный анализ и обратная связь.
  • Vaptcha: верификация человека и машины.

Документация

Первая актуальная информация, документация всегда доступна бесплатно: https://www.kancloud.cn/exrick/xboot/content.

Локальная разработка и запуск

После запуска бэкенда проекта X-Boot необходимо изменить настройки прокси-сервера в файле vue.config.js. Затем выполните команды npm install (если есть ошибка, используйте cnpm) и npm run dev. Интерфейс доступен по адресу http://localhost:9999.

Развёртывание

Выполните команду npm install, затем npm run build. Скопируйте файлы из папки dist на сервер Nginx. Настройте обратный прокси. Файлы ресурсов можно разместить в папке resources проекта Spring Web или другой подобной, чтобы избежать проблем с междоменными запросами (не рекомендуется). Подробные инструкции по настройке Nginx см. в документации по разработке.

Руководство по разработке и описание стека технологий

• XBoot Frontend Development Configuration and Deployment Instructions [Must Read] (https://github.com/Exrick/xboot-front/wiki/XBoot%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E9%85%8D%E7%BD%AE%E5%8F%8A%E9%83%A8%E7%BD%B2%E8%AF%B4%E6%98%8E%E3%80%90%E5%BF%85%E8%AF%BB%E3%80%91).
• How to Use XBoot Frontend Vue Template for Quick Development of Add, Modify, and Delete Pages (https://github.com/Exrick/xboot-front/wiki/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8XBoot%E5%89%8D%E7%AB%AFVue%E6%A8%A1%E6%9D%BF%E5%BF%AB%E9%80%9F%E5%BC%80%E5%8F%91%E5%A2%9E%E5%88%A0%E6%94%B9%E9%A1%B5%E9%9D%A2).
• Top Menu with Four Styles and Position Switching (https://github.com/Exrick/xboot-front/wiki/%E9%A1%B6%E9%83%A8%E8%8F%9C%E5%8D%95%E5%9B%9B%E7%A7%8D%E6%A0%B7%E5%BC%8F%E4%BD%8D%E7%BD%A2%E5%88%87%E6%8D%A2).
• Homepage Follows Top Menu Switching (https://github.com/Exrick/xboot-front/wiki/%E9%A6%96%E9%A1%B5%E8%B7%9F%E9%9A%8F%E9%A1%B6%E9%83%A8%E8%8F%9C%E5%8D%95%E5%88%87%E6%8D%A2).
• Global Configuration of Data Dictionary (https://github.com/Exrick/xboot-front/wiki/%E6%95%B0%E6%8D%AE%E5%AD%97%E5%85%B8%E5%85%A8%E5%B1%80%E4%BD%BF%E7%94%A8%E9%85%8D%E7%BD%AE). Изучение записей (обновление)

1. Унифицированная обработка исключений в запросах axios.

2. Динамическая загрузка меню маршрутизатора.

3. Многомерное управление правами доступа для отображения кнопок.

4. Реализация отправки сообщений через Websocket, отображение красных точек в правом верхнем углу окна сообщений в реальном времени.

5. Операции с динамическими компонентами на одной странице.

Развёртывание кластера фронтенда в Docker (обновление).

Развёртывание бэкенд-кластера см. в проекте x-boot.

1. Установка и основные команды Docker.

2. Построение кластера Nginx.

3. Развёртывание и настройка балансировки нагрузки кластера XBoot фронтенд.

Другие проекты автора.

— XMall: приложение для мобильных устройств WeChat, исходный код уже открыт!

[![WX20190924-234416@2x.png](https://s2.ax1x.com/2019/10/06/ucEsBD.md.png)](https://www.bilibili.com/video/av70226175).

— XMall: распределённый торговый центр электронной коммерции на основе SOA.

![](https://ooo.0o0.ooo/2018/07/22/5b54615b95788.jpg).

— XPay: система приёма платежей без необходимости ввода данных карты.

— Заметки по машинному обучению. — Machine-Learning.

Техническая консультация и обмен мнениями.

— QQ-группа для общения 475743731 (платная). Можно получить подробные текстовые и графические документы по каждому проекту, ответы на вопросы.

.

— Бесплатная группа для общения 562962309.

.

— Блог автора: http://blog.exrick.cn.

Пожертвования.