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

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 标记中添加一个数据属性，并为每个赞成/反对票执行一个 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>