在这篇教程中，我们来搭建一个简单的投票应用（可以发布为小程序，或移动端H5），应用的核心流程如下：

用户进入投票后，首先查看候选人列表，在候选人列表中，可以直接投票，点击候选人头像，将进入候选人详情页，在详情页也可以对该候选人进行投票。

案例下载地址：https://latest.ivx.cn/ih5/app/template/download?id=104
案例预览二维码：（由于限制了微信中登录，H5或小程序，因此pc预览时，无法正常投票）

初始化候选人信息

在这个应用中，候选人信息是由主办方预先添加的。我们首先添加一个后台的投票组件，然后选中其下“候选人信息表”的数据库。

我们可以直接在数据库中手动填写数据，或导入一个excel表格。（应用中的excel表格可以点击这里下载）
在这个excel表格中，我们并没有包含“投票数”这个字段，因为投票数是在应用运行时执行“投票”动作时自动增加的，初始时，任何候选人的投票数都为0。

在其他投票应用中，候选人信息也可以在应用运行时进行添加和修改，比如，一个让用户自行报名的投票活动，可以由用户提交自己的信息作为候选人信息，但这个应用的场景是由主办方上传候选人信息，因此我们没有添加候选人报名功能。

投票相关服务配置

这个投票应用包含两个最基础的后台服务，即“获取候选人列表”与“投票”。

“获取候选人列表”，用于输出候选人列表需要的候选人信息，在这个应用中，由于我们的候选人的个数只有15个，我们只需要一次性输出候选人即可：

投票组件的“获取候选人列表”动作，本质就是候选人信息表的输出，以上服务中，我们只是做一个简单的列表输出，没有设置任何筛选或排序。

“投票”服务，是在用户点击投票按钮时调用的服务，这个服务，我们只需要调用投票组件的“投票”动作即可，这个动作会自动在投票流水记录表中添加一条记录，并给相应的候选人加一票。

注意，投票的动作可能会失败，比如，超出了个人的投票次数，因此，我们在设计这个服务时，需要返回是否成功以及失败原因，这样可以在投票失败时，在前端应用中弹出相应的提示。

候选人列表的展示

在这个应用中，我们在用户点击“马上投票”的时候，去调用获取候选人列表服务，并把候选人列表装到“候选人列表”这个对象数组中。服务成功返回后，再跳转至列表页面，确保跳转后页面中的列表即可有数据来源。

在以上点击事件中，我们还对候选人列表中的“简介”列进行了数组转化，为详情页的简介标签云做准备。

在列表页中，我们直接使用面板+循环容器，来制作候选人列表，这个是一个基本的列表展示，在这里就详细展开了。（列表展示的基础教程请点击这里）。

除了候选人列表，在这个列表页中，还有一个“总票数”的显示。

这个总票数，我们可以直接使用数据绑定来实现，由于所有的数据都来源于“候选人列表”这个对象数组，每次投票之后，这个总投票数都会自动统计，不需要额外的事件去计算了。

具体的选择方法如下：

投票按钮的动作

当用户点击列表中的投票按钮时，我们会当前候选人进行投票：

在以上事件中，除了调用投票的服务，我们还在服务返回时判断投票是否成功，如果成功，就让当前候选人的票数显示加1，如果失败，就显示失败弹窗。

注意，在投票成功后，我们不需要重新向后台请求输出最新的票数列表，只需要在前端给投票用户一个票数加1的反馈即可。因此，我们只需要找到当前候选人票数所对应的数据源的位置，即“候选人列表”对象数组中的“格子”的位置，对它执行加1操作。通过更改这个源数据，“总票数”的显示和详情页中的票数显示也会相应的更新。

限制用户投票次数

在这个应用中，我们对用户的投票次数做了一个简单的限制，即每人每天可以投3票，这个限制，只需要在投票流水记录表的数据库提交限制中设置即可：

注意，每人提交次数的限制，需要配合用户身份的鉴别（用户身份鉴别的基础介绍请点击这里）。在微信公众号和微信小程序中，系统会在初始化时获取用户的openid，但在pc环境中，我们需要首先判断用户是否匿名，如果非匿名，才可正常投票。在这种情况下，我们需要更新一下我们的投票服务：

详情页基础部分的显示

在这个应用的数据结构中，我们将所有候选人信息，包括详情页中显示的信息，全部存储在候选人信息表中，因此，一次输出之后，我们不需要再去后台查询相关的候选人详情。

（在其他很多应用场景中，候选人详情可能包含非常多的信息，在这种情况下，我们把候选人详情存储在候选人列表中就不合适了，这会导致列表一次性输出太多无关的信息。此时，我们建议将候选人详情存储在另外一张数据表中（在投票组件之外，自行添加一个额外的普通数据库），专门用户来存储候选人详情，在用户点击某个候选人时，才去查询此候选人的详情进行输出。）

