%20(2).svg)
项目简介
本项目是基于React框架构建的电商网站前台系统。具备完善电商功能，包含用户登录、商品分类管理、商品展示与操作、用户与角色管理等。引入数据可视化功能，采用Redux进行状态管理，结合antd组件库打造美观易用界面，提升用户体验和管理效率。
项目的主要特性和功能
- 用户登录与管理：提供登录表单，支持数据收集与前台验证，有自动登录功能；可分页展示、添加、修改和删除用户信息。
- 后台管理界面：用antd的Layout组件搭建布局，左侧导航动态生成菜单，支持多级菜单，刷新自动选中对应项和打开子菜单；头部展示登录用户名称、当前时间、天气预报和导航项标题，有退出登录功能。
- 商品分类管理：支持一级和二级分类的展示、添加和更新，用antd组件构建列表界面。
- 商品管理：商品列表支持分页和搜索，可更新商品状态，进入详情和添加界面；详情页显示商品信息和所属分类名称；支持商品添加和修改，含分类级联列表、图片上传和富文本编辑功能。
- 角色管理：角色信息前台分页显示，支持添加角色和给角色授权。
- 导航菜单权限控制：根据用户角色权限动态显示导航菜单项。
- 数据可视化：集成echarts进行数据可视化展示。
- 错误处理：提供前台404界面，给出友好错误提示。
安装使用步骤
开发环境
- 创建项目：使用react脚手架创建项目。
- 安装依赖：下载
antd、react-router-dom、redux、react-redux、redux-thunk、echarts-for-react等依赖库。 - 配置项目：配置
antd按需打包和自定义主题，修改config-overrides.js和package.json；配置代理解决开发环境下的ajax跨域问题，在package.json中设置proxy。 - 启动项目：运行
npm start启动项目。 - 代码管理：创建远程和本地仓库，配置
.gitignore；使用git进行版本控制，可创建分支并推送代码。
生产环境
- 打包项目：运行
npm run build进行项目打包。 - 解决跨域问题：使用
nginx的反向代理或CORS解决生产环境下的ajax跨域问题。 - 处理刷新404问题：使用自定义中间件读取返回
index页面，解决BrowserRouter模式刷新404的问题。 - 部署项目：将打包后的文件部署到服务器上，使用
serve build运行项目。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】