PythonAnywhere Web 应用程序，显示图像库并为它们投票。投票（喜欢）将存储在 SQL 数据库中

Question

所以，我试图构建一个网络应用程序，将图像 URL 存储在数据库中，用户必须喜欢或不喜欢帖子（图像），并且投票将记录在数据库中。 我想检索数据库以查看最喜欢或最不喜欢的图像等，暂时，我在我的 HTML 代码中硬编码图像 URL。我无法将这些 URL 连接到数据库。 我还在 HTML 代码中添加了两个函数 AddClick() 和 MinusClick() 来统计喜欢和不喜欢，但是一旦页面刷新，一切都消失了。

我创建了 HTML 页面和 flask_app.py 以包含数据库并呈现 HTML 模板。

flask_app.py代码：

class Like(db.Model):

    __tablename__ = "likes"

    id = db.Column(db.Integer, primary_key=True)
    image = db.Column(db.String(4096))
    count = db.Column(db.Integer)


@app.route("/", methods=["GET", "POST"])
def index():
    count = request.args.get('Clicks')
    if request.method == "GET":
        return render_template("main_page.html")
    count = Like(content=request.form["Clicks"])
    db.session.add(count)
    db.session.commit()
    return redirect(url_for('index'))

main_template.html代码：

<script>var Clicks = 0 ;
function AddClick(){
    Clicks = Clicks + 1;
    document.getElementById('CountedClicks').innerHTML = Clicks + ' Likes';
}
function MinusClick(){
    Clicks = Clicks - 1;
    document.getElementById('CountedClicks').innerHTML = Clicks + ' Likes';
}
</script>

<div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <a class="lightbox" href="https://cdn-images-1.medium.com/max/1200/0*9kZ68wExkrUDFn4U.jpg">
                    <img src="https://cdn-images-1.medium.com/max/1200/0*9kZ68wExkrUDFn4U.jpg" alt="3">
                </a>
                <span id="CountedClicks">0 Likes</span><br>
                    <button onclick="AddClick()">
                    <a class="social-like" >
                        <span class="like"><i class="glyphicon glyphicon-thumbs-up"></i></span>
                        <span class="count" >0</span>
                    </a>
                    </button>
                    &nbsp;
                    <button onclick="MinusClick()">
                    <a class="social-dislike" >
                        <span class="dislike" >0</span>
                        <span class="like"><i class="glyphicon glyphicon-thumbs-down"></i></span>
                    </a>
                    </button>
                    <h3>08-Nov-18</h3>
                    <p>Third one</p>
                </div>
            </div>
        </div>

页面似乎可以正常加载，并且在页面刷新之前按钮也可以正常工作。

Answer 1

在您告诉服务器更新计数的 Javascript 代码中没有任何意义。所以你只更新浏览器中的变量。这就是为什么刷新时会忘记计数的原因。

您需要一个表单来发布到您的视图以增加计数（thix 将在每次点击时刷新页面），或者您需要使用 AJAX 调用服务器来更新代码（这不会每次点击刷新整个页面）。