使用 Flask 构建一个简单的点赞系统并解决重复点赞问题

BARRY_NINE

于 2024-09-07 19:23:57 发布

阅读量516

点赞数 10

文章标签： flask python 后端

本文链接：https://blog.csdn.net/BARRY_NINE/article/details/142000782

版权

在这篇文章中，我将带大家一起实现一个基于 Flask 框架的简单点赞系统，并讨论如何解决点赞后刷新页面导致重复点赞的问题。我们将从构建基本功能开始，然后引入常见的 Flask 技术——重定向，来避免重复提交表单所引发的问题。

什么是 Flask？

Flask 是一个非常轻量且易用的 Python Web 框架，常用于开发小型应用或原型项目。它的简洁性使其成为了初学者和经验丰富的开发者的理想选择。

在我们的项目中，我们会使用 Flask 来实现以下功能：

访问首页显示点赞系统。
用户点击“点赞”按钮后，点赞数更新。
解决浏览器刷新导致的重复点赞问题。

项目需求

显示一个包含多个节假日名称的页面，每个节假日有一个对应的点赞按钮。
用户点击按钮时，节假日的点赞数量会增加。
需要解决用户刷新页面时，点赞数不断增加的情况。

环境准备

在开始之前，请确保已安装 Flask，可以通过以下命令来安装 Flask：

pip install Flask

构建点赞系统

1. 初始化 Flask 应用

首先，我们初始化一个 Flask 应用，并在 /index 路由中显示一个节假日的列表和它们的点赞数。在 /dianzan 路由中，我们处理点赞功能，每当用户点击按钮时，对应节日的点赞数将增加。

Python 代码：

from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

# 模拟的数据
data = [
    {'id': 0, 'name': '中秋节', 'num': 0},
    {'id': 1, 'name': '元旦节', 'num': 0},
    {'id': 2, 'name': '国庆节', 'num': 0}
]

@app.route('/index')
def index():
    return render_template('index.html', data=data)

@app.route('/dianzan')
def dianzan():
    id = request.args.get('id')
    if id is not None:
        data[int(id)]['num'] += 1
        print(f'想要给 {id} 点赞')
    
    # 点赞后重定向回到首页，防止重复提交
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True)

代码解析：

数据定义：我们定义了一个 data 列表，其中包含多个节假日和它们的点赞数，使用 id 来唯一标识每个节假日。
/index 路由：在 /index 路由中，我们渲染了一个模板，并将 data 传递给模板。在模板中，用户可以看到每个节日的名称、点赞数以及点赞按钮。
/dianzan 路由：当用户点击点赞按钮时，向 /dianzan 路由发送请求，我们会通过 request.args.get('id') 获取用户点赞的节日 id，然后相应地增加 num。执行完点赞逻辑后，使用 redirect(url_for('index')) 重定向回到首页，防止刷新页面时重复点赞。

2. HTML 模板

接下来，我们创建一个 index.html 文件，负责展示节日和点赞按钮。

`index.html`：

<body>
    <h1>这是一个点赞系统</h1>
    {{ data }}
    <table border="1">
        <tr>
            <td>ID</td>
            <td>节假日名称</td>
            <td>点赞数量</td>
            <td>操作</td>
        </tr>
        {% for i in data %}
        <tr>
            <td>{{ i.id }}</td>
            <td>{{ i.name }}</td>
            <td>{{ i.num }}</td>
            <td><a href="/dianzan?id={{ i.id }}">点赞</a></td>
        </tr>
        {% endfor %}
    </table>
</body>

HTML 解析：

表格展示：我们用一个 HTML 表格来展示每个节假日的名称、点赞数和点赞按钮。
循环遍历数据：通过 Jinja2 模板语言中的 {% for i in data %}，循环遍历传递给模板的 data，生成每个节假日的行。
点赞按钮：每一行都有一个对应的点赞按钮，点击按钮时将向 /dianzan?id=<节日ID> 发送请求，服务器根据传递的 id 来处理点赞逻辑。