java - 如何在 play 框架中实现投票系统？

Question

我正在尝试为诸如 SO 或 reddit 之类的问题/答案实现投票系统。到目前为止，我已经 mock 了一些问题和答案。有一个带有箭头的脚本用于 upvote/downvote 更改箭头的颜色并增加箭头旁边的数字以指示投票数。

但现在我卡住了。

模拟的答案/问题需要由 scala 模板生成，而不是由我手动输入。我不知道如何实现。

这是为箭头着色并计票的脚本:(我不得不提一下，到目前为止只有第一个箭头起作用。这可能是因为 ID 应该是唯一的，所以第二个箭头将被忽略？)

<script>
    $(document).ready(function() {
        $('#icon').click(function() {
            var $this = $(this);
            $this.css("color","orange");
            var num = $('#num');
            var currentNumber = num.text().length ? parseInt(num.text()) : 0;
            num.text(currentNumber + 1);
        });
    });
</script> 

这是一些带有箭头的答案列表条目和我手动输入的投票数的示例:

<li class="list-group-item" > <span id="icon" class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span><span id="num"></span> 7 <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span> Die Schleife springt durch <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span></li>
<li class="list-group-item" > <span id="icon" class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span><span id="num"></span> 1 <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span> Das Programm hängt sich auf <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span></li>

这是一张它现在的样子的照片。

我该如何从这里开始？我是 play 框架的新手，它是 scala 模板，所以也许我可以以某种方式让框架生成一个通用的箭头/投票组合，我可以稍后处理而不是手动放入这些行？我是否必须以某种方式将选票保存在真实数据库中？我如何进一步处理选票，即如何将它们放入变量中？

StackOverflow上还有其他几个问题和我的类似，但是几乎没有一个是用play框架的。

[编辑]:这是一个JSfiddle , 只需点击最左边的箭头。

Answer 1

假设你有一个类 Question 有一个字段 'text'

class Question {
    long id;
    String text;
}

还有一个类 Answer 带有一个字段 'text'

class Answer {
    String text;
}

现在在您的 Controller (可能是 Application.java)中，首先您会得到问题和相应的答案，然后将它们提供给您的 View :

public static Result showQuestion() {
    Question q = Question.find.byId(1);
    List<Answer> possibleAnswers = Answer.findByQuestion(q);
    return ok(showquestion.render(q, possibleAnswers);
}

现在在你看来你有这个:

@(q: Question, answers: List[Answer])

<h3>@q.text</h3>

<ul>
@for(answer <- answers){
    <li>@answer.text</li>
}
</ul>

当然，答案的标记可以像您喜欢的那样复杂(包括投票、箭头、图标等)。