一个简单投票场景的实现

[ben7th]

需求来源是春节前看到的一个课程格子的小游戏：校花争霸
http://kechenggezi.com/campus_star_games
可以访问这个地址来体验一下。

---

这个场景形式非常好，可以加以改造，并套用别的内容，添加到我们正在开发的投票产品（pinIdea）里，来支持其他用途。

---

这个场景的逻辑可以简单描述如下：

1. 后台存在许多条数据，每条数据有一个id和一个count值，以及其他属性（在这里是校花的照片，名字，学校等其他信息）。在实现场景时，可以这样建模：

   VoteItem
    id: 唯一标识
    name: 条目名称
    data: 条目其他附加信息
    count: 条目目前的计数值

   开发时，可以先手动准备很多条这样的数据，放在一个 yaml 文件里让后台访问（简单起见先不使用数据库）。
   等到后续集成时，会集成到 pinIdea 产品提供的 API 上.

2. 当用户进入场景时，从后台的数据中随意挑选由程序指定的若干条（这个校花的场景里面是每次挑选两条）并呈现在页面上，等待用户点选其中的一条。

   

3. 当用户点选其中的一条后，浏览器发出一个对后台的请求，把【当前呈现在页面上的所有条目id】和【用户选择的id】发给后台进行检验。
   后台根据传入的这些id，查找并比较每个 id 对应的 vote_item 的 count 值，并把这些数据返回给前端。
   

   范例场景的参数和返回数据： 实现时可以参考。返回数据中最重要的信息就是每个item的count值，其他的不重要。

   参数：

   select_id:261965
   compare_id:261399
   current_level:2

   返回数据：

   {"success":true,"result":true,"left_star":{"id":241923,"avatar":"http://img.kechenggezi.com/image/images/9ed4dedbf93a41d7bb71d7cf0a80cc86.jpg!300x300","name":"刁星月","school":"中国医科大学"},"right_star":{"id":257445,"avatar":"http://img.kechenggezi.com/image/images/61951f296d2c404782211f502ca7c161.jpg!300x300","name":"陈熠璇","school":"青岛理工大学"},"select_vote_count":58359,"compare_vote_count":5925,"percent":"4.03%"}

   每个条目的 count 值不同，前端可以很容易地判断用户选择 item 的 count 值是不是这一组中最高的。如果是最高的，说明用户选择成功，则进入下一组选择。如果不是，则说明用户选择失败，显示重来的按钮。

---

现在需要做一个简单的 rails 工程来实现这个场景
这个工程不会用到任何数据库，后台数据可以通过一个 yaml 文件记录。

[arlyxiao]

特别说明: check_items 表示显示在前端所有的选项， select_item 表示用户选择的当前项

事先准备的 yml 数据示例: https://github.com/arlyxiao/touch-vote-demo/blob/master/data/vote_item.yml

客户端发送给服务器端数据, 只传 id 值

:check_items => [1, 11], :select_item => 11

服务器端根据 id 值，找到相应的 count 值，以 json 形式返回给客户端 current_level 在服务器端以 session 的方式来存储，方便计算

服务器端返回结果

:check_items => 
[
  {:id => 1, :count => 23},
  {:id => 11, :count => 45},
], 

:select_item =>
{:id => 11, :count => 45},

:current_level => 2

[ben7th]

建议 current_level 在本地维护可能好一些 服务端应该保持无状态，避免使用session 前端使用javascript去存储level 刷新页面就丢失也没关系

[ben7th]

暂时未集成，但是可能短期内会作为特定场景加入。