【React项目架构 】+后台管理系统cms实操
第一个React脚手架开发的项目，美团后台管理系统。
·
React项目架构
一、 react脚手架
(一) 、yarn 安装
(二) 、react安装
npx create-react-app [-g]
npm i react@17.0.0 react-dom@17.0.0 babel-standalone@6.26.0
npm i react-router-dom
npm i redux@4.1.1 --save
npm i redux-thunk@2.4.1
npm i redux-persist
npm install antd --save or yarn add antd
npm i axios
npm install sass-loader node-sass sass --save-dev
npm install less less-loader
npm i echarts
二、 目录结构
(一) 、react模块开发
(二) 、路由配置–动态路由
三、 代码及效果图
(一) 、注册页面
(二) 、登录页面
(三) 、欢迎页面
(四) 、顶部用户信息
-
效果图
-
代码
(五) 、二级导航栏
侧边导航栏 
(一)、商品管理模块
多选框
tabble组件数据dataSource={data}(数据元素)
api请求商品列表
字段(数据项)
(1).表格核心
(2). 搜索、删除组件
搜索
重置
form.resetFields()} //重置
批量删除
(3).表格操作
状态更改
调用商品状态接口api，并调用商品列表api,当前id的商品数据重新刷新页面
操作之编辑
弹框：显示修改弹窗
弹框：设置表单form.setFieldValue()方法
根据点击的id获取商品数据，并渲染到form页面
注意：商品id是在商品添加时，按顺序创建的，显示弹框是隐藏id
弹框：选择分类，请求商品分类接口
const [categoryList, setCategoryList] = useState([]); //显示表单的分类9项
操作之保存修改
更改数据，隐藏弹出框setVisible(flase)
操作之删除
(二) 、商品添加
(1) . menu菜单导航栏二级导航栏路由导向，点击加载组件
(2) .商品分类
(3) .uplooad组件上传商品图片，调用单文件上传接口
1.1.1 布局upload组件
1.1.2 子传父，分装组件
1.1.3 组件调用
1.2 代码
1.2.1 封装组件的详细代码：
！！！注意：商品添加的单文件上传图片地址是完整的
1.2.2 文件上传
(4).待开发
(一) 、用户模块
(1).待开发
四、 其它组件
(一) 、路由配置App.js-> Router文件夹
静态路由配置
动态路由配置
/**
* 路由懒加载
*/
const lazyLoad = (path) => {
const Comp = lazy(() => import(`../pages/${path}`));
return (
<React.Suspense fallback={<>加载中...</>}>
<Comp />
</React.Suspense>
);
};
(二) 、欢迎界面(图表)
(三) 、文件上传
图片添加单文件上传
注意：调用单文件上传api,预览成功即是上传成功，且上传的是完整url
注册上传头像
注意：只是预览效果，上传的不是完整url，渲染用户头像时作处理+http
调注册接口
五、 待开发
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
2
0- 0
已为社区贡献4条内容
所有评论(0)