acp-admin

v6.8.0 История обновлений версий

Совместимость с браузерами

Из-за того, что версии js-base64 3.0 и выше больше не поддерживают IE, с версии 4.2.0 IE больше не поддерживается.

Поддерживаемые браузеры:

Chrome latest (рекомендуется, идеально)
Firefox latest (полная поддержка)
Edge (полная поддержка)

Введение

Эта версия представляет собой frontend cloud для acp-admin. Для версии для одного компьютера обратитесь сюда.

Проект frontend, построенный с использованием vue全家桶(Vue+Vue-router+Vuex+axios) и библиотеки стилей ElementUI. Этот проект представляет собой "frontend часть" в архитектуре разделения frontend и backend. Backend проект.

Официальная документация по связанным компонентам

Технологическая стек

vite 3
nodejs
vue3
vuex
vue-router
axios
echarts
cropperJs
mockjs
js-sha256
js-base64
vue-json-editor
Element-plus
tinymce
camunda-bpmn

Описание

Описание HttpStatus Code для взаимодействия frontend и backend

HttpStatus	Описание
200	Запрос успешен
201	Ресурс успешно создан
400	Ошибка бизнес-логики
401	Токен (авторизация) недействителен
403	Недостаточно прав
404	Ресурс не найден
500	Системная ошибка

Проект по умолчанию запускается в Node.js, но также может быть запущен в других веб-контейнерах в зависимости от потребностей.

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

(1) Установите Node.js и проверьте его

node -v

(2) Установите китайское зеркало npm Taobao

npm config set registry https://registry.npm.taobao.org

(3) Установите плагин для обновления

npm install -g npm-check-updates

2. Установка зависимостей

(1) Установите зависимости

npm install

(2) Обновите зависимости

ncu -u
npm install

3. Разработка

(1) Интернационализация

Путь к пакетам языка: src/lang
Добавьте или измените атрибуты языка в пути к пакетам языка
Загрузите новый пакет языка в src/lang/index.js

(2) Mock

Если вы хотите использовать mock, добавьте import './mock' в src/main.js
Добавьте или измените информацию о mock в src/mock
В src/mock/index.js добавьте и настройте соответствующую стратегию перехвата URL

(3) Конфигурационные файлы

Глобальный конфигурационный файл проекта

vite.config.mjs

Справочник по конфигурации

Конфигурационные файлы проекта

Постоянные компоненты: vuex
Путь: src/store
Входная точка: src/store/index.js
Конфигурационный файл системы: src/store/config/appInfo.js

Конфигурационные файлы для различных окружений

Путь: environment| Окружение | Имя конфигурационного файла | |---------|---------------------------| | Развитие | .env.development | | Тестирование | .env.test | | Производство | .env.prod |

(4) Статические ресурсы

Путь: src/assets

(5) Маршрутизация

Компонент: vue-router
Путь: src/router
Входная точка: src/router/index.js
Конфигурация маршрутов и описание: src/router/routers.js

(6) HTTP-запросы

Компонент: axios, vue-axios
Входная точка и глобальная конфигурация: src/plugins/plugin-axios.js
Конфигурация API
Путь: src/api
Входная точка: src/api/index.js
Запись API: добавление или изменение файлов, в src/api/ApiLists.js включаются и конфигурируются

(7) Разметка страниц

Путь к отдельным страницам: src/components/pages
Фреймворк разметки: src/components/layout
Страницы внутри фреймворка: src/components/views
Тестовые страницы: src/components/test
Другие пути в src/components содержат пользовательские компоненты

4. Запуск и развертывание

(1) Запуск разработки на локальной машине

Запустите в корне проекта

npm run start

(2) Сборка проекта

Запустите в корне проекта

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

npm run build-test

Окружение производства

npm run build-prod
```- После успешного выполнения в корне проекта появится папка dist, содержащая все файлы. Скопируйте все файлы из папки dist в папку html nginx.

Если проект развернут в папке html nginx, URL для доступа будет http://nginxHost:port.
Если проект развернут в подпапке html nginx (например, platform/admin), URL для доступа будет http://nginxHost:port/platform/admin.##### (3) Конфигурация nginx

Если проект развернут в nginx, необходимо изменить nginx.conf, добавив обратное проксирование для backend-интерфейсов. Шлюз для backend

location ~ ^.*/v1/api/(.*)$ {
  set $delimeter "";
  if ( $args != "" ) {
    set $delimeter "?";
  }
  proxy_pass http://host:port/$1${delimeter}$args;
  proxy_set_header host              $http_host;
  proxy_set_header x-real-ip         $remote_addr;
  proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
  #proxy_set_header X-Forwarded-Proto "https";
  proxy_read_timeout 3600s;
}