从零开始使用react+AntDesign撸一个后台管理系统(一)

前言

从本篇开始&＃xff0c;教大家从零开始使用react&＃43;Ant Design做一个后台管理系统&＃xff0c;系列文章持续更新&＃xff0c;完成之后会把代码发给大家学习参考&＃xff0c;话不多说&＃xff0c;直接开冲
如果react基础不太好的同学&＃xff0c;可以看一下我的react专栏文章回顾一下基础知识&＃xff1a;从零入门react系列

1.先来搭个架子—创建项目

这里使用react脚手架搭建项目&＃xff0c;并且删掉初始乱七八糟的文件得到一个纯净的react项目
如果不知道怎么操作&＃xff0c;查看 使用react脚手架快速搭建项目
下面默认大家已经创建并得到了纯净的react项目

2.准备工作—装些工具

路由和axios

yarn add -D react-router-dom axios # 用yarn安装路由和axios
npm i -D react-router-dom axios # 用npm安装路由和axios


CSS预处理器SCSS

npm install -g cnpm --registry&＃61;https://registry.npm.taobao.org
cnpm i node-sass -D #不指定版本默认下载最新版,可以用&＃64;5.0.0指定版本


安装Ant Design

AntDesign是蚂蚁金服开源的一款react-ui的组件库,兼容性很不错,常用的浏览器以及IE11都兼容。(兼容IE11需要polyfiles,它是一个JS库,主要作用是解决兼容问题,解决不同浏览器之间对js实现的一个差异),它还支持服务端渲染(SSR)

cnpm i antd -D


3.开始写项目

定义项目文件结构

开始之前&＃xff0c;我们先想好项目的一个布局&＃xff0c;创建好文件夹和文件
1.定义components文件夹存放组件&＃xff0c;目前内容为头部底部和导航栏
2.定义config文件夹存放目录的内容&＃xff0c;因为先不接入接口&＃xff0c;写一些死数据在里面
3.定义style文件夹&＃xff0c;存放一些样式文件&＃xff08;默认样式&＃xff0c;公共样式&＃xff09;

app.js进行布局

先把组件中的footer&＃xff0c;header&＃xff0c;nav文件下的index.js文件写一下&＃xff0c;这里举一个例子&＃xff1a;

import React, { Component } from &＃39;react&＃39;export class Index extends Component {render() {return (<div>我是footer</div>)}
}export default Index


然后在app.js中引入&＃xff0c;进行布局&＃xff1a;

import { Row, Col } from &＃39;antd&＃39;
import Nav from &＃39;./components/nav&＃39;
import Header from &＃39;./components/header&＃39;
import Footer from &＃39;./components/footer&＃39;
import &＃39;./style/common.scss&＃39;function App(){return (<div><Row className&＃61;&＃39;container&＃39;><Col><Nav/></Col><Col><Header/><Row>我是内容区</Row><Footer/></Col></Row></div>)
}export default App;


查看效果&＃xff0c;目前是这样的布局&＃xff1a;

nav侧边导航

直接去Ant Design文档中查找想要的导航样式&＃xff0c;教大家个小技巧&＃xff1a;如果初学不会写&＃xff0c;就把文档里面的案例copy下来&＃xff0c;然后慢慢改成自己想要的形式

开始写导航栏&＃xff1a;
1.首先要引入这里需要的组件&＃xff0c;比如菜单Menu,图标SettingOutlined,还有SubMenu&＃xff08;从Menu中结构出来&＃xff09;。最后要把我们写好的导航栏数据引入进来menuConfig
2.在render中先写一下结构
3.定义获取菜单的方法&＃xff0c;直接遍历&＃xff0c;然后在componentDidMount生命周期中进行调用&＃xff0c;并赋值
4.对于这里的遍历&＃xff0c;逻辑就是有children的就继续往下遍历然后展示&＃xff0c;没有children的就直接展示

nav/index.js:

import React, { Component } from &＃39;react&＃39;
import { Menu } from &＃39;antd&＃39;;
import menuConfig from &＃39;../../config/menu&＃39;;
import &＃39;./index.scss&＃39;
import { SettingOutlined } from &＃39;&＃64;ant-design/icons&＃39;;const { SubMenu } &＃61; Menu;export class index extends Component {state &＃61; {menuItem: &＃39;&＃39;}componentDidMount() {let menuItem &＃61; this.getMenuItem(menuConfig)// console.log(menuItem)this.setState({menuItem})}// 获取菜单方法,直接遍历getMenuItem &＃61; (data) &＃61;> {// console.log(data)return data.map(item &＃61;> {if (item.children) {return <SubMenu key&＃61;{item.key} title&＃61;{item.title}>{item.children.map(items &＃61;> {// console.log(items)return <Menu.Item key&＃61;{items.key} title&＃61;{items.title}>{items.title}</Menu.Item>})}</SubMenu>} else {return <Menu.Item key&＃61;{item.key} title&＃61;{item.title}>{item.title}</Menu.Item>}})}render() {return (<div className&＃61;&＃39;nav-left&＃39;><h1>后台管理系统</h1><Menu mode&＃61;"inline" theme&＃61;"dark">{this.state.menuItem}</Menu></div>);}
}export default index


最后得到的看效果&＃xff1a;

OK&＃xff0c;本篇文章先带大家完成这么多&＃xff0c;大家可以自己动手去试一试。
记得关注收藏&＃xff0c;后面会继续带大家完成这个项目&＃xff0c;最后也会把源码贴上来~
持续更新&＃xff01;&＃xff01;&＃xff01;