回到我们当前的应用，在详情页下，我们添加一个核心变量：“候选序号”，代表当前详情页对应的候选人。

当用户在列表页点击每个候选人头像时，在跳转详情页前，我们将当前候选序号赋值为列表的当前序号：

有了这个候选序号之后，我们就可以直接定位到“候选人列表”中的相应行，将对应的信息绑定到详情页中，比如，“生活照”图片的绑定如下:

详情页中的性格标签云

详情页中还有一个特殊的区域，是一个“性格标签”云。

这个标签云不是投票的关键组成部分，但我们还是来介绍一下它的制作方法：

首先，在候选人信息表的“简介”字段中，我们以字符串数组的形式，存储了每个候选人的标签：

在获取候选人列表时，我们将简介字段转化为数组形式（数据库中存储的只是数组形式的字符串）

最后，在详情页中，为了引用方便，我们添加了一个额外的“标签数组”，绑定当前候选人对应的“简介”数组。

有了这个数组之后，我们就可以通过循环容器来创建标签，只需要把预先设置好的样式数据（位置，大小，透明度等）添加至数据源即可。但在这个应用中，为了编辑简便，我们使用了另外一种方法，即预先添加好8个文本（前提是我们的标签最多有8个）：

然后分别绑定标签数组中的相应元素，注意，由于每个候选人的标签数量不同，我们首先需要判断这个标签是否存在，然后再进行绑定，比如：

这个公式，就是判断标签数组的第8个元素是否存在，如果不存在，就使用一个空字符串。

【iVX】使用投票组件快速搭建一个投票应用相关推荐

如何快速搭建一个社交网站平台？
2019独角兽企业重金招聘Python工程师标准>>> 截至到2017年12月,我国的网民规模已经达到了7.72亿,而手机网民规模也达7.53亿,2017年网络社交娱乐类应用用户规模 ...
go html vue,用Go+Vue.js快速搭建一个Web应用(初级demo)
Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文给大家介绍用Go+Vue.js快速搭建一个Web应用(初级demo). 环境准备: 1. 安装go语言,配置go开 ...
使用 Blazor 开发内部后台（四）：基于Card组件快速搭建导航首页
James: 本系列为大家介绍如何使用 Blazor 来开发管理后台,有兴趣的朋友欢迎跟着实验,体验 Blazor 开发的高效与乐趣. 本系列目录: 使用 Blazor 开发内部后台(一):认识Bla ...
创建微服务架构的步骤_如何快速搭建一个微服务架构？
原标题:如何快速搭建一个微服务架构? 微服务火了很久,但网上很少有文章能做到成熟地将技术传播出来,同时完美地照顾"初入微服务领域人员",从 0 开始,采用通俗易懂的语言去讲解微服务 ...
如何快速搭建一个像“天猫精灵”的智能语音助手？
不看这几篇好文,就别说自己了解物联网天猫精灵相信大家都不陌生了,它是阿里巴巴于2017年7月5日发布的AI智能终端品牌.让用户以自然语言对话的交互方式,实现影音娱乐.购物.信息查询.生活服务等功能操 ...
小程序教程1：初识小程序，快速搭建一个小程序项目
前言: 打算整理一个小程序系列的资料.如何快速搭建一个小程序项目,以及一个小程序项目应该有哪些内容. 相关资料: 微信公众平台微信公众平台,给个人.企业和组织提供业务服务与用户管理能力的全新服务平台. ...
如何快速搭建一个基于FengMap的地图导航应用？
蜂鸟视图自成立以来就专注于提供从地图数据生产.地图编辑运维.地图应用开发的全流程专业技术产品与服务.长期的市场考验与技术迭代升级,产品功能接口较全面,性能表现优异. 日前,蜂鸟视图正式向海内外开发者用 ...
【腾讯云 Finops Crane 集训营】如何在Windows上快速搭建一个Kubernetes+Crane 环境及应用
一.前言个人主页: ζ小菜鸡大家好我是ζ小菜鸡,让我们一起学习在 Windows 如何快速搭建一个Kubernetes+Crane 环境及应用. 如果文章对你有帮助.欢迎关注.点赞.收藏(一键三连 ...
使用SpringBoot一小时快速搭建一个简单后台管理（增删改查）（超详细教程）
最近也是临近期末了,各种的期末大作业,后台管理也是很多地方需要用到的,为了方便大家能快速上手,快速搭建一个简单的后台管理,我花了两天时间整理了一下我会从0开始介绍,从数据库的设计到前端页面的引入最后 ...

【iVX】使用投票组件快速搭建一个投票应用