muteki
- Описание
- Vue3.0 — это шаблон управления backend, основанный на Spring Boot и Vue, который позволяет разделить frontend от backend. Также он может быстро создавать интерфейсы для передачи данных (RESTful API) для frontend.
- Код прошёл проверку в соответствии с правилами оформления кода Alibaba на 90%, а также был использован FindBugs.
- Веб-конечная точка поддерживает вход с нескольких устройств одновременно, позволяя отдельно обслуживать каждое устройство.
- Управление пользователями, ролями, департаментами, правами доступа, меню и журналами.
- Есть версия на Vue3 Ant Design Vue и Vue2 Element.
- Проект полностью открытый, лицензирован под MIT.
- Блестите, как метеор!
- Документация постоянно обновляется...
Ниже приведены руководства, которые помогут вам установить и запустить этот проект на вашем локальном компьютере для разработки и тестирования. Для получения информации о том, как развернуть этот проект в онлайн-среде, обратитесь к разделу "Развертывание".
Требования к установке и шаги
-
Установите и настройте Java среду, JDK 1.8
-
Установите MySQL 8, создайте базу данных (utf8mb4, utf8mb4_general_ci) и импортируйте SQL (в папке doc).
-
Установите Redis, просто скачайте и установите.
-
Разработка требует установки плагина Lombok (рекомендуется использовать IDE IntelliJ IDEA).
-
---Запуск back-end (обычно проблемы возникают из-за неправильной конфигурации источников данных в YAML файлах конфигурации).
-
Установите и настройте Node.js среду.
-
Установите Vue CLI, перейдите в директорию Vue и выполните npm install
.
-
---Запуск front-end npm run serve
(WebStorm или IntelliJ IDEA могут запустить его через зелёный треугольник слева от строки 6 в файле package.json).### Адрес демонстрационной версии
-
Онлайн-адрес демонстрационной версии
версия ant-design-vue, vue3.0, ant-design-vue2.0.0
версия element, vue2.5
Логин |
Пароль |
superadmin |
111111 |
admin |
111111 |
admin1 |
111111 |
- Подсказка: при одновременной авторизации нескольких пользователей один из них может быть вынужден выйти из системы; только суперадминистратор имеет доступ ко всем страницам.
- Подсказка: в демонстрационной среде некоторые операции добавления, удаления и изменения были заблокированы.
- Подсказка: если возникают другие ошибки, попробуйте принудительно обновить страницу (возможно, проблема связана с кэшированием); если это не помогает, сообщите об этом в issues. * Документация API
- swagger-bootstrap
-
Подсказка: добавьте
/muteki
перед запросом, запрос будет содержать ошибку времени, поэтому добавьте t=текущее время в запрос.
Развертывание
- В папке
springboot
выполните команду mvn clean package
, чтобы создать артефакты. После сборки сгенерированные файлы будут находиться в директории /target/build
:
- Папка
config
предназначена для хранения конфигурационных файлов
- Папка
lib
содержит зависимости Maven в виде JAR-файлов
- Папка
static
используется для хранения статических файлов
- JAR-файл — это сгенерированный JAR-пакет (если зависимости pom не меняются, можно заменять только этот JAR-файл)
- В папке
vue
выполните команду npm run build
, чтобы создать артефакты. После сборки сгенерированные файлы будут находиться в директории /dist
:
- Настройки сборки указаны в файлах
*.env
и vue.config.js
- На сервере для развертывания требуется установка среды JDK1.8, mysql 8 и redis
- Для запуска JAR-файла используйте команду
nohup java -jar springboot.jar &
. Это позволит запустить приложение в фоновом режиме и выводить логи в файл nohup.out
текущей директории
- Рекомендуется настроить nginx на сервере для развертывания. Vue-приложение после сборки следует поместить под nginx. Без настройки nginx статические файлы можно расположить в папке
static
рядом с JAR-файлом## Часто встречающиеся ошибки
-
java.lang.RuntimeException: Cannot resolve classpath entry: E:\maven-repository\mysql\mysql-connector-java\8.0.15\mysql-connector-java-8.0.15.jar
- Ошибка: При генерации сущностей на основе базы данных
- Решение: Измените путь до JAR-файла на строке 6 в файле resources/config/generator-config.xml### Бэкенд:
Spring Boot, MyBatis, Redis
- Обзор
- Проект создан на основе шаблона Spring Boot
- Базовая конфигурация
- Конфигурацию можно указывать в файлах .yml
- Папка config содержит часто используемые модули
- Правила фильтрации указаны в файле filter. Они включают в себя cross-origin и фильтрацию параметров
-
Фильтрация параметров: автоматически удаляет пробелы перед и после запроса, использует библиотеку Jsoup для удаления HTML-тегов (можно настраивать уровень фильтрации)
- Управление правами доступа
- Интерфейсы, аннотированные
@AuthToken
, требуют наличия token в заголовках запросов
- Совместно используются с Vue-страницами для динамического отображения маршрутов и кнопок. Кнопки хранятся в
this.$globalFun.getSessionStorage('buttonMap')
(фронтенд)
- Доступ предоставляется на уровне конкретного API, если нет token, то маршрут или кнопка будут недоступными
- Упрощённые CRUD-методы, расширяющие BaseService
- Методы
baseInsert()
и baseUpdate()
автоматически фильтруют поля со значением null
- Генерация сущностей на основе базы данных
- Выполните метод org.mybatis.generator.plugin.MyBatisTest.main()
- Конфигурация указана в файле resources/config/generator-config.xml
- Логи группируются по дням, конфигурация указана в файле resources/config/logback-spring.xml
- Автоматическая генерация документации на основе базы данных
- Выполните метод org.screw.ScrewTest.testScrew()
Передняя часть:
Vue
-
Введение * Проект создан с помощью Vue CLI
- Интерфейс UI: Element UI
- Направленные запросы: Axios
- Глобальный способ вызова
this.$axios({ url: '', data: {}, success(data) {} });
- url: требуется адрес после домена
- success: обратный вызов, который обрабатывает только ситуацию, когда код равен 200
- Глобальные переменные и методы находятся в директории /src/utils/
- Изменение стилей Element UI в файле /src/assets/sass/element-variables.scss
- Большая часть проекта имеет комментарии2. Основные конфигурации
- Для реализации динамических маршрутов совместно с backend: заполните форму управления функциями путём указания пути path, по умолчанию корневой путь равен /src/views/main/**/*/Index.vue.
- Файлы .env.production/development и vue.config.js используются как конфигурационные файлы
-
Упакованные часто используемые компоненты
- dialog: модальное окно
- detail: отображение данных через заголовок + содержание
- form: отправка формы,
@submit
обрабатывает только ситуацию после проверки формы
- index: обычное модальное окно
- table: таблица
- Пример ответа, принимаемый таблицей:
{"list":[],"pageNum":1,"pageSize":10}
- Запрос данных таблицы
tableDataRequest: { url: '', data: {} }
- url: адрес запроса
- data: дополнительные параметры, используемые вместе с верхним поиском
- Отображение таблицы
tableColumns: [ {prop: 'username', label: 'Имя пользователя', formatter() { return ''; }} ]
принимает массив --- аналогично layui таблице
- formatter: сложное отображение, может вернуть dom
Благодарность
Сначала благодарю за отличные открытые проекты Spring Boot, Vue, Element UI и другие
Во-вторых, этот проект был основан на многих примерах из интернета, если вы заметили похожий код, то ответ один - это они
Опубликовать ( 0 )