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

线上地址

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

更新

暂无

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
引用:create-react-app是一个全局的命令行工具,用于简化并创建一个新的项目。引用:react-scripts是一个生成的项目所需要的开发依赖。如果出现无法识别create-react-app的错误,可以尝试重新执行npm install -g create-react-app命令来安装它。引用:在使用create-react-app创建React应用时,有时会遇到拉取资源的速度很慢的问题。这可能是由于某些原因导致的,可以尝试一些解决方法。现在来回答您的问题。 idealTree:create-react-app是一个名为idealTree的依赖构建工具,用于创建React应用时构建相关依赖。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [React教程之使用create-react-app构建你的第一个react应用](https://blog.csdn.net/moshowgame/article/details/91970581)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [create-react-app安装出错问题解决方法](https://download.csdn.net/download/weixin_38545959/14827363)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值