項目簡介

該項目提供一個非常簡潔的后臺管理ui界面,非常適合初學者學習使用。項目結構：

項目地址：GitHub項目地址

技術棧

- react
- antd
- react-router-dom
- redux 相關依賴已配置好，需要的即用即可

菜單配置具體實現

菜單配置文件為config下的router.js文件,如下

const menuList = [{title: '首頁',key: '/home',component: Home},{title: '導航1',key: '/from',children: [{title: '頁面1',key: '/from/companyFrom',component: CompanyFrom},{title: '頁面2',key: '/from/user',component: UserList},{title: '頁面3',key: '/from/loadings',},]},{title: '導航2',key: '/user',children: [{title: '頁面1',key: '/user/login',},{title: '頁面2',key: '/user/reg',}]},
];
export default menuList;

其中title為菜單欄的標題，key為匹配路徑，component為展示的組件。
若有其它需求可自行擴展屬性，如添加一個display屬性，作為是否在菜單欄顯示

菜單欄配置

讀取router.js文件，遞歸menuList配置導航欄的菜單名和對應鏈接

  renderMenu=(data)=>{return data.map((item)=>{if(item.children){return (<SubMenu title={item.title} key={item.key}>{this.renderMenu(item.children)}</SubMenu>)}return <Menu.Item title={item.title} key={item.key}><Link to={item.key}>{item.title}</Link></Menu.Item>})}

路由配置

在主頁面main.jsx中，路由配置讀取router.js配置文件，遍歷獲取path對應的component，
對定義了菜單但未定義組件的頁面顯示友好的開發中界面

 renderRouter = data => {data.forEach((item,index) => {if(item.children){// 如果子路由存在,渲染子路由this.renderRouter(item.children)}if (item.component) { // 如果組件屬性存在。則渲染原本組件const router = <Route key = {index} path = {item.key} component = {item.component}  />;let routerList = this.state.routerList;routerList.push(router)this.setState({routerList})}else{ // 組件不存在就渲染頁面開發中的友好組件const router = <Route key = {index} path = {item.key} component = {NoDevelopment} />;let routerList = this.state.routerList;routerList.push(router)this.setState({routerList})}})}

axios封裝配置

對axios請求進行封裝，拼接post的請求參數到url后。具體配置文件在api目錄下

運行界面

總結

以上是生活随笔為你收集整理的react非常适合入门者学习使用的后台管理框架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。