【React项目架构 】+后台管理系统cms实操

React项目架构

一、 react脚手架

(一) 、yarn 安装

(二) 、react安装

npx create-react-app [-g]

npm i [email protected] [email protected] [email protected]

npm i react-router-dom

npm i [email protected] --save

npm i [email protected]

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模块开发

(二) 、路由配置–动态路由

三、 代码及效果图

(一) 、注册页面

(二) 、登录页面

(三) 、欢迎页面

(四) 、顶部用户信息

1. 效果图
   

2. 代码
   
   

(五) 、二级导航栏

侧边导航栏

(一)、商品管理模块

多选框

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菜单导航栏二级导航栏路由导向，点击加载组件

![在这里插入图片描述](https://img-blog.csdnimg.cn/5abfd0af3ef54e83a07754a0d6f1aac4.png)

(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

调注册接口

五、 待开发