flask, pymongo, forms - 将 pymongo 数据加载到表单中进行编辑

Question

我想要达到的目标：

我正在尝试从头开始构建一个非常简单的管理界面，将文本字段和图像存储在 mongodb 中。然后，用户可以登录并对站点的内容进行小的更改。

我的问题以及我认为我感到困惑的地方：

是否可以在 pymongo 中生成显示现有数据库记录的表单（以便可以在数据库中编辑和更新它们）？在试图理解问题之后，我想我的困惑在于我是否可以直接将 WTForms 与 pymongo 一起使用，或者我是否需要使用基于对象的映射器，例如 MongoEngine。

这是我的烧瓶应用程序：

app = Flask(__name__)
# define the mongo connection
app.config['DB_HOST'] = 'mongodb://localhost/'
app.config['DB_PORT'] = 27017
app.config['DB_DBNAME'] = 'my_db'
the_db = PyMongo(app, config_prefix='DB')

#others routes here...

@app.route("/admin/")
def dashboard():
    pages = list(the_db.db.pages.find({}))
    return render_template('admin.html', pages=pages)

@app.route('/admin/update', methods=['POST'])
def update():
    updated = datetime.datetime.utcnow()
    page = request.form['page_name']
    header = request.form['header']
    body = request.form['body']

    h_db.db.pages.update_one(
        {'page': page},
        {'$set':
            {
                'updated': updated,
                'header': header,
                'body': body
            }
        }, upsert=True)

    pages = list(the_db({}))
    return render_template('admin.html', pages=pages)

这是模板：

{% for i in pages %}
    {{ i.page }}<br>
{% endfor %}


{% from "_formhelpers.html" import render_field %}
<form action="/admin/update" autocomplete="on" method="POST">
    {{ render_field(form.username) }}
    <input type="text" name="page_name" /><br/>
    <input type="text" name="header" /><br/>
    <input type="TextAreaField" name="body" /><br/>
    <input type="submit" name="submit" /><br/>
</form>

Answer 1

这其实很简单。如果您查看表单的 HTML 文档，您会发现您可以执行以下操作：

  <input type="text" name="firstname" value="Mickey"><br>

“米奇”会在表格中为您显示。因此，使用烧瓶，您需要做的就是在服务器代码中声明变量，这些变量保存来自您的 mongodb 路由调用的值，然后像使用“页面”一样将它们传递给模板然后在前端您可以动态呈现它在 Jinja 中嵌入 python，类似于：

@app.route("/admin/<int:page>")
def dashboard(page):
    pages = the_db.db.pages.find({page})
    for p in pages:
        page_name = [p['page']]
        header = [p['header']]
        body = [p['body']]
    return render_template('admin.html', page_name=page_name, header=header, body=body)

然后您可以使用您的模板并嵌入：

<form action="/admin/update" autocomplete="on" method="POST">
    {{ render_field(form.username) }}
    <input type="text" name="page_name" value={{ page_name|string }}/><br/>
    <input type="text" name="header" value={{ header|string }}/><br/>
    <input type="TextAreaField" name="body" value={{ body|string }}/><br/>
    <input type="submit" name="submit" /><br/>
</form>

我不是 WTForms 专家，所以我可能会绕过它提供的一些帮助程序，但大部分基础知识都在这里。总结：

您需要解析 MongoDB 文档的元素并将它们传递给模板。您可以使用 Jinja 的强大功能，即按照 HTML 标准（元素中的“值”占位符）在适当的位置将这些值动态呈现到前端。这将得到你想要的最基本的东西。

如果你想变得花哨，你可以看看 AngularJS 来处理前端 MVC，你可以在提交之前即时可视化你的编辑......有点像你在 SO.com 上看到的你的帖子显示在编辑框下方实时显示。