【问题标题】:Ordering query data from html template in flask从烧瓶中的html模板订购查询数据
【发布时间】:2021-09-26 17:37:44
【问题描述】:

我正在使用时间对查询结果进行排序,但我想让用户能够选择他想要的数据排序方式假设他想要使用字母顺序或者他想要以升序或降序排序我想要知道如何在烧瓶中使用,对不起我的英语不好

这是我的代码

@routes.route('/posts')
def show_posts():
    page=request.args.get('page',1,type=int)
    posts=Posts.query.order_by(Posts.timestamp.desc).paginate(page,per_page=10)
    return render_template('routes/show_posts.html',posts=posts)

【问题讨论】:

  • 为此,您需要有一个表格,用于收集有关如何订购帖子的数据
  • 我知道我需要一个表单我想知道如何像其他网站一样在您选择订购数据的方式时立即应用具有选择字段的表单
  • 使用/posts?order=alphabetical&ascending=True之类的url,然后获取orderascending在数据库中使用它
  • 如果您想立即申请(无需重新加载页面),那么您必须为此使用 JavaScript。您可以使用一些可以使用 HTML 中存在的数据更改顺序的库,或者您可能需要向 Flask 发送 AJAX 请求的代码,以便以新顺序或使用新过滤器获取数据。

标签: python flask jinja2 flask-sqlalchemy flask-wtforms


【解决方案1】:

好的,这是我的第一个烧瓶答案(我昨天才完成教程):

编辑/信息:最后我没有使用任何形式来完成这个,只是简单的路线,但也可以使用形式,这似乎更简单(更多是因为我不知道如何为此使用这些表格:))

EDIT2/INFO:我也不认为对于这个特定代码,装饰器中不需要 methods 参数,因此可能会为这个特定代码删除它

主文件(它包含所有内容,因为这比显示我会使用的每个模块更容易)

from flask import Flask, render_template, url_for
from flask_sqlalchemy import SQLAlchemy


app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///site.db'

db = SQLAlchemy(app)


class Post(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(100), nullable=False)
    content = db.Column(db.Text, nullable=False)


@app.route('/posts/filter_by/<string:key>')
@app.route('/posts', methods=['GET', 'POST'])
@app.route('/')
def all_posts(key=None):
    posts = Post.query.order_by(Post.title.asc()).all()
    if key == 'ZA':
        posts = Post.query.order_by(Post.title.desc()).all()
    return render_template('posts.html', posts=posts)


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

这是模板(使用引导程序):

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle"
              type="button" id="dropdownMenu1" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
        Sort by
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <a class="dropdown-item" href="{{ url_for('all_posts', key='AZ') }}">A-Z</a>
        <a class="dropdown-item" href="{{ url_for('all_posts', key='ZA') }}">Z-A</a>
      </div>
    </div>

    {% for post in posts %}
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">{{ post.title }}</h4>
                <p class="card-text">{{ post.content }}</p>
            </div>
        </div>
    {% endfor %}

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

所以第一件事(自上而下):

导入所有需要的
然后初始化 Flask 和 SQLAlchemy 类,并将应用程序配置到数据库

创建用于存储帖子和东西的帖子模型(我不完全知道)

接下来是主要部分 - 路线。

首先我创建一个带有变量的路由:

@app.route('/posts/filter_by/<string:key>')

这将允许请求此 URL 并能够(从该变量)获取有助于处理响应的附加信息

然后添加更多路由,使 url 看起来更干净,这几乎是唯一的原因(据我所知)

然后定义函数:
将其命名为您的感受,但您必须将变量作为参数传递,并且由于使用了多个路由,并且可能出于其他原因,也可能为该参数设置了默认值,因此不需要提供它

然后使用简单的 if 语句并使用该变量处理帖子的排序方式

然后按该顺序返回包含这些帖子的模板

现在关于模板

首先它使用引导程序,我从那里获得了最多的代码(只是从他们的网站复制粘贴)或here,这是一个很好的备忘单。

所以我从该备忘单中复制了下拉菜单并更改了一些值,最值得注意的是href 属性:

我用url_for 函数替换了那些函数并传递了变量,如您所见,发送的请求带有允许处理帖子排序方式的变量

希望一切都清楚,如果您还有任何问题,请提出。

【讨论】:

  • 你可以添加描述哪些元素很重要——比如/posts/filter_by/&lt;string:key&gt;
  • @furas 添加了一些解释
  • 您添加的内容超出了我的预期:) 我赞成。现在 OP 必须决定这是否能很好地解决他的问题。
  • @furas 实际上在我看来,我本可以更详细地解释一下(至少我知道的部分)但是好的,谢谢你的支持
【解决方案2】:

首先,Matiiss 您的回答非常好,感谢您的帮助,现在我找到了另一种方式,它与 Matiiss 的回答有一些相似之处,我想分享它,所以如果有人现在发现这个问题,您必须选择答案。

@routes.route('/posts')
def show_posts():
    posts= Posts.query.order_by(Posts.name.desc()).all()
    filter_rule = request.args.get('filter')
    if filter_rule == 'A-Z':
        posts= Posts.query.order_by(Posts.name).all()
    return render_template('posts.html',posts=posts)

HTML 部分

<div class="row">
        <div class="col-md-3">
            <div class="nav nav-pills flex-column" role="tablist" aria-orientation="vertical">
                <a class="nav-item nav-link"
                   href="{{ url_for('.show_posts', filter='A-Z') }}">
                    A-Z
                </a>
                <a class="nav-item nav-link"
                   href="{{ url_for('.show_posts', filter='Z-A') }}">
                    Z-A
                </a>
            </div>
        </div>

这让我有点惊讶,我可以将变量传递给我的烧瓶路由而无需在路由中声明它们

【讨论】:

    猜你喜欢
    • 2017-12-26
    • 1970-01-01
    • 1970-01-01
    • 2020-02-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-04-27
    相关资源
    最近更新 更多