十二、动态座位响应及用户订票《仿淘票票系统前后端完全制作(除支付外)》

一、动态座位设置及发布

首先打开在线编辑器进入我们的项目:https://editor.ivx.cn/

上一节中已经完成了座位设置的准备,这一节咱们将完成座位设置及发布的功能。

咱们首先给有座位设置事件:
在这里插入图片描述
有座位的事件设置当点击后更改当前的内容为0即可:
在这里插入图片描述
此时航航设置为当前序号1,当前序号2则是当前的列号,意思就是二维数组的哪一行是当前序号1决定的,当前序号1是外层循环的循环号,那么当前序号2则是当前内层循环的内容,内层循环序号则是值当前循环到的哪一个内容,那么此时序号1和序号2则表示二维数组的哪一行的内容中的哪一个,随后设置为0表示当前位置已经被占据,那么当循环内容更改后,此时位置所显示的则是无座位框。

那么点击无座位框同理,设置当前位置的内容为 1 即可,此时给无座位框增加事件:

在这里插入图片描述

设置值为相反:
在这里插入图片描述
此时点击后即可实现如图效果:
在这里插入图片描述
接着给座位设置按钮添加事件,座位设置按钮也是座位发布按钮:
在这里插入图片描述
此时需要添加一个服务,这个服务将会记录该影片的发布内容,那么此时还需要一个数据库记录内容,在此创建一个数据库命名为影片座位信息:

在这里插入图片描述
随后添加字段:
在这里插入图片描述
注意,座位信息的内容是 json 类型,因为是一个二维数组,咱们需要存储就需要存储为json,方便调用后的解析。

随后创建一个服务命名为影片座位录入:
在这里插入图片描述
接收影片信息,影院信息以及座位信息值:
在这里插入图片描述
随后直接提交即可:
在这里插入图片描述
随后点击按钮后传入对应的参数即可:
在这里插入图片描述

二、已发布电影显示座位

接着我们创建一个用户订票页:
在这里插入图片描述
购票页布局与之前的布局一致,数据来源于数据库获取,此时我们需要创建一个服务,命名为 影片座位信息获取:

在这里插入图片描述

接着我们通过接受影片ID和影院ID作为参数,对影片位置信息数据库进行搜索:
在这里插入图片描述
将传入的内容作为参数,随后进行返回,在此返回的是结果的第0行,因为一个影院只允许有一个同名影片进行发布:
在这里插入图片描述
随后在购票页添加对应的事件调用这个服务:
在这里插入图片描述
随后为这个购票页中的变量进行赋值:
在这里插入图片描述
此时购票页就会显示已发布的影片当前已有的座位信息:
在这里插入图片描述

三、购票操作

接下来开始进行购票操作,购票操作我们需要记录当前用户点击了哪个座位,这些座位的内容通过对应的座位数据进行响应,用户购票后需要对当前电影的位置信息进行更新。

首先创建一个服务命名为座位信息更新:
在这里插入图片描述
同样,接收影片信息和影院信息作为参数:
在这里插入图片描述
随后对座位进行更新即可:
在这里插入图片描述
接着我们需要创建一个订票服务:
在这里插入图片描述
这个服务需要添加对应的数据库,这个数据库需要记录对应的订票信息:
在这里插入图片描述
字段设置如下:
在这里插入图片描述
在此座位位置需要时一个 json 类型的字段,因为用户订票不一定只定一个位置,所以设置为 json 字段最为合适。

接着点击订票按钮后进行数据提交:
在这里插入图片描述
咱们还需要一步,则是需要对该电影的座位进行更新,在之后再添加一个更新服务:
在这里插入图片描述

最后将之前做的页面一个个进行相连即可完成整个影院订票项目。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

跨服务器 快速 导入数据表记录 Insert into SELECT

Use DataBaseName/*开启Ad Hoc Distributed Queries组件exec sp_configure show advanced options,1 reconfigure exec sp_configure Ad Hoc Distributed Queries,1 reconfigure*/Insert into tableName (col1,col2,col3,……) --字段不能含有…

C# 查询大型数据集

LINQ 语法非常好,但其作用是什么?我们只要查看源数组,就可以看出需要的结果,为什么要查询这种一眼就能看出结果的数据源呢?有时查询的结果不那么明显,在下面的示例中,就创建了一个非常大的数字数…

C语言试题四十七之程序定义了N×M的二维数组,并在主函数中自动赋值。请编写函数function(int a[N][M], int m),该函数的功能是:将数组右上半三角元素中的值乘以m。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 程序定义了…

第六章 三大消息摘要算法总结

