Question

在我的flask应用程序中，我在数据库中有一个points列，在用户注册时将其初始化为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实例等。）此外，我可能错过了你真的在要求。

单击html元素后如何更新数据库？

1 个答案: