react + react-router + redux + ant-Desgin 搭建react管理后台 — 新增项目文件（二）

前言

****　学习总结使用，博客如中有错误的地方，请指正。改系列文章主要记录了搭建一个管后台的步骤，主要实现的功能有：使用路由模拟登录、退出、以及切换不同的页面；使用redux实现面包屑；引入使用其他常用的组件，比如highchart、富文本等，后续会继续完善。

**
github地址：https://github.com/huangtao5921/react-antDesgin-admin （欢迎Star）**

**项目展示地址：https://huangtao5921.github.io/react-admin/ **

一、认识目录文件

****　上一篇博客 react + react-router + redux + ant-Desgin 搭建react管理后台 — 初始化项目（一）已经初始化了一个基本的项目，接下来认识一下整个项目目录结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1├── config                           // webpack配置，里面还包含其他的文件

2├── node_modules               // 项目依赖包文件夹

3├── piblic

4│   ├── favicon.ico                // 浏览器icon

5│   ├── index.html                // 单页面入口文件

6│   ├── manifest.json            

7├── src

8│   ├── App.css                    // 可删除

9│   ├── App.js

10│   ├── App.test.js               // 可删除

11│   ├── index.css                 // 可删除

12│   ├── index.js                   // 与index.html关联的入口文件

13│   ├── logo.svg                  // 可删除

14│   └── serviceWorker.js

15├── .gitignore

16├── package.json                // 项目依赖目录、脚本以及其他信息

17├── README.md

18└── yarn.lock

19

二、认识目录文件

为了适应我们的项目，我们把上面的文件删除一些，然后添加一些文件，图片的话随便找4张。目录结构如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
1├── config                        // webpack配置

2├── node_modules                  // 项目依赖包文件夹

3├── piblic

4│   ├── favicon.ico

5│   ├── index.html

6│   └── manifest.json

7├── src

8│   ├── components                 // 组件

9│   │    └── layout                // 布局组件

10│   │          ├── HeaderBar.js    // 头部

11│   │          └── SiderBar.js     // 左侧边栏

12├── config                         // 配置文件

13│   │    └── menuConfig.js         // 配置侧边栏

14├── images                         // 图片 

15│   │    ├── bj.jpg

16│   │    ├── connect.jpg

17│   │    ├── custom.jpeg

18│   │    └── logo.jpeg

19├── pages                          // 页面，需要可再加

20│   │    ├── user

21│   │    │    ├── list             // 用户列表，里面包含List.js

22│   │    │    └── connect          // 联系，里面包含Connect.js，connect.css

23│   │    ├── home

24│   │    │    └── Home.js          // 首页

25│   │    ├── tool

26│   │    │    └── rich             // 富文本

27│   │    ├── notFind

28│   │    │    └── NotFind.js       // 404

29│   │    └── login

30│   │          └── Login.js        // 登录页

31├── redux                          // redux部分

32│   │    ├── action

33│   │    │    └── index.js

34│   │    ├── reducer

35│   │    │    └── index.js

36│   │    └── store

37│   │          └── index.js

38├── routes

39│   │    └── Main.js              // 配置基本的路由

40│   ├── App.js

41│   ├── index.js

42│   ├── app.css                    // 基本公共样式

43│   └── serviceWorker.js

44├── .gitignore

45├── package.json

46├── README.md

47└── yarn.lock

48

我们这个项目是用的React脚手架搭建，为了简单，我们书写样式直接用的是css文件，有需要可以引入less，网上有如何引入的教程。

到目前为止，我们已经将项目的文件建好了，接下来就是开始写代码了。