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

线上地址

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

更新

暂无

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/347564.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

《Linux高性能服务器编程》笔记08

Linux高性能服务器编程 本文是读书笔记,如有侵权,请联系删除。 参考 Linux高性能服务器编程源码: https://github.com/raichen/LinuxServerCodes 豆瓣: Linux高性能服务器编程 文章目录 Linux高性能服务器编程第08章 高性能服务器程序框架8.1 服务器…

Redis——list以及他的应用场景

介绍 :list 即是 链表。链表是一种非常常见的数据结构,特点是易于数据元素的插入和删除并且且可以灵活调整链表长度,但是链表的随机访问困难。许多高级编程语言都内置了链表的实现比如 Java 中的 LinkedList,但是 C 语言并没有实现…

如何学习VBA_3.2.12.13:VBA中工作表函数的利用

我给VBA的定义:VBA是个人小型自动化处理的有效工具。利用好了,可以大大提高自己的劳动效率,而且可以提高数据处理的准确度。我推出的VBA系列教程共九套和一部VBA汉英手册,现在已经全部完成,希望大家利用、学习。 如果…

JavaScript进阶:WebAPIs重点知识整理1

目录 1 DOM修改元素内容 2 DOM修改元素常见属性 3 修改元素样式属性 3.1 通过style修改元素样式 3.2 通过类名className修改元素样式 3.3 通过classList修改元素样式 4 操作表单元素属性 5 自定义属性 6 定时器 7 事件监听 7.1 点击事件 click 7.2 鼠mouseenter和移…

Web网页生成桌面应用

前言:网页生成桌面指的是将一个网页保存为桌面应用程序的形式,使得用户可以在桌面上直接打开该网页,而不必通过浏览器打开。这种桌面应用程序一般具有独立的窗口、菜单、工具栏等界面元素,能够提供更加方便快捷的使用体验。 实现…

Vue 动态组件与异步组件:深入理解与全面应用

聚沙成塔每天进步一点点 本文内容 ⭐ 专栏简介1. 动态组件实现原理:用法示例: 2. 异步组件实现原理:用法示例: 3. 异步组件的高级应用a. 异步组件的命名:b. 异步组件的加载状态管理: ⭐ 写在最后 ⭐ 专栏简…

目标检测算法改进系列之添加C2f-DCN模块

DCNv2简介 可变形卷积网络的卓越性能源于其适应物体几何变化的能力。通过对其自适应行为的检查,我们观察到,虽然对其神经特征的空间支持比常规的 ConvNet 更接近对象结构,但这种支持可能远远超出感兴趣区域,导致特征受到不相关图…

使用KMP迁移Android app到IOS平台

使用KMP迁移Android app到IOS平台 如果你有一款Android app,你想将其迁移到IOS平台,但是你不熟悉Swift语言,那么你该如何做呢?辛亏JetBrains 推出 Kotlin Multiplatform 和 Compose Multiplatform ,突然间&#xff0c…

代码随想录算法训练营第十六天| 104.二叉树的最大深度 ● 111.二叉树的最小深度 ● 222.完全二叉树的节点个数

104.二叉树的最大深度 本题可以使用前序(中左右),也可以使用后序遍历(左右中),使用前序求的就是深度,使用后序求的是高度。 ●二叉树节点的深度:指从根节点到该节点的最长简单路径边…

Linux-Shell脚本基础

一、前言: 1.程序编程风格: 面向过程语言: 开发的时候 需要 一步一步 执行 做一件事情,排出个步骤,第一步干什么,第二步干什么,如果出现情况A,做什么处理,如果出现了情…

DC-9靶机做题记录

靶机下载地址: 链接:https://pan.baidu.com/s/1LR44-oFnO6NU6bTNs7VNrw?pwdhzke 提取码:hzke 参考: 【DC系列靶机DC9通关讲解】 https://www.bilibili.com/video/BV1p24y1s78C/?share_sourcecopy_web&vd_source12088c392…

Fluent Bit配置与使用——基于版本V2.2.2

Fluent Bit日志采集终端 文档适用版本:V2.2 1、日志文件处理流程 数据源是一个普通文件,其中包含 JSON 内容,使用tail插件记录日志,通过parsers进行格式化匹配(图里没写),通过两个筛选器&…

白酒:发酵过程中的化学反应与香气形成

云仓酒庄的豪迈白酒在发酵过程中经历了多种化学反应,这些反应对于酒的香气和口感的形成起到了至关重要的作用。 首先,我们要了解发酵的定义。发酵是一个生物化学过程,通过特定微生物的作用,将原料中的糖类物质转化为酒精和二氧化碳…

爬虫正则+bs4+xpath+综合实战详解

Day3 - 1.数据解析概述_哔哩哔哩_bilibili 聚焦爬虫:爬取页面中指定的页面内容 编码流程:指定url -> 发起请求 -> 获取响应数据 -> 数据解析 -> 持久化存储 数据解析分类:正则、bs4、xpath(本教程的重点) 数据解析原理概述&am…

JQuery下载和一些语法

最近学了六种jQuery选择器,我想把学过案例和知识结合起来,给大家分享下! 那么既然学jQuery选择器,肯定要先了解下jQuery是什么吧!jQuery是一个快速、简洁的JavaScript框架,相当于用jQuery能更加高效的创建…

男主角展现炸裂演技,演绎方式独具匠心,令人叹为观止

♥ 为方便您进行讨论和分享,同时也为能带给您不一样的参与感。请您在阅读本文之前,点击一下“关注”,非常感谢您的支持! 文 |猴哥聊娱乐 编 辑|徐 婷 校 对|侯欢庭 在漫长的等待之后,《要久久爱》这部都市情感剧终…

Redis的主从复制

目录 一、主从复制 1.主从复制是什么 2. 主从复制能干嘛 3 主从复制 3.1创建一主二仆 3.2创建伪主从 3.3编写配置文件 3.4启动三台redis服器 3.5配置注册关系 4.复制原理 5.薪火相传 6.反客为主 7.哨兵模式(sentinel) 一、主从复制 1.主从复制是什么 主机数据更新…

服务器运维小技巧(二)——如何进行监控告警

服务器运维难度高的原因,很大程度是因为服务器一旦出现问题,生产环境的业务就会受到严重影响,极有可能带来难以承担的后果。因此这份工作要求工程师保持高要求的服务质量,能够快速响应问题,及时解决问题。 但是“及时…

EasyExcel实现导出图片到excel

pom依赖&#xff1a; <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.1.0</version> </dependency> 实体类&#xff1a; package com.aicut.monitor.vo;import com.aicut.monit…

springboot优雅停机

import org.springframework.context.annotation.Configuration;import javax.annotation.PreDestroy;Configuration public class DataBackupConfig {PreDestroypublic void backData(){System.out.println("开始备份..."System.currentTimeMillis());System.out.pr…