Админ

Предисловие

Часть бэкенда на Java

Этот проект является результатом моей частной деятельности по разработке проектов. Проект имеет все функции в предварительном просмотре, исходный код не разрешен для коммерческого использования. У официального проекта, разработанного для клиента, нет системы разрешений, поскольку в основном нет системы полномочий React в Интернете, поэтому я решил разработать и открыть исходный код для передней и задней части (эта система разрешений не так сложна и совершенна, как шаблон системы управления Vue в Интернете, но она также может удовлетворить потребности малых и средних предприятий).

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

Адрес базового шаблона «zzh1918»

Часть React Frontend

Используемые технологии стека: React, React-Router, Redux, Canvas, Fetch, Ant Design, DataV, ES6 и т. д.

Введение в проект

Система управления полномочиями, разработанная на основе Ant Design. Система реализует управление полномочиями с разделением переднего и заднего плана. После входа администратора динамически загружается панель меню. Супер администратор может выполнять все операции.

• Демонстрационный аккаунт: админ
• Демонстрационные секреты: админ

  Онлайн-опыт

  Адрес опыта

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

Функции проекта

• Связанные с веб-клиентом
  • Статистика данных на главной странице
  • Управление баннерами
  • Запрос заказа
  • Классификация отрасли
  • Информация о магазине
• Административные разрешения
  • Управление учётными записями: добавление, изменение, удаление, отключение/включение, назначение ролей или конкретных разрешений учётным записям
  • Ролевое управление: основное управление связанными разрешениями
  • Разрешение управления
  • Управление меню: связь с родительским меню, связь с разрешениями, выбор значка в оболочке

Подготовка проекта

Скачайте исходный код, так как это проект с разделением передней и задней частей, сначала запустите проект задней части. После загрузки исходного кода передней части

• npm install Загрузите зависимости среды.

Локальное развёртывание

1. Измените глобальный файл .env в корневом каталоге.

# Адрес доступа к API локальной серверной части
REACT_APP_BASE_URL = http://localhost:3000/xypsp_admin
# Адрес доступа API производственной серверной части
#REACT_APP_BASE_URL = http://www.xypsp.com/xypsp_admin
# Конфигурация запуска локально
NODE_ENV = dev
# Производственная конфигурация
#NODE_ENV = pro

2. Измените файл прокси-сервера setupProxy.js в каталоге src.

const proxy = require('http-proxy-middleware');
module.exports = function (app) {
    app.use(
        //Имя доступа к проекту серверной части
        proxy('/xypsp_admin', {
            //Адрес доступа к производственному серверу
            target: 'http://www.xypsp.com',
            //Локальный адрес доступа
            target: 'http://localhost:8080',
            changeOrigin: true
        }
    ))
};

target — это адрес доступа к серверной части API, интерфейс автоматически преобразует запросы интерфейса в http://localhost:8080/xypsp_admin в соответствии с локальной и онлайн-средой.

• yarn start

Запустите проект напрямую, обычно он автоматически открывает браузер для прямого доступа.

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

1. Измените глобальный файл .env в корневом каталоге.

# Локальный адрес доступа к API серверной части
#REACT_APP_BASE_URL = http://localhost:3000/xypsp_admin
# Адрес доступа API производственной серверной части
REACT_APP_BASE_URL = http://www.xypsp.com/xypsp_admin
# Конфигурация запуска локально
#NODE_ENV = dev
# Производственная конфигурация
NODE_ENV = pro
2. Измените файл прокси-сервера setupProxy.js в каталоге src.

const proxy = require('http-proxy-middleware'); module.exports = function (app) { app.use( //Имя доступа к проекту серверной части proxy('/xypsp_admin', { //Адрес доступа к производственному серверу target: 'http://www.xypsp.com', //Локальный адрес доступа //target: 'http://localhost:8080', changeOrigin: true } )) };

target — это адрес доступа к серверной части API. Интерфейс автоматически преобразует запросы интерфейса в http://www.xypsp.com/admin_client в соответствии с локальной и сетевой средой.
3. Файл истории в каталоге utils в src.

import { createBrowserHistory } from 'history' const env = process.env.NODE_ENV; // Параметр среды let options = {}; if (env === 'dev') { options.basename = '/xypsp_admin' }else{ // Производственный сервер options.basename = '/admin' } export default createBrowserHistory(options)

options.basename — это имя проекта доступа React, которое должно совпадать с именем папки, созданной после yarn build.
- yarn build

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

[Также вы можете обратиться к моей статье здесь.](https://www.jianshu.com/p/7542d76f1ba5)