【源码】基于 React 框架的综合管理系统

项目简介

本项目是基于前端 React 框架和微前端技术构建的综合管理系统。借助微前端架构，各个业务模块能够独立进行开发、测试与部署，极大地增强了系统的可维护性和扩展性。同时运用 React 框架，为开发提供了丰富的 UI 组件与灵活的路由管理，有效提升了开发效率与便捷性。

项目的主要特性和功能

1. 采用微前端架构，模块间松耦合，便于独立开发和部署。
2. 使用 React 框架进行前端开发，拥有丰富的 UI 组件和灵活的路由管理。
3. 支持通过环境变量配置 API 主机、公共路径等，方便部署调试。
4. 支持 CSS Modules，确保样式模块化，避免样式冲突。
5. 可添加自定义 Babel 插件，支持更多 JavaScript 特性。
6. 支持开发环境代理 API 请求，方便调试。

安装使用步骤

前提条件

假设用户已经下载了本项目的源码文件。

具体步骤

1. 安装依赖：在项目根目录下执行命令 yarn install。
2. 配置环境变量：打开 src/config/.env.yml，配置后端服务器地址等环境变量，如 API_HOST: http://hzero-backend.your-server-domain.com。
3. 启动开发服务器：
   • 单模块启动：进入 packages/h0-project-demo1 目录，运行 yarn run start。
   • 全模块启动：先运行 yarn run build:ms 编译子模块，再运行 yarn run start。
4. 打包：执行打包脚本，根据情况进行全量或增量编译子模块。
5. 发布：将打包后的 html 文件放到 Nginx 的 html 目录下，配置 Nginx 运行，Nginx 配置示例如下： ``` user nginx; worker_processes 1;

error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pid;

events { worker_connections 1024; }

http { include /etc/nginx/mime.types; default_type application/octet-stream;

log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                  '$status $body_bytes_sent "$http_referer" '
                  '"$http_user_agent" "$http_x_forwarded_for"';

access_log  /var/log/nginx/access.log  main;

sendfile        on;

keepalive_timeout  65;

gzip on;
gzip_buffers 32 4k;
gzip_comp_level 6;
gzip_min_length 200;
gzip_types text/css text/xml application/javascript;

server {
    listen       80;
    server_name  localhost;

    location \/[a-z.0-9]\.(js|css|gif|png|jpg)$ {
      expires    7d; # 开启 eTag 缓存
    }

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri /index.html; # 启动 Bowser 路由 配置
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

} ```

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】