6.1、MD5 推荐使用CC(即Commons Codec)实现虽然已被破解,但是仍旧广泛用于注册登录模块与验证下载的文件的完整性可以自己写一个注册登录模块;自己下载一个MD5加密的文件,然后通过之前编写的工具类(或者使用…

一、博客首页搭建搭建《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/ 一、头部导航栏思路参考 首先我们可以查看CSDN的博客首页,从中查看一下布局: 在以上首页中,我们可以得知其顶部为一个整行,这个行内容左侧为一个logo&am…

【MATLAB统计分析与应用100例】案例008:调用rand函数生成均匀分布随机数

文章目录 1. 生成随机数分布直方图2. 生成随机数矩阵,服从均匀分布1. 生成随机数分布直方图 x = rand(10) % 生成10行10列的随机数矩阵,其元素服从[0,1]上均匀分布 y = x(:)

linux samba服务器

本文转自wanglm51051CTO博客,原文链接: http://blog.51cto.com/studyit2016/1890282,如需转载请自行联系原作者

modernizer的意义

modernizer是一个js文件,会检查当前的浏览器支持什么特性,就在Html标签上添加什么类,然后如果不支持添加no-xxx类,这样,就可以针对两种情况写两种css。 http://blog.chinaunix.net/uid-21633169-id-4286857.html转载于…

拆分备份(还原)比较大的数据库为多个bak文件

工作中由于个别数据库比较大,生成的备份文件也比较大,不方便存储或者转移,可以将文件备份为多个小的bak文件。 比如一个200G的数据库,可以拆分备份为10个bak文件,则每个bak文件约在20G左右。 备份代码: /…

C语言试题四十八之该函数可以统计一个长度为2的字符串在另一个字符串中出现的次数。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写一个…

Rafy 框架 - 幽灵插件(假删除)

Rafy 框架又添新成员:幽灵插件。本文将解释该插件的场景、使用方法、原理。 场景 在开发各类数据库应用系统时,往往需要在删除数据时不是真正地删除数据,而只是把数据标识为‘已删除’状态。这些数据在业务逻辑上是已经完全删除、不可用的数据…

C#-Linq源码解析之Average

前言在Dotnet开发过程中&#xff0c;Average作为IEnumerable的扩展方法&#xff0c;十分常用。本文对Average方法的关键源码进行简要分析&#xff0c;以方便大家日后更好的使用该方法。使用Average 计算数值序列的平均值假如我们有这样的一个集合List<int> grades new L…

二、博客首页完成《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE&#xff1a;https://editor.ivx.cn/ 一、菜单思路参考及制作 在 CSDN 首页中的菜单部分为一串横排的内容&#xff0c;并且可以进行拖动&#xff1a; 首先咱们添加一个行&#xff0c;命名为菜单&#xff1a; 接着肯定是需要设置上下的内边…

【MATLAB统计分析与应用100例】案例009:创建一个RandStream类对象,调用其randn方法生成标准正态分布随机数

文章目录 1. 创建一个RandStream类对象s,其随机数生成器的算法为mlfg6331_64,初始种子为102. 调用对象s的randn方法生成10行10列的随机数矩阵x,其元素服从标准正态分布1. 创建一个RandStream类对象s,其随机数生成器的算法为’mlfg6331_64’,初始种子为10 % 对象s的randn方…

CentOS 安装NTFS-3G,让系统支持NTFS分区的方法

1、ntfs-3g依赖FUSE&#xff08;Filesystem in Userspace&#xff09; 先处理依赖 安装FUSE yum install fuse -y 2、下载并安装ntfs-3g &#xff08;先确定正确安装了rpmforge 套件&#xff0c;然后安装下列套件&#xff1a; yum install fuse fuse-ntfs-3g 若rpmforge的设置…

现在是2016-09-23,查询2个月后的月份和入职的月份相同的数据

select * from emp where to_char(hiredate,mm)to_char(add_months( sysdate,2),mm); 结果&#xff1a; 转载于:https://www.cnblogs.com/feng666666/p/5900182.html

Git之创建远程分支和删除远程分支

1、创建远程分支browser-1.8.0 在没有创造browser-1.8.0之前,我们先查看下所有分支 git branch -a 可以知道我们目前在browser-1.7.0分支,然后我们创建本地分支browser-1.8.0 git branch browser-1.8.0 再看下所有分支 git branch -a 然后我们再切换到分支browser-1.8.…

ASIHTTPRequest源码简单分析

2019独角兽企业重金招聘Python工程师标准>>> 1.前言 ASIHttprequest 是基于CFNetwork的&#xff0c;由于CFNetwork是比较底层的http库&#xff0c;功能比较少&#xff0c;因此&#xff0c;在ASIHttprequest中实现了http协议中比较多的功能&#xff0c;包括代理、gzi…

Blazor University (28)表单

原文链接&#xff1a;https://blazor-university.com/forms/表单源代码[1]EditForm 组件是 Blazor 管理用户输入的方法&#xff0c;这种方法可以轻松地对用户输入执行验证。它还提供了检查是否满足所有验证规则的能力&#xff0c;如果没有满足&#xff0c;则向用户显示验证错误…

【遥感物候】1983-2012年时间序列中国地区GIMMS 3g NDVI下载(已进行旋转、格式转换、投影变换和裁剪)

文章目录 1. 数据集简介2. 数据集预览3. 数据集下载1. 数据集简介 本数据集为1983-2012年,长时间序列中国地区GIMMS 3g NDVI,空间分辨率为0.08333度,作者已完成了数据预处理:包括旋转、格式转换、投影变换和裁剪),作者可以此基础上直接进行NDVI时空变化趋势分析、基于NDV…