Movie Ticket 是一个基于 React + Nest å¼€å‘çš„å…¨æ ˆç§»åŠ¨ç«¯ç¥¨åŠ¡åº”ç”¨ï¼Œä¸“æ³¨äºŽç”µå½±ã€æ¼”唱会ç‰ç¥¨åŠ¡é¢„订和支付管ç†ã€‚本项目采用现代化的å‰ç«¯æŠ€æœ¯æ ˆï¼Œæ供了æµç•…的用户体验和完整的票务è´ä¹°æµç¨‹ã€‚ æ¤é¡¹ç›®ä¸ºäº†å¦ä¹ 巩固ReactæŠ€æœ¯æ ˆã€‚
- å‰ç«¯æ¡†æž¶: React 18
- 构建工具: Vite 6
- UI组件库: Ant Design Mobile 5.39.0
- 路由管ç†: React Router DOM 7
- HTTP客户端: Axios
- å›¾æ ‡: React Icons, Ant Design Mobile Icons
react-movie/
├── public/ # é™æ€èµ„æº
├── src/
│ ├── components/ # å¯å¤ç”¨ç»„件
│ │ ├── ApplyInfo/ # 支付确认组件
│ │ ├── BottomBar/ # 底部导航æ
│ │ ├── CardItem/ # 活动å¡ç‰‡ç»„件
│ │ ├── MainLayout/ # 主布局组件
│ │ └── PrivateRoute/ # æƒé™è·¯ç”±ç»„件
│ ├── context/ # 上下文管ç†
│ │ └── AuthContextWrapper.jsx # 认è¯ä¸Šä¸‹æ–‡
│ ├── pages/ # 页é¢ç»„件
│ │ ├── Concert/ # 演唱会页é¢
│ │ ├── DetailInfo/ # 详情页é¢
│ │ ├── Index/ # 首页
│ │ ├── Login/ # 登录页é¢
│ │ ├── Movie/ # 电影页é¢
│ │ ├── Order/ # 订å•é¡µé¢
│ │ ├── Payment/ # 支付页é¢
│ │ ├── Person/ # 个人ä¸å¿ƒ
│ │ ├── ResultPage/ # 支付结果页
│ │ └── Search/ # æœç´¢é¡µé¢
│ ├── routes/ # 路由é…ç½®
│ ├── services/ # APIæœåŠ¡
│ │ └── api/ # API模å—
│ ├── App.jsx # æ ¹ç»„ä»¶
│ └── main.jsx # å…¥å£æ–‡ä»¶
├── package.json # ä¾èµ–管ç†
└── vite.config.js # Viteé…ç½®
- 登录与注册: 支æŒç”¨æˆ·æ³¨å†Œå’Œç™»å½•
- æƒé™æŽ§åˆ¶: 使用 Context API 管ç†è®¤è¯çŠ¶æ€
- ç§æœ‰è·¯ç”±ä¿æŠ¤: PrivateRoute 组件确ä¿ç‰¹å®šé¡µé¢éœ€è¦ç™»å½•
- 分类æµè§ˆ: 支æŒç”µå½±ã€æ¼”唱会ç‰ä¸åŒç±»åž‹æ´»åŠ¨æµè§ˆ
- è½®æ’展示: 首页轮æ’图展示çƒé—¨æ´»åŠ¨
- æœç´¢åŠŸèƒ½: 支æŒå…³é”®è¯æœç´¢æ´»åŠ¨
- 活动详情: 展示活动的详细信æ¯
- 场次选择: 选择具体的场次和日期
- 座ä½é€‰æ‹©: 选择座ä½ä½ç½®
- 订å•åˆ—表: 查看个人所有订å•
- 订å•ç›é€‰: 按状æ€ç›é€‰ä¸åŒç±»åž‹è®¢å•
- 订å•è¯¦æƒ…: 查看订å•è¯¦ç»†ä¿¡æ¯
- 多ç§æ”¯ä»˜æ–¹å¼: 支æŒæ”¯ä»˜å®ã€å¾®ä¿¡ã€ä¿¡ç”¨å¡ç‰å¤šç§æ”¯ä»˜æ–¹å¼
- 支付倒计时: 订å•æ”¯ä»˜æ—¶é—´é™åˆ¶
- 支付确认: 输入支付密ç 确认
- 支付结果: 完整的支付结果页é¢å±•ç¤º
- 用户信æ¯: 展示和编辑个人资料
- 订å•å¿«æ·å…¥å£: 快速查看订å•
- 退出登录: 安全退出账户
项目采用模å—化API设计，主è¦åŒ…å«ä»¥ä¸‹å‡ 个模å—：
-
认è¯æœåŠ¡ (authService)
- 用户登录
- Token管ç†
-
用户æœåŠ¡ (userService)
- 用户注册
- 获å–用户信æ¯
- 更新用户信æ¯
-
活动æœåŠ¡ (eventService)
- 获å–活动列表
- 获å–活动详情
- æœç´¢æ´»åŠ¨
-
订å•æœåŠ¡ (orderService)
- 创建订å•
- 获å–订å•åˆ—表
- 更新订å•çŠ¶æ€
- åˆ é™¤è®¢å•
所有API请求通过Axios进行å°è£…，实现了请求拦截和å“应拦截，统一处ç†è®¤è¯å’Œé”™è¯¯æƒ…况。
- / - 首页
- /movie - 电影页é¢
- /concert - 演唱会页é¢
- /detail - 活动详情页
- /payment - æ”¯ä»˜é¡µé¢ (ç§æœ‰è·¯ç”±)
- /resultPage - 支付结果页 (ç§æœ‰è·¯ç”±)
- /profile - 个人ä¸å¿ƒ
- /order - 订å•åˆ—表 (ç§æœ‰è·¯ç”±)
- /login - 登录/注册页é¢
- /search - æœç´¢é¡µé¢
npm installnpm run devnpm run buildnpm run preview