使用ivx实现影院订票的经验总结
今天我们来制作一个影院订票模型,模型中用户可以选择影片、场次和座位,并且支持一次预定多张影票,下面来说一说具体实现方法。
一.数据库
1.影片库
在实际案例中可能需要添加更多字段,比如演员表,影片描述等,模型中我们就简化一下,只保存影片名称和影片海报。
2.影厅库
影厅中的座位一般都是按照行列排序,所以我们可以用一个二维数组存储影厅的座位信息。不过影厅中的座位可能如下图中的情况,并不是对应一个完整的二维数组,所以我们令数组元素为true和false分别表示有无对应座位。具体操作就是添加一个JSON字段位置地图,将二维数组写成JSON字符串格式添加到数据库中。另外我们还需要添加一个JSON字段定座地图,这个字段中true和false表示座位是否被预定,不过由于每个影厅会放映多个场次,因此具体的定座情况是无法在影厅库中体现的,我们就只是保存一份所有座位都为未被预定的初始状态数据。
3.场次库
场次库中前面几个字段保存的是影片名称、日期、开场散场时间和影厅名等基本信息,后面的位置地图和定座地图则与影厅库中的含义相同,而且添加新场次时其初始值就由是影厅库的输出结果直接赋值的(本案例中使用Ctrl+C,Ctrl+V在数据库里直接输入就可以了)。显然场次库中定座地图字段的值是会随着用户订票操作而改变的。
4.用户选座记录
这个数据库中我们存放用户成功定座的操作记录,因为数据库会默认添加提交用户,所以我们只需再用两个字段记录用户所选择的电影场次ID和选择的座位即可。要注意这里的“用户选择”是一个一维数组格式的JSON字段,每个引号里的内容代表一个座位,“-”前是行号,“-”后是列号。
二.服务
1.选择影片
选择影片服务中将所选影片的名称传给服务即可,数据库会把场次库中该影片的所有场次输出并返回。
2.选择场次
其实选择影片时已经将该影片的所有场次信息都输出到前台了,不过在输出到前台后可能又有其他用户成功订票导致后台数据更新,所以还是添加一个选择场次服务,能够通过数据ID让场次库输出该场次的最新数据。
3.选座订票服务
接下来就是案例的核心——选座订票服务了,我们需要传给服务的是选择场次的ID和所选座位组成的一维数组。首先我们会将该场次的定座地图输出到后台的一个二维数组里,然后将数值变量“可以定票数”归零。之后我们通过一个循环判断用户所选的每一个座位是否被预定,如果没有就让“可以订票数”加1,并将二维数组中对应的元素改为true。
循环结束后如果“可以订票数”等于用户传给服务的一维数组中元素的个数,就说明用户所选的座位都是可预订的,就将更改后的二维数组更新到场次库中并返回seccess,如果不等于则说明已有其他用户预订此座位,定座失败,返回fail。
三.前台
1.影片选择页面
在页面初始化时,我们让影片库将所有影片输出到前台对象数组中,通过循环创建展示所有影片。
当用户选择某一影片后,调用选择影片服务,将返回的影片场次信息保存到前台的对象数组“场次选择”中。
2.场次选择页面
在场次选择页面中,我们依旧是通过循环创建展示出所有场次。当用户选择场次后通过该场次的数据ID调用选择场次服务,获取场次数据,并且将返回结果中的定座地图和位置地图分别保存到两个二维数组。
3.位置选择页面
在位置选择页面,首先利用二维数组“位置地图”进行一个双层的循环创建,然后通过if容器判断当前数据的值,如果为true说明该点有座位,就显示一个座位的图标;如果为false就用一个与背景颜色相同的分割线组件占位。当然展示的座位还有3种情况,已被预订,未被预订和当前用户选中,我们需要再进行两层判断,在有座位的情况下座位是否被预定,没被预定的情况下是否被当前用户选中。
接下来是订票操作的逻辑,当点击一个处于未被预订状态的座位图标时,我们会先判断这个座位是否在一维数组“用户选择”里,如果不在就用该座位的行列号拼成“3-3”这样的格式加到“用户选择”中,如果已经在“用户选择”里就将该值从数组中删除。(可以注意到上一步中判断是否将座位显示为用户选中状态的if容器,其筛选条件与此处的逻辑是对应的)
最后是提交定座,最下方按钮的禁用属性和内容都与“用户选择”进行了数据绑定,当“用户选择”的元素个数为0,也就是当前用户没有选择座位时,按钮会被禁用并显示Please select the seat,当用户选择座位后按钮会显示Buy tickets并允许点击。点击后则调用选座订票服务,返回该场次最新的数据信息并告知用户定座结果。
总结
案例中第一个难点是要使用合适的数据结构存储用户的订票信息,这点需要大家能够熟练使用JSON字符串,设计出自己需要的变量格式;第二个是在展示座位状态时使用了多层的for容器和if容器,这里我们需要明确每层循环的数据格式和类型,以及if容器进行判断的条件分支结构。