react+antd搭建后台管理系统

---

前言

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

一、效果图

react后台管理系统

二、框架内容

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

下载地址

csdn地址：https://download.csdn.net/download/weixin_48357332/85423085
gitee地址：https://gitee.com/yxsmall/react

总结

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