Веб-приложение PythonAnywhere, которое отображает галерею изображений и голосует за них.Голоса (лайки) должны храниться в базе данных SQL - PullRequest
Новая
       8

Веб-приложение PythonAnywhere, которое отображает галерею изображений и голосует за них.Голоса (лайки) должны храниться в базе данных SQL

0 голосов
/ 22 января 2019

Итак, я пытался создать веб-приложение, которое хранит URL-адреса изображений в базе данных, и пользователю должен нравиться или не нравиться пост (изображение), и этот голос должен быть записан в базе данных. Я хотел бы получить базу данных, чтобы увидеть наиболее понравившиеся изображения или наиболее не понравившиеся и т. Д. В настоящее время я жестко закодировал URL-адреса изображений в своем HTML-коде. Я не могу подключить эти URL-адреса к базе данных. Я также включил две функции AddClick() и MinusClick() в код HTML для подсчета лайков и антипатий, но как только страница обновится, все исчезнет.

Я создал страницу 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>

Страница, кажется, загружается нормально, и кнопка также работает нормально, пока страница не обновится.

1 Ответ

0 голосов
/ 22 января 2019

В вашем коде Javascript нет смысла, чтобы вы указали серверу обновить счетчик.Таким образом, вы обновляете только переменные в браузере.Поэтому при обновлении счетчик забывается.

Вам понадобится либо форма для публикации в вашем представлении, чтобы увеличить счет (тикс обновит страницу при каждом клике), либо вам нужно будет использоватьAJAX-вызов на сервер для обновления кода (это не обновляет всю страницу при каждом нажатии).

...