Question

我正在尝试制作一个类似迷你推文的网络应用。这些帖子是从数据库中提取的，我希望得到一个“投票”。每个帖子的按钮，如下图所示。

每封帖子都有id，author，body和likes属性。单击向上投票时，需要更新likes属性。

我的问题是如何确定点击了哪个按钮。在这种情况下，route()函数和html模板的优秀策略是什么？

我在考虑为每个按钮添加一个名称，并在名称中添加post.id，然后检查request是否有该名称。但是帖子的数量事先不知道，我应该如何在request函数中编写route()签名？

我目前的模板如下

<table class="table table-striped">
{% for post in posts %}
<tr>
<td> {{ post.id }} </td>                                                   
<td> <img src="{{ post.author.avatar(50) }}"> </td>                        
<td> <b>{{ post.body }}</b> </td>                                                                                              
<td> <button type="button" name='{{'up.'+ post.id|string}}' class="btn btn-default">
<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>   
</button>
{{ post.likes}} </td>  
</tr>
{% endfor %}
</table>

，当前route()就像这样

@bbs.route('/', methods=['GET', 'POST'])                                   
def index():                                                               
    posts = Post.query.all()                                               
    return render_template('bbs/index.html', posts=posts)

Answer 1

一种干净的方法是在button标记中添加数据属性，并为每个upvote / downvote执行一个ajax请求。

https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes

在您的情况下，它将被称为data-id。

然后在你的javascript中，当点击按钮时，获取此数据属性值，并按原样制作你的网址：

/upvote/<data-id>

并使用ajax GET请求调用它（因此页面不会刷新）。

现在在烧瓶那边获取id：

@app.route('/upvote/<post_id>')
def upvote(post_id):
    print('%s upvoted' % post_id)
    # do your db update here and return a json encoded object

再次在javascript方面，当你从烧瓶中得到答案时，请相应地更新你的按钮。

假设您在upvote按钮中添加了另一个类，例如：upvote_button并且您使用jQuery，您的javascript可能看起来像这样：

<script type='text/javascript'>
$('.upvote_button').click(function(ev){
    var id = $(ev.currentTarget).attr('data-id');
    $.get( "/upvote/" + id, function( data ) {
      // change your button here, and remove its upvote_button class
      alert(data);
    });
});
</script>

有许多按钮和数据库更新的烧瓶

1 个答案: