# 优购商城-web端
**Repository Path**: chi-congmin/yougou-mall-web
## Basic Information
- **Project Name**: 优购商城-web端
- **Description**: 毕业设计,一个基于React、AntDesign的前后端分离、包含了完整的购物流程的Web商城前端项目。
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 10
- **Forks**: 1
- **Created**: 2022-07-09
- **Last Updated**: 2025-08-31
## Categories & Tags
**Categories**: Uncategorized
**Tags**: TypeScript, React, 商城
## README
# 优购商城-web端
## 介绍
毕业设计,一个基于React、AntDesign的前后端分离、包含了完整的购物流程的Web商城前端项目。
## 目录结构
```
yougou-mall-web
├─public --公开目录
└─src --源码
├─api --Api接口
├─assets --静态资源
│ ├─font --字体
│ ├─img --图片
│ └─style --公共样式
├─components --组件
├─enums --枚举
├─event --事件监听器
├─interface --接口
├─pages --页面
├─request --http网络请求
├─router --路由
├─store --公共仓库
└─utils --工具
```
## 技术选型
| 技术 | 说明 | 官网 |
| :-----------: | :--------------: | :----------------------------------------------------------: |
| React | 前端框架 | https://react.docschina.org |
| React-Router | 路由框架 | https://reactrouter.com/en/main |
| Redux-Toolkit | 全局状态管理框架 | https://redux-toolkit.js.org |
| AntDesign | 前端UI框架 | https://ant-design.antgroup.com/index-cn |
| Axios | HTTP框架 | [https://github.com/axios/axios](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Faxios%2Faxios) |
## 环境搭建
### 开发环境
| 工具 | 说明 | 版本号 |
| :--: | :--: | :-----: |
| Node | Node | 18.16.1 |
### 开发工具
| 工具 | 说明 | 下载地址 |
| :------: | :--------: | :-----------------------------------------: |
| WebStorm | Web开发IDE | https://www.jetbrains.com/webstorm/download |
## 部署
- ### 安装node模块
```
npm install
```
- ### 运行
```
npm run dev
```
## 运行截图
- 首页


- 品牌中心

- 商品详情

- 商品搜索

- 个人中心



- 购物车结算

- 登录页面

## 视频演示
- b站链接:https://www.bilibili.com/video/BV1Zu411A7MX/
## 项目链接
- Java后端链接:https://gitee.com/chi-congmin/yougou-mall
- 商城Web端链接:https://gitee.com/chi-congmin/yougou-mall-web
- 管理平台端链接:https://gitee.com/chi-congmin/yougou-mall-admin