前言

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

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

这里使用react脚手架搭建项目，并且删掉初始乱七八糟的文件得到一个纯净的react项目
如果不知道怎么操作，查看使用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=https://registry.npm.taobao.org
cnpm i node-sass -D #不指定版本默认下载最新版,可以用@5.0.0指定版本

安装Ant Design

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

cnpm i antd -D

3.开始写项目

定义项目文件结构

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

app.js进行布局

先把组件中的footer，header，nav文件下的index.js文件写一下，这里举一个例子：

import React, {
    
     Component } from 'react'

export class Index extends Component {
    
    
  render() {
    
    
    return (
      <div>我是footer</div>
    )
  }
}

export default Index

然后在app.js中引入，进行布局：

import {
    
     Row, Col } from 'antd'
import Nav from './components/nav'
import Header from './components/header'
import Footer from './components/footer'
import './style/common.scss'

function App(){
    
    
    return (
        <div>
            <Row className='container'>
                <Col>
                    <Nav/>
                </Col>
                <Col>
                    <Header/>
                    <Row>
                        我是内容区
                    </Row>
                    <Footer/>
                </Col>
            </Row>
        </div>
    )
}

export default App;

查看效果，目前是这样的布局：
在这里插入图片描述

nav侧边导航

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

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

nav/index.js:

import React, {
    
     Component } from 'react'
import {
    
     Menu } from 'antd';
import menuConfig from '../../config/menu';
import './index.scss'
import {
    
     SettingOutlined } from '@ant-design/icons';

const {
    
     SubMenu } = Menu;

export class index extends Component {
    
    
    state = {
    
    
        menuItem: ''
    }
    componentDidMount() {
    
    
        let menuItem = this.getMenuItem(menuConfig)
        // console.log(menuItem)
        this.setState({
    
    menuItem})
    }
    // 获取菜单方法,直接遍历
    getMenuItem = (data) => {
    
    
        // console.log(data)
        return data.map(item => {
    
    
            if (item.children) {
    
    
                return <SubMenu key={
    
    item.key} title={
    
    item.title}>
                    {
    
    
                        item.children.map(items => {
    
    
                            // console.log(items)
                            return <Menu.Item key={
    
    items.key} title={
    
    items.title}>{
    
    items.title}</Menu.Item>
                        })
                    }
                </SubMenu>
            } else {
    
    
                return <Menu.Item key={
    
    item.key} title={
    
    item.title}>{
    
    item.title}</Menu.Item>
            }
        })
    }
    
    render() {
    
    
        return (
            <div className='nav-left'>
                <h1>后台管理系统</h1>
                <Menu mode="inline" theme="dark">
                    {
    
    this.state.menuItem}
                </Menu>
            </div>
        );
    }
}

export default index

最后得到的看效果：

在这里插入图片描述

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

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

文章目录

前言