Q&A
@app.route("/hoge") こちらこのままでいいでしょうか？
werkzeug.routing.exceptions.BuildError: Could not build url for endpoint 'next_page2'. Did you mean 'index' instead?
と出ます。
フォーム画面(index.html)でボタンを押して、次のページへ遷移させております。
そのページではiframeを使用しており、そのiframe内にはflaskで動作させた変数を使用しております。
<症状>
iframe内の変数が表示されない。受け渡しがうまくいってない。
<考えられる要因1>
次のページに変数を渡しており、iframe内のhtmlへは変数の受け渡しがうまくいっていないのでは。
<考えられる要因2>
flaskでiframe操作する際、htmlのパスを通す方法がうまくいかず、同層のフォルダ内にhtmlを入れておらず、staticに入れている。
<フォルダ構成>
- 第1層フォルダ内
・app.py
・staticフォルダ
・templatesフォルダ
- templatesフォルダ
・index.html
・next_page.html
- staticフォルダ
・next_page2.html
コードについて
app.py
1from flask import Flask, render_template, request, session, url_for, redirect, jsonify,g 2from flask.views import MethodView 3import sqlite3,pickle 4import pandas as pd 5 6app = Flask(__name__) 7 8data_base="◎◎.db" 9table_1="◎◎" 10 11app = Flask(__name__) 12 13def get_db(): 14 if 'db' not in g: 15 g.db = sqlite3.connect(◎◎◎◎◎◎) 16 return g.db 17 18def close_db(e=None): 19 db = g.pop('db', None) 20 21 if db is not None: 22 db.close() 23 24 25#「/」へアクセスがあった場合 26@app.route("/") 27def hello(): 28 return render_template('index.html') 29 30@app.route("/next_page", methods=['POST']) 31def index(): 32 33 if request.method == 'POST': 34 id2_ = request.form.get("user_id2") 35 id_ = request.form.get('user_id') 36 path_ = request.form.get('path1') 37 38 mydata = [] 39 db = get_db() 40 sql = "select * from " + id2_ 41 42 try: 43 cur = db.execute(sql) 44 except: 45 return render_template('index.html') 46 47 mydata = cur.fetchall() 48 df=pd.read_sql(sql,g.db) 49 50 return render_template('/next_page.html',\ 51 title1=id_, \ 52 title2=id2_, \ 53 col_1=df.columns, \ 54 num=mydata[0], \ 55 data=mydata) 56 57 else: 58 return render_template('index.html') 59 60#app.pyをターミナルから直接呼び出した時だけ、app.run()を実行する 61if __name__ == "__main__": 62 app.run(debug=True)
templatesフォルダ内のhtml
idex.html
1<!DOCTYPE html> 2<html lang="jp"> 3<head> 4 <meta charset="UTF-8"> 5 <title>データベース</title> 6 <link rel="stylesheet" href="static/css/style.css"> 7</head> 8 9<form action="/next_page" method="POST"> 10<table class="form-table"> 11 <tbody> 12 <tr> 13 <th>参照パス</th> 14 <td><input required type="text" class="id1" name="path1" size="60" value="" list="example1" > 15 </td> 16 <datalist id="example1"> 17 <option value=""></option> 18 <option value="サンプル2"></option> 19 <option value="サンプル3"></option> 20 </datalist> 21 </tr> 22 <tr> 23 <th>データベース名</th> 24 <td><input required type="text" class="id1" name="user_id" size="60" list="example2" value="" placeholder="product1.db"> 25 </td> 26 <datalist id="example2"> 27 <option value="サンプル1"></option> 28 <option value="サンプル2"></option> 29 <option value="サンプル3"></option> 30 </datalist> 31 </tr> 32 <tr> 33 <th>テーブル名</th> 34 <td><input required type="text" class="id2" name="user_id2" size="60" value="" list="example3" placeholder="product10"> 35 </td> 36 <datalist id="example3"> 37 <option value="サンプル4"></option> 38 <option value="サンプル5"></option> 39 <option value="サンプル6"></option> 40 </datalist> 41 42 </tr> 43 </tbody> 44 </table> 45 46 <div class="example"> 47 <input type="submit" value="決定" class="submit1"> 48 </div> 49</form>
next_page.html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>データベース</title> 6<!-- <link rel="stylesheet" href="static/css/style.css">--> 7 </head> 8 <body> 9 <p>元の画面</p> 10 <iframe src="{{ url_for('static', filename='next_page2.html') }}" width=100%; height=600px;></iframe> 11 </body> 12</html>
staticフォルダ内のhtml (iframe内のファイル)
next_page2.html
1<!DOCTYPE html><html lang="ja"> 2<head> 3<meta charset="utf-8"> 4<meta http-equiv="X-UA-Compatible" content="IE=edge"> 5<!--<meta name="viewport" content="width=device-width, initial-scale=1">--> 6 7<link rel="stylesheet" href="static/css/style_next.css"> 8<link rel="stylesheet" href="{{ url_for('static', filename='css/jquery.resizableColumns.css') }}" /> 9 10<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 11<script src="static/js/editable-table.js"></script> 12<link href="static/css/editable-table.css" rel="stylesheet">--> 13</head></html> 14 15<body> 16 17<div class="site-header"> 18<h1><input required type="text" class="data_base1" name="data_1" size="60" value="DateBase : {{title1}}"><input required type="text" class="data_base2" name="data_1" size="60" value="Table : {{title2}}"></h1> 19</div> 20 21<style> 22.botton_size{ 23 display: inline-block; 24 width: 100%; 25 border: 1px solid #999; 26 box-sizing: border-box; 27 background: #f2f2f2; 28 font-size: 150%; 29} 30</style> 31 32<div class="botton1"> 33<form action="/" method="get"> 34<input type="submit" class="botton_size" value='前ページへ戻る'></form> 35</div> 36 37<div class="botton2"> 38<form action="/" method="get"> 39<input type="submit" class="botton_size" value='ページ更新'></form> 40</div> 41 42 43 <table class="editable-table border="1" style="text-align: center;vertical-align:middle;"> 44 <thead> 45 <tr> 46 {% for col in col_1 %} 47 <th>{{col}}</th> 48 {% endfor %} 49 </tr> 50 </thead> 51 <tbody> 52 {% for item in data %} 53 <tr> 54 {% for item_1 in item %} 55 <td contenteditable="true">{{item_1}}</td> 56 {% endfor %} 57 </tr> 58 {% endfor %} 59 </tbody> 60 </table> 61 62{% block footer %} 63 <h5>Coryright 2020 Rope_blog </h5> 64{% endblock %} 65 66<!--<script type=”text/javascript” src="{{ url_for('static', filename='js/next_page.js') }}"></script>--> 67 68<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 69<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.resizableColumns.min.js') }}"></script> 70 71<script> 72$(function(){ 73 $("table").resizableColumns({ 74 }); 75}); 76</script> 77</body>
今回はcssやjsは問題ないと考えますので載せておりません。
また、iframeにしている理由は、iframe内でtableを表示させたいためです。
ここで、iframeの参照先のhtmlをstaticではなく、templatesの同層内にする方法も加えてご教示いただけますと幸いです。
何卒、よろしくお願いいたします。
回答2件
0
jinja2を使う場合は、render_templateしないとダメです。
HTMLからしたら{% for col in col_1 %}などは単なる文字列に過ぎませんので、そのまま出ると思います。
render_templateで使うファイルnext_page2.htmlは、templatesフォルダに移動してください。
移動したら、例えば以下のようなエンドポイントを作成してください。
python
1# render_templateをimportしてください。from flask import render_template 2@app.route("/page_sample") 3def sample(): 4 col_99 = "なんらかのデータ" # なんらかのデータは必要なデータ形式で必要なデータを渡してください。 5 data_99 = "なんらかのデータ" # なんらかのデータは必要なデータ形式で必要なデータを渡してください。 6 item_99 = "なんらかのデータ" # なんらかのデータは必要なデータ形式で必要なデータを渡してください。 7 return render_template('next_page2.html', col_1=col_99, data=data_99, item=item_99)
最後に、iframeの参照先を、作成したエンドポイントに変更してください。
html
1<iframe src="{{ url_for('sample') }}"></iframe>
投稿2023/01/13 02:35
総合スコア2182
0
ベストアンサー
app.pyにnext_page2.htmlを表示する関数next_page2を用意するnext_page.html内のurl_forではファイルnext_page2.htmlではなく関数next_page2と任意の引数を渡す。
といった感じであればnext_page2.htmlもtemplates内に配置できてデータもnext_page2に引き渡すことができるようです。
app.py
Python
1from flask import Flask, render_template, request, url_for 2 3app = Flask(__name__) 4 5@app.route("/") 6def hello(): 7 return render_template('index.html') 8 9@app.route("/next_page", methods=['POST']) 10def index(): 11 if request.method == 'POST': 12 return render_template('/next_page.html',v1=123,v2='あいう') # 任意のデータ 13 else: 14 return render_template('index.html') 15 16@app.route("/hoge") 17def next_page2(): 18 v1 =f'{request.args.get("v1")}(from next_page)' 19 v2 =f'{request.args.get("v2")}(from next_page)' 20 return render_template('next_page2.html', v1=v1, v2=v2) # データを引き渡す 21 22if __name__ == "__main__": 23 app.run(debug=True)
index.html
HTML
1<!DOCTYPE html><html lang="jp"><head><meta charset="UTF-8"><title>index</title></head> 2<body> 3<form action="/next_page" method="POST"> 4<input type="submit" value="決定" class="submit1"> 5</form> 6</body> 7</html>
next_page.html
HTML
1<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><title>next_page</title></head> 2<body> 3<p>next_page</p> 4<p>{{v1}},{{v2}}</p> 5<iframe src="{{ url_for('next_page2', v1=v1,v2=v2) }}" width=100%; height=600px;></iframe> 6</body> 7</html>
next_page2.html
HTML
1<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"></head></html> 2<body> 3<p>next_page2</p> 4<p>{{v1}},{{v2}}</p> 5</body>
投稿2023/01/13 02:31
総合スコア36956
回答へのコメント
@app.route("/hoge") こちらを入れると、index.htmlがiframeに入ります。
@app.route("/next_page", methods=['POST'])
def index():
global id2_
global id_
global path_
if request.method == 'POST':
id2_ = request.form.get("user_id2")
id_ = request.form.get('user_id')
path_ = request.form.get('path1')
# return render_template('next_page.html',\
return render_template('/next_page.html',v1=id2_,v2=id_,v3=path_)
else:
return render_template('index.html')
@app.route("/hoge")
def next_page2():
v2 =f'{request.args.get("v2")}(from next_page)'
v1 =f'{request.args.get("v1")}(from next_page)'
mydata = []
db = get_db()
# sql = "select * from " + table_1
sql = "select * from " + v2
try:
cur = db.execute(sql)
except:
return render_template('index.html')
mydata = cur.fetchall()
df=pd.read_sql(sql,g.db)
return render_template('/next_page2.html',\
title1=v1, \
title2=v2, \
col_1=df.columns, \
num=mydata[0], \
data=mydata)
↓↓↓こちらは、next_page.html↓↓ 変更後
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>データベース</title>
<!-- <link rel="stylesheet" href="static/css/style.css">-->
</head>
<body>
<p>元の画面</p>
<iframe src="{{ url_for('next_page2')}}" width=100%; height=600px;></iframe>
</body>
</html>
すみません。
@app.route("/hoge") こちらで、とりあえずは、table表示ができました。
ありがとうございます。
ただ、sqlのためのテーブル取得ができていない状況です。
# V2 =f'{request.args.get("v2")}(from next_page)'
# V1 =f'{request.args.get("v1")}(from next_page)'
V2 =id2_
V1 =id_
とりいそぎは、こちらで解決しました
回答コードそのままではどうでしょうか？当方環境では正常に動作しています。
なお、コメントでの提示コードにおいて
exceptの中でreturn render_template('index.html')しているので
例外にてここに到達しているのではないでしょうか？
DB接続まわりに問題があるように思います。
例外を捕捉せずにデバッグトレースを確認したほうがよいでしょう。
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。