前言
学习总结使用,博客如中有错误的地方,请指正。改系列文章主要记录了搭建一个管后台的步骤,主要实现的功能有:使用路由模拟登录、退出、以及切换不同的页面;使用redux实现面包屑;引入使用其他常用的组件,比如highchart、富文本等,后续会继续完善。
github地址:https://github.com/huangtao5921/react-antDesgin-admin (欢迎Star)
项目展示地址:https://huangtao5921.github.io/react-admin/
一、认识目录文件
上一篇博客 react + react-router + redux + ant-Desgin 搭建react管理后台 -- 初始化项目(一)已经初始化了一个基本的项目,接下来认识一下整个项目目录结构:
├── config // webpack配置,里面还包含其他的文件
├── node_modules // 项目依赖包文件夹
├── piblic
│ ├── favicon.ico // 浏览器icon
│ ├── index.html // 单页面入口文件
│ ├── manifest.json
├── src
│ ├── App.css // 可删除
│ ├── App.js
│ ├── App.test.js // 可删除
│ ├── index.css // 可删除
│ ├── index.js // 与index.html关联的入口文件
│ ├── logo.svg // 可删除
│ └── serviceWorker.js
├── .gitignore
├── package.json // 项目依赖目录、脚本以及其他信息
├── README.md
└── yarn.lock
二、认识目录文件
为了适应我们的项目,我们把上面的文件删除一些,然后添加一些文件,图片的话随便找4张。目录结构如下所示:
├── config // webpack配置
├── node_modules // 项目依赖包文件夹
├── piblic
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── components // 组件
│ │ └── layout // 布局组件
│ │ ├── HeaderBar.js // 头部
│ │ └── SiderBar.js // 左侧边栏
├── config // 配置文件
│ │ └── menuConfig.js // 配置侧边栏
├── images // 图片
│ │ ├── bj.jpg
│ │ ├── connect.jpg
│ │ ├── custom.jpeg
│ │ └── logo.jpeg
├── pages // 页面,需要可再加
│ │ ├── user
│ │ │ ├── list // 用户列表,里面包含List.js
│ │ │ └── connect // 联系,里面包含Connect.js,connect.css
│ │ ├── home
│ │ │ └── Home.js // 首页
│ │ ├── tool
│ │ │ └── rich // 富文本
│ │ ├── notFind
│ │ │ └── NotFind.js // 404
│ │ └── login
│ │ └── Login.js // 登录页
├── redux // redux部分
│ │ ├── action
│ │ │ └── index.js
│ │ ├── reducer
│ │ │ └── index.js
│ │ └── store
│ │ └── index.js
├── routes
│ │ └── Main.js // 配置基本的路由
│ ├── App.js
│ ├── index.js
│ ├── app.css // 基本公共样式
│ └── serviceWorker.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock
我们这个项目是用的React脚手架搭建,为了简单,我们书写样式直接用的是css文件,有需要可以引入less,网上有如何引入的教程。
到目前为止,我们已经将项目的文件建好了,接下来就是开始写代码了。
注:交流问题的可以加QQ群:531947619
下一篇:react + react-router + redux + ant-Desgin 搭建react管理后台 -- 引入ant-Desgin及布局(三)