Слияние кода завершено, страница обновится автоматически
Этот проект является результатом моей частной деятельности по разработке проектов. Проект имеет все функции в предварительном просмотре, исходный код не разрешен для коммерческого использования. У официального проекта, разработанного для клиента, нет системы разрешений, поскольку в основном нет системы полномочий React в Интернете, поэтому я решил разработать и открыть исходный код для передней и задней части (эта система разрешений не так сложна и совершенна, как шаблон системы управления Vue в Интернете, но она также может удовлетворить потребности малых и средних предприятий).
Этот проект также является моим первым проектом управления React, который я разработал после изучения React в свободное время, используя открытый исходный код базового шаблона других людей, и я разработал этот проект на основе этого открытого исходного кода.
Адрес базового шаблона «zzh1918»
Используемые технологии стека: React, React-Router, Redux, Canvas, Fetch, Ant Design, DataV, ES6 и т. д.
Система управления полномочиями, разработанная на основе Ant Design. Система реализует управление полномочиями с разделением переднего и заднего плана. После входа администратора динамически загружается панель меню. Супер администратор может выполнять все операции.
Неизбежно, что демонстрационные данные будут содержать большое количество грязных данных, а демонстрационному аккаунту назначены только разрешения на запрос без каких-либо операционных разрешений.
Скачайте исходный код, так как это проект с разделением передней и задней частей, сначала запустите проект задней части. После загрузки исходного кода передней части
# Адрес доступа к 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
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 в соответствии с локальной и онлайн-средой.
Запустите проект напрямую, обычно он автоматически открывает браузер для прямого доступа.
# Локальный адрес доступа к 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)
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )