spring rest admin

весна-отдых-админ

Введение

Этот проект представляет собой интерфейсный проект управления, основанный на Vue и ElementUI. Он используется совместно с Spring-Rest Backend. Код фреймворка взят из Vue-Element-Admin, с некоторыми изменениями, внесенными на его основе. В основном оптимизирована функция управления правами. Нажмите здесь, чтобы получить доступ к онлайн-демо .

оптимизация

• Разрешения меню автоматически генерируются на основе конфигурации маршрутизации и синхронизируются администратором с внутренней базой данных;

• Вы можете добавлять, изменять и удалять разрешения кнопок в разделе разрешений синхронизированного меню;

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

• При добавлении разрешений кнопок префикс генерируется автоматически и заполняются только необходимые части, чтобы не путать форматы;

• Добавлена ​​функция связывания разрешений меню и разрешений кнопок с разрешениями интерфейса. Роли напрямую связаны только с разрешениями меню и разрешениями кнопок;

• При аутентификации элементов страницы используйте константы перечисления, чтобы избежать прямого использования строк разрешений для облегчения обслуживания;

• Определите иерархию классов вызова интерфейса API в соответствии с иерархией классов фонового интерфейса, чтобы устранить избыточность и улучшить повторное использование кода;

• Исправлена ​​ошибка компонента el-scrollbar : когда браузер уменьшается до определенной степени, открывается исходная скрытая полоса прокрутки. Чем больше коэффициент уменьшения, тем более очевидным будет это явление;

Подготовка среды разработки

Подготовка среды Node.js

Для версии Node.js рекомендуется использовать версию 12. Другие версии подходят.

Рекомендуется использовать nvm для управления версиями Node.js в Linux и MacOS. nvm не поддерживает Windows, но вы можете использовать альтернативные nvm-windows.

В качестве примера возьмем nvm-windows под Windows (запускаем под git bash):

 # 设置 nvm 下载 node 和 npm 的镜像地址（直接访问外网太慢）
$ nvm node_mirror https://npm.taobao.org/mirrors/node/
$ nvm npm_mirror https://npm.taobao.org/mirrors/npm/

# 设置 npm 下载包的镜像地址
$ npm config set registry https://registry.npm.taobao.org

# 查看可用的 Node.js版本
$ nvm list available

# 挑选一个最新的 v12 的 LTS 版本进行安装
$ nvm install 12.20.1
$ nvm use 12.20.1

# 查看已经安装的所有 Node.js 版本
$ nvm list
# 切换希望使用的版本
$ nvm use < nodeVersion >

# 查看当前的 Node.js 版本 和 npm 版本
$ node -v
$ npm -v

Проверка и запуск проекта

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

$ git clone https://github.com/bianyun1981/spring-rest-admin.git
$ cd spring-rest-admin
$ npm install

Примечание. Если при выполнении команды npm install появляется сообщение об ошибке npm ERR! Failed at the [email protected] install script. вы можете выполнить следующую команду, а затем выполнить npm install :

$ npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

Если на этапе установки npm появляются другие ошибки, это может быть связано с тем, что некоторые пакеты невозможно загрузить с зеркальной станции Taobao, и их необходимо загрузить напрямую с некоторых недоступных внешних сетевых адресов. Однако загрузка не удалась. добавьте конфигурацию прокси. Повторите попытку позже.

$ npm config set proxy http://username:password@host:port
$ npm config set https-proxy http://username:password@host:port

Если npm install выполнена успешно и ошибок не обнаружено, вы можете продолжить работу.

$ npm run serve

Через некоторое время браузер автоматически откроется и перейдет по адресу http://localhost:9527/login . Выберите встроенного пользователя для входа в систему напрямую.

Примечание. Для успешного входа в систему необходимо запустить фоновый режим сервера.

файл конфигурации среды

vue-element-admin поддерживает несколько конфигураций среды. Формат имени файла конфигурации среды — .env.[环境名] . Если эту информацию о конфигурации среды необходимо использовать только локально, добавьте суффикс .local в конец файла. имя файла, чтобы файл конфигурации не был загружен в репозиторий с помощью git , он будет храниться только локально.

Примечание. Помимо конфигурации среды разработки .env.development и .env.development.local , в других файлах конфигурации среды необходимо установить NODE_ENV = production . Имя среды ENV должно соответствовать части между .env и .local в файле. Имя файла конфигурации среды. Кроме того, необходимо изменить префикс адреса вызова интерфейса VUE_APP_BASE_API .

Примечание. Если вы хотите определить другие переменные среды в файле конфигурации, они должны начинаться с VUE_APP_ и получать их через process.env.VUE_APP_xxxx в коде.

Развертывание пакета

Примечание. Перед упаковкой убедитесь, что npm install и npm run serve могут выполняться нормально и без ошибок.

Команда упаковки: npm run build -- --mode <环境名> . На приведенном выше рисунке в качестве примера команда упаковки:

$ npm run build -- --mode vm-centos7

После успешного выполнения команды файл результатов упаковки окажется в каталоге dist.

Примечание. Плагин сжатия кода compression-webpack-plugin может использовать только предыдущую версию v6 и не может использовать последнюю версию v7, в противном случае будет сообщено об ошибке.

Кроме того, режим маршрутизации этого проекта настроен как режим истории. Если вы хотите работать в этом режиме, nginx необходимо настроить соответствующим образом (подробности см. в разделе маршрутизация с использованием history.pushState ). В то же время необходимо добавить конфигурацию, связанную с gzip (нужна только эта строка конфигурации):

 location / {
  gzip_static on ;
  try_files $uri $uri / /index.html;
}