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 的接口

部分详情截图

选择城市

在这里插入图片描述

选择电影

在这里插入图片描述

影院搜索

在这里插入图片描述

登录

在这里插入图片描述
在这里插入图片描述

选择电影

在这里插入图片描述

选座

在这里插入图片描述

提交订单

在这里插入图片描述

支付

在这里插入图片描述

支付成功和出票

在这里插入图片描述

我的订单

在这里插入图片描述

优惠卷

在这里插入图片描述

客服

在这里插入图片描述

结尾

  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. 一些功能页面拆分

线上地址

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

更新

暂无

相关推荐

  1. react 实现自动创建api 请求文件

    2024-01-26 12:42:04       12 阅读
  2. ReactReact 组件 API

    2024-01-26 12:42:04       22 阅读
  3. react Api之createContext

    2024-01-26 12:42:04       35 阅读
  4. react api:createContext

    2024-01-26 12:42:04       14 阅读
  5. react api:forwardRef

    2024-01-26 12:42:04       12 阅读
  6. React 组件 API

    2024-01-26 12:42:04       11 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-26 12:42:04       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-26 12:42:04       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-26 12:42:04       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-26 12:42:04       18 阅读

热门阅读

  1. Backend - Django URL 路由 & 重定向 & url编码解码

    2024-01-26 12:42:04       34 阅读
  2. CentOS 7 部署 MiniKube

    2024-01-26 12:42:04       40 阅读
  3. (3)Elastix图像配准:项目实战(2D / 3D)

    2024-01-26 12:42:04       34 阅读
  4. 第30章群,环,域

    2024-01-26 12:42:04       30 阅读
  5. webRtc常用的方法

    2024-01-26 12:42:04       27 阅读
  6. 【owt】webrtc的随机数生成

    2024-01-26 12:42:04       30 阅读
  7. node多版本管理使用npm失败的方法

    2024-01-26 12:42:04       39 阅读
  8. ·状态模式

    2024-01-26 12:42:04       41 阅读
  9. JVM内存模型解析

    2024-01-26 12:42:04       27 阅读
  10. Ubuntu20.04

    2024-01-26 12:42:04       29 阅读