react+antd搭建后台管理系统

文章目录

  • 前言
  • 一、效果图
  • 二、框架内容
    • 1.技术栈
    • 2.项目目录
    • 3.setting.js(全局配置文件)
    • 4.跨域代理
    • 5.路由react-router
    • 6.状态管理 react-redux
  • 下载地址
  • 总结


前言

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

一、效果图

react后台管理系统

二、框架内容

1.技术栈

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

2.项目目录

react+antd搭建后台管理系统_第1张图片

  • 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数组注册路由
react+antd搭建后台管理系统_第2张图片
react+antd搭建后台管理系统_第3张图片

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

总结

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

你可能感兴趣的:(React专项记录,react.js,前端框架,个人开发)