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