如何在编辑烧瓶中的文章时填充输入

Question

我有一份文章清单。

按下编辑后，我被重定向到另一个页面，其中包含要编辑的文章的ID。

<a href="edit_article/{{article.0}}" class="btn btn-default pull-right" id="btnEditArticle">Edit</a>

这是我重定向的地方： 我希望输入内容包含相应文章的标题和正文。

这是我的后端功能：

@app.route('/edit_article/<string:id>', methods=['POST', 'GET'])
def edit_article(id):
    conn = mysql.connect()
    cursor = conn.cursor()

    result = cursor.execute("SELECT * from articles where id=%s", [id])
    data = cursor.fetchone()

    if result < 0:
        flash("Article does not exist!")

    cursor.close()
    conn.close()

    return render_template("edit_article.html", data=data)

如何使用data填充这些输入？请帮忙。谢谢。

我还会提出edit_article.html

{% extends 'layout.html' %}

{% block body %}
<div class="container">

    <div class="jumbotron">
        <h1>Bucket List App</h1>
        <form class="form-addArticle">
        <label for="inputTitle" class="sr-only">Title</label>
        <input type="name" name="inputTitle" id="inputTitle" class="form-control" placeholder="Title" required autofocus>
        <label for="inputBody" class="sr-only">Body</label>
        <input type="text" name="inputBody" id="inputBody" class="form-control" placeholder="Body" required autofocus>

        <button id="btnEditArticle" class="btn btn-lg btn-primary" type="button">Update article</button>
      </form>
          <p class="text-center" style="color:red" id="message"></p>
      </div>
    </div>
{% endblock %}

Answer 1

您只需要在输入中添加value="{{ ... }}"：

<input type="name" value="{{ data[0] }}" name="inputTitle" id="inputTitle" class="form-control" placeholder="Title" required autofocus>
<input type="text" value="{{ data[1] }}" name="inputBody" id="inputBody" class="form-control" placeholder="Body" required autofocus>

但建议将值命名为：

name, text = cursor.fetchone()
return render_template("edit_article.html", name=name, text=text)

然后

<input type="name" value="{{ name }}" name="inputTitle" id="inputTitle" class="form-control" placeholder="Title" required autofocus>
<input type="text" value="{{ text }}" name="inputBody" id="inputBody" class="form-control" placeholder="Body" required autofocus>

但我个人推荐使用WTForms模块而不是手动渲染表单 - 例如，它可以帮助您正确验证输入。