2016-07-13 15 views
0

を編集するためのフォームにロードpymongoデータ:フラスコ、pymongo、フォーム - 私が達成しようとしています何

を私はテキストフィールドや画像を保存する最初から非常にシンプルな管理インタフェースを構築しようとしていますmongodb。ユーザーはログインして、サイトの内容を少し変更することができます。

私の問題は、どこで私は混乱しています考える:

は、それが示す既存のDBレコードでフォームを生成するようにpymongoで可能です(ので、彼らは、編集およびDBに更新することができますか)?この問題を理解しようとすると、私は、私が直接pymongoでWTFormを使用できるかどうか、または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> 
+0

これは、Flaskの上でDjangoを選択した例です。管理者は既に含まれており、編集ビューも含まれています。 https://docs.djangoproject.com/en/1.9/ref/class-based-views/generic-editing/#django.views.generic.edit.UpdateView – joshlsullivan

答えて

0

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

そして「ミッキー」はあなたのための形式で表示されます:あなたはフォームのHTMLドキュメントを見れば、あなたはあなたのような何かを行うことができます見つけることができますだから、フラスコを使うだけで、あなたのmongodbからの値を保持しているサーバコードの変数を宣言し、 "ページ"のようにテンプレートに渡すことができます。そして、フロントエンドでこれを動的にレンダリングすることができます神社での組み込みの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) 

は、次に、あなたのテンプレートを取り、埋め込むようにすることができます:私はWTFormsの専門家ではない

<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> 

ので、私はおそらくいくつかのヘルパーをバイパスしてることそれは提供していますが、大部分の基本はここにあります。要約:

MongoDBドキュメントの要素を解析し、テンプレートに渡す必要があります。 Jinjaは、HTML標準(要素の「値」プレースホルダ)で概説されているように、これらの値を適切な場所でフロントエンドに動的に描画する機能を使用できます。これは、最も基本的なものであなたが望むものを得るでしょう。

AngularJSを見てフロントエンドMVCを扱うことができ、投稿前にその編集を視覚化することができます。あなたの投稿がどこにあるのか編集ボックスの下にライブが表示されます。

+0

今説明したように、それは単純なようです。もう1つ、@ app.route( '/ admin/update'はページIDも含めて更新する必要がありますか?) – user3939059

+0

これはあなた次第です。/ admin/リクエストは/ updateのために、admin.htmlテンプレートへの出力の一部としてページIDを持っている可能性があります。そして、submitがあなたの更新リクエストと共に送信します。それは本当にエレガントでしょう。 – tadamhicks

関連する問題