八、影片添加页实现《仿淘票票系统前后端完全制作（除支付外）》

一、影片添加页

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

上一届影院添加页功能已经完成，这一节咱们实现影片添加页内容。

影片添加页如下：

在这里插入图片描述

该页面实现起来比较简单，点击图片后使用文件上传组件进行图片上传即可。

首先添加文件接口到当前页面之下：

在这里插入图片描述

随后给按钮添加时间，首先需要读取文件：

在这里插入图片描述

在上图中可以看到，我再是否输出 base64 图片时选择了 是，这是因为在接下来上传图片时我们可以直接得到 base64 图片，这样即可方便的完成上传。在此还需要注意的一点就是，咱们需要先读取拿到图片后才可以进行内容上传，在读取图片的回调之中，再次调用这个文件接口，在动作中选择上传图片信息：

在这里插入图片描述

随后在上传完成的结果中将上传图片的 url 地址给与到图片之中即可。

二、创建影片数据库

接着咱们创建影片数据库，影片数据库字段如下：

在这里插入图片描述

在这里插入图片描述

该影片数据库依旧有是否删除字段，默认值为0.咱们主要要了解已添加影院这个字段，这个字段其实和影院中已添加影片字段是对应的。

在进行数据库搜索时，影院中的已添加片用于在选择影院时可以直接通过当前影院的已添加影院字段对影片进行搜索，否则你若使用一个数据库记录当前影院的影片，那么将会出现从一个大量数据表里查询内容，此时查询是效率非常低的，并且你需要搜索数据库的次数要多两次，若在这里直接使用一个一位数组存这些值，随后就可以直接通过当前影院自带的影片字段去数据库搜索内容，那么中间就少了两个步骤，极大的增加了搜索数据库时的效率，这个效率是体现在响应速度上的。

同理，这个影片中的已添加影院也是如此，在用户点击当前影片进入到影院选择阶段时，将会弹出多个影院进行选择，该步骤是表示用户需要到哪个影院进行观影，若此时也是通过一个数据库进行存储已添加的影院值，那么也会出现多次的数据库查询操作，这是不规范的，要尽量减少这些影响响应的查询。

此时知道了字段设置的理由后，咱们创建一个服务用于存储提交的影片信息：

在这里插入图片描述

首先需要的服务字段如下：

在这里插入图片描述

随后直接提交即可：

在这里插入图片描述

三、影院在首页的显示

已经完成了影片和影院的增加，那接下来咱们先显示影院和影片在首页。

首先需要创建一个影院获取的服务：

在这里插入图片描述

接着直接使对应数据库输出内容即可：

在这里插入图片描述

此时一定需要注意，咱们输出的影院不是所有影院，影院一定要是未删除的影院，所以在筛选条件中设置条件是否删除为0，否则为1则是已删除内容，不进行输出。

输出内容后前端肯定需要一个容器进行存储，此时创建一个对象数组作为存储容器，因为返回内容为对象数组，咱们进行接收的最好方式也是对象数组：

在这里插入图片描述

此时设置这个影院数据对象数组的字段，一定要与数据库输出内容对应，否则很你将很困难的进行调用：

在这里插入图片描述

在这里插入图片描述

接着直接调用即可：

在这里插入图片描述

随后在影院的前端页面中进行遍历：

在这里插入图片描述

此时循环创建的内容是刚刚使用对象数组接收的内容，设置循环创建的数据来源为影院数据：

在这里插入图片描述

随后在显示文本的数据绑定中绑定对应的影院数据即可：

在这里插入图片描述

那为什么这里还需要设置对应的标签内容呢？

在这里插入图片描述

这是因为标签这一列的内容是一个一位数组，此时直接作为循环创建的数据来源那么久可以自动解析后进行循环：

在这里插入图片描述

最后界面如下：

在这里插入图片描述