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

![在这里插入图片描述](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

调注册接口

五、待开发

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

React项目-点餐后台管理系统-react框架实现后台管理系统(包含权限处理)--新手入坑必看！（一）
点餐后台管理系统(react) 一.前言二.项目介绍三.相关技术四.项目实现的功能 4.1.功能分析 4.2.项目结构 4.3.axios封装及mock数据 4.3.1.axios封装 4.3. ...
Vue项目实战 —— 后台管理系统( pc端 ) 第一篇
前期回顾我只写注释 -- 让Ai写代码_0.活在风浪里的博客-CSDN博客前期回顾 Vue项目实战 -- 哔哩哔哩移动端开发-- 第二篇_0.活在风浪里的博客-CSDN博客https://b ...
从零开始React项目架构(四)
前言使用当前的webpack配置能不能打包构建项目呢?当然可以,但这不是我们想要的,所以,让我们来看一看生产环境需要怎么配置webpack吧开发生产环境配置在根目录创建webpack.pro. ...
vue尚品汇商城项目-day00【项目介绍：此项目是基于vue2的前台电商项目和后台管理系统】
文章目录本人其他相关文章链接项目介绍:此项目是基于vue2的前台电商项目和后台管理系统此项目为在线电商Web App (SPA) 包括首页, 搜索列表, 商品详情, 购物车, 订单, 支付, 用 ...
php仿制网站,如何仿制网站（一模一样），制造后台管理系统CMS
如何仿制网站(一模一样),制造后台管理系统CMS 2020 - 9 - 5 TAG : 首先去找一个软件,大致是:网站整站下载工具,这个软件可以把网站所有的HTML页面下载下来,这个时候我们就得到了静 ...
SSM项目-商城后台管理系统
SSM项目-商城后台管理系统开发说明开发环境项目界面演示项目功能具体的技术指标开发过程 1.搭建SSM框架 1.1.建库建表 1.2.新建Maven工程 1.3.配置pom.xml 1.4 ...
[ABP项目实战]-后台管理系统-目录
学习ABP也有一段时间了,但是总是学习了后面的忘记了前面的,为了巩固所学到的知识以及记录所学到的东西,因此有了本系列的诞生. ABP ASP.NET Boilerplate Project(ABP.N ...
Vue项目实战 —— 后台管理系统( pc端 ) 第三篇
前期回顾 Vue项目实战 -- 后台管理系统( pc端 ) 第二篇_0.活在风浪里的博客-CSDN博客前期回顾 Vue项目实战 -- 后台管理系统( pc端 ) 第一篇 _0.活在风浪里 ...
react+antd搭建后台管理系统
文章目录前言一.效果图二.框架内容 1.技术栈 2.项目目录 3.setting.js(全局配置文件) 4.跨域代理 5.路由react-router 6.状态管理 react-redux 下载 ...

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