React(3): React 实现卖座App

React实现卖座App

娱乐项目,请勿当真 !!!

简介

之前在学习React的时候,在 bilibili 看到 React 学习视频,于是马上着手 React版本的卖座App 开发

技术栈

// 前端
React TypeScript Antd-Mobile Dayjs 3D-selection tailwindcss
// 后端
nestjs(websocket+jwt等)

接口对接

  1. 部分直接调用 卖座App接口
  2. 支付接口自己写的 nestjs 后端 , 用的是 支付宝沙盒
  3. 很小部分用的是 mock 的接口

部分详情截图

选择城市

React(3): React 实现卖座App_第1张图片

选择电影

React(3): React 实现卖座App_第2张图片

影院搜索

React(3): React 实现卖座App_第3张图片

登录

React(3): React 实现卖座App_第4张图片
React(3): React 实现卖座App_第5张图片

选择电影

React(3): React 实现卖座App_第6张图片

选座

React(3): React 实现卖座App_第7张图片

提交订单

React(3): React 实现卖座App_第8张图片

支付

React(3): React 实现卖座App_第9张图片

支付成功和出票

React(3): React 实现卖座App_第10张图片

我的订单

React(3): React 实现卖座App_第11张图片

优惠卷

React(3): React 实现卖座App_第12张图片

客服

React(3): React 实现卖座App_第13张图片

结尾

  1. 大概就这些功能,感觉自己搞了个 低配版卖座App
  2. 自己对 TS 其实并不太能掌握,可能导致有些混乱,请见谅
  3. 自己的 后端水平, emmmm,真不好说,如果我这个建表给我大学老师看到估计头都给锤烂 ╮(╯▽╰)╭
  4. 用的是 卖座App的接口,谢谢 卖座App 提供给我这么宝贵的接口供我 学习,万分感谢
  5. 如果可以的话,可以直接 folk提issue,旨在互相学习(*^▽^*)

代码

前端: https://github.com/zhengyongkai/react-maizuo

后端 https://github.com/zhengyongkai/nest-maizuo-backend/tree/master

实现和待实现

  • 基础功能
  • 选座
  • 简单聊天
  • 订单转成图片下载
  • 支付功能,包括选择优惠券
  • 用上 tailwindcss
  • 百度地图实现路线规划
  • 余额支付
  • 优化…

关于学习

  1. 自己封装了少量 hook , 以及将自己工作的经验和学习相互转化
  2. 将一些工具封装成 单例模式
  3. 不会用ts类型体操,所以有些ts类型比较简单
  4. 年后可能再找工作机会,希望有大佬可以给一次机会

待优化

  1. 一些类型声明
  2. 一些功能页面拆分

线上地址

等我回去更新个最新版本 ==

更新

暂无

你可能感兴趣的:(react.js,前端,前端框架)