Как обновить базу данных после нажатия на элемент html?

Question

В моем приложении для колб в базе данных есть столбец точек, который при регистрации пользователя устанавливается в 0. Теперь я хочу иметь возможность обновлять точки в базе данных после нажатия на элемент HTML.

class User(UserMixin, db.Model):
    points = db.Column(db.Integer)

@bp.route('/activity1')
@login_required
def activity1():
    return render_template('activity1.html', title='Activity 1')

Activity1.html имеет html-элемент, генерирующий точки

@bp.route('/register', methods=['GET', 'POST'])
def register():
    ...
    form = RegistrationForm()
    if form.validate_on_submit():
        user.points = 0
        db.session.add(user)
        db.session.commit()
        ...

<a data-toggle="collapse" class="w3-large" href="#tip4" onclick="getPoints()">...</a>

<script>
function getPoints(){
  points += 20; #How do i access the database.points in this case?
}
</script>

Answer 1

Я не уверен, правильно ли я понимаю код, но вы спрашиваете, как обновить количество точек с activity1.html в последнем фрагменте кода? Это не сработает, HTML отображается на сервере и после того, как он был представлен в браузере, между ними нет никакой связи.

Если вам нужно передать некоторые данные в шаблон во время рендеринга, вы должны передать их в вызове render_template, например,

render_template('activity1.html', title='Activity 1', user=user)

Затем вы можете получить к нему доступ в шаблоне так:

<script>
function getPoints(){
  points = {{ user.points|int }} + 20;
  // post to backend to update data in database (using jQuery)
  $.ajax({
      type: 'POST',
      contentType: 'application/json',
      data: {
        id: "{{ user.id }}",
        points: points
      },
      dataType: 'json',
      url: 'http://xxx/update_points',
      success: function (e) {
          // successful call
      },
      error: function(error) {
          // an error occured
      }
  });
}
</script>

Если вы хотите обновить пользовательские точки в базе данных, вам нужно будет отправить запрос на сервер, который позаботится об этом. На стороне сервера во Flask определите представление для обработки этого запроса:

@bp.route('/update_points', methods=['POST'])
def update_points():
    data = request.get_json()
    # don't know exactly what's the model and how to get the 'user' instance
    user = User.get_user_by_id(data['id'])
    user.points = data['points']
    db.session.add(user)
    db.session.commit()

Возьмите его в качестве примера кода, я не тестировал его и пропустил довольно много деталей (например, как получить экземпляр user в update_points и т. Д.) Кроме того, я мог пропустить то, что вы действительно спрашиваете для.