前言

该示例是react+antd搭建前端管理框架（支持响应式），主要模块分为：菜单、选项卡、面包屑；通过路由监听，实现三个模块之间的联动（同时监听浏览器）；状态采用react-redux进行集中管理。 目前只包含前端代码，未与后台进行关联实现菜单、用户等权限，若需要，则需进行二次开发。

一、效果图

二、框架内容

1.技术栈

- react
 - antd
 - react-redux
 - react-router
 - echarts
 - axios
 - pubsub-js
 - ......

2.项目目录

src api：接口路径 assets：资源文件（css、img等） axios：http请求 components：公共组件 pages：存放路由组件 reduct：状态管理 router：路由 utils：工具类 views：视图组件（存放框架主体组件） App.js：App组件 index.js：入口文件 setting.js：配置文件 setupProxy：配置跨域代理 config-overrides.js：可配置一些webpack配置，此处可进行配置antd的主题颜色

3.setting.js(全局配置文件)

统一进行管理，其中对菜单、选项卡、面包屑等进行可配置。

module.exports = {
          
   
  /**
   * @description 基础url
   */
    BASE_URL_API: process.env.NODE_ENV === production ? / : /api/,  // 跨域代理
  /**
   * @description token在Cookie中存储的天数，默认1天
   */
  CookieExpires: 1,
  /**
   * @description token key
   */
  TokenKey: TOKEN,
  /**
   * @description token key
   */
  UserKey: USER,
  /**
   * @description 请求超时时间，毫秒（默认1小时）
   */
  timeout: 1000*60*60,
  /**
   * 是否显示菜单
   */
  ShowMenu: true,
  /**
   * 是否显示面包屑
   */
  ShowBreAdcrumb: true,
  /**
   * 是否显示选项卡
   */
  ShowTabs: true,
   /**
   * 是否显示折叠按钮
   */
  ShowFold: true,
}

4.跨域代理

跨域代理需要导入插件进行使用：http-proxy-middleware

// 安装 npm install http-proxy-middleware
const {
          
   createProxyMiddleware} = require(http-proxy-middleware);
module.exports = function(app) {
          
   
  app.use(
        /api, 
        createProxyMiddleware({
          
   
            target: "http://192.168.1.50:8080",
            changeOrigin: true,
            pathRewrite: {
          
   
                ^/api: ,
            }
        }
  ));
};

5.路由react-router

通过json数组注册路由

6.状态管理 react-redux

// 引入createStore 创建redux最为核心的store对象
import {
          
   createStore, applyMiddleware} from redux;

// 引入所有reducers
import reducer from ./reducers;

// 引入redux-thunk 用于支持异步
import thunk from redux-thunk

// 引入redux-devtools-extension 用于redux开发者工具
import {
          
   composeWithDevTools} from redux-devtools-extension

// 本地存储
import storage from redux-persist/lib/storage;
import {
          
   persistStore, persistReducer} from redux-persist;

const persistConfig = {
          
   
    key: healthRoot,
    storage: storage
};

const _reducers = persistReducer(persistConfig, reducer)

const store = createStore(_reducers, composeWithDevTools(applyMiddleware(thunk)))

export const persistor = persistStore(store)

export default store

下载地址

地址： gitee地址：

总结

以上是对框架的简单介绍，欢迎小伙伴留言，大家一起学习进步。