%20(2).svg)
项目简介
本项目是一个典型的后台管理系统，主要围绕商品管理展开，具备商品的添加、修改、删除、查看以及图片上传等功能。同时，包含用户管理、角色管理以及菜单权限控制等核心功能。前端框架采用React，UI库使用Ant Design，通过API接口与后端进行交互。
项目的主要特性和功能
- 用户界面：利用Ant Design构建登录、后台管理等界面，借助布局组件完成整体布局，拆分出左侧导航、右侧头部等组件。
- 表单处理：实现表单数据收集和前台验证，支持声明式实时验证和自定义验证。
- 异步请求：封装axios，用Promise处理异步请求，采用代理解决开发时的跨域问题，引入async/await简化异步流程。
- 登录与权限管理：支持登录和自动登录，将用户信息保存到本地和内存，实现导航菜单权限控制。
- 商品管理：包含商品分类管理、商品列表分页显示、搜索分页、商品状态更新、商品详情查看、商品添加与修改等功能。
- 组件开发：开发了表单、表格、分页、级联选择器、富文本编辑器、图片上传等组件。
- 性能优化：合理使用setState，区分同步和异步更新，使用PureComponent优化组件性能。
安装使用步骤
开发环境运行
- 确保已下载本项目的源码文件。
- 打开命令行工具，进入项目根目录。
- 安装依赖：
npm install - 启动项目：
npm start
生产环境打包运行
- 打包项目：
npm run build - 安装serve：
npm install -g serve - 运行打包后的项目：
serve build
Git管理
- 创建本地仓库
- 配置.gitignore文件，忽略不需要提交的文件。
- 初始化本地仓库：
git init - 添加所有文件到暂存区：
git add. - 提交到本地仓库：
git commit -m "init"
- 将本地仓库推送到远程仓库
- 添加远程仓库地址：
git remote add origin url - 推送至远程仓库主分支：
git push origin master
- 添加远程仓库地址：
- 创建并推送dev分支
- 创建并切换到dev分支：
git checkout -b dev - 推送dev分支到远程：
git push origin dev
- 创建并切换到dev分支：
- 本地修改提交
- 添加修改到暂存区：
git add. - 提交修改：
git commit -m "xxx" - 推送到远程dev分支：
git push origin dev
- 添加修改到暂存区：
- 新同事复制仓库
- 复制远程仓库：
git clone url - 创建并切换到本地dev分支：
git checkout -b dev origin/dev - 拉取远程dev分支最新代码：
git pull origin dev
- 复制远程仓库：
- 拉取远程修改：
git pull origin dev
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】