条件（form情報）によって遷移先htmlを変えたい！

前提

Python Html

4ページ構成
1:user情報入力
2:1回目の購入商品選択
3:選択商品から、おススメ商品を表示
2回目の購入商品選択
4：最終決定表示

実現したいこと

・2ページ目での選択商品によって遷移先3ページ目を変えたい
・3ページ目でも選択商品の情報を取得
・上記実現後、1-3ページのすべての情報をdfに入れ、excelへ移す

・3つのdef A,B,Cの中にそれぞれの3ページ目htmlへ遷移するための@app.routeを入れています
・1回目の選択商品情報を取得、条件分岐をし、def A,B,Cをそれぞれ返す

発生している問題・エラーメッセージ

・2ページ目から3ページ目への遷移の際に404(Not found) が出てしまいます
・そもそもdefの中にrouteを入れると反応しないのでしょうか？
・それとも、上記は実現できるが、defの中の書き方に問題があるのでしょうか？

・選択商品によって、読み込むhtmlを変えるには、defの中にrouteを入れるしかないと思っています。その他手法あれば、ご教示頂きたいです。

エラーメッセージ

該当のソースコード

python
1
2pyfile
3--------------------------------------------------------------------------------
4from tkinter import E
5from flask import Flask, render_template, url_for, request, redirect
6import datetime
7import numpy as np
8from xml.dom.pulldom import PROCESSING_INSTRUCTION
9
10#list_A=[]#form情報格納用リスト
11#list_B=[]
12#list_c=[]
13
14app = Flask(__name__)
15
16@app.route('/',methods=["GET","POST"])
17def index():
18    Name=request.form.get("NAME")
19    Email=request.form.get("Email")
20    html=render_template('デモアプリページ1ver.1.html')
21    return html
22
23
24@app.route('/get',methods=['GET',"POST"])
25def get():
26    
27	return render_template('デモアプリページ2ver.1.html', \
28		title = 'どの商品を購入しますか？', \
29        title1="",\
30		message = '',\
31        message1="",\
32        message2="",\
33        result="")
34
35
36@app.route('/', methods=['POST'])
37def ifu():
38    buy1=request.form.get("商品選択1")
39    #list_A.append(name1)#listappend
40#3ページ目へ
41    if buy1=="1":
42        return A()
43    elif buy1=="2":
44        return B()
45    else :
46        return C()
47
48
49
50
51    
52#3ページ目　パターン①
53def A():
54    def Aa():
55        @app.route('/get2',methods=['GET'])
56        def A1():
57            return render_template('デモアプリページ3-1ver.1.html', \
58		    title = 'どの商品を購入しますか？', \
59             title1="",\
60		    message = '',\
61            message1="",\
62            message2="",\
63            result="")
64        return A1()
65    
66    def Ab():
67        @app.route("/",methods=["POST"])
68        def A2():
69            buy2=request.form.get("商品選択2")
70            return render_template('デモアプリページ4ver.1.html', \
71		    title = 'どの商品を購入しますか？', \
72             title1="",\
73		    message = '',\
74            message1="",\
75            message2="",\
76            result=buy2)
77        return A2()
78     
79    return Aa(), Ab() 
80                 
81#3ページ目  パターン②               
82def B():
83    def Ba():
84        
85        @app.route('/get2',methods=['GET'])
86        def B1():
87            
88            return render_template('デモアプリページ3-2ver.1.html', \
89		    title = 'どの商品を購入しますか？', \
90             title1="",\
91		    message = '',\
92            message1="",\
93            message2="",\
94            result="")
95        return B1()
96   
97    def Bb():
98        @app.route("/",methods=["POST"])
99        def B2():
100            buy2=request.form.get("商品選択2")
101            return render_template('デモアプリページ4ver.1.html', \
102		    title = 'どの商品を購入しますか？', \
103             title1="",\
104	　　message = '',\
105            message1="",\
106            message2="",\
107            result=buy2)
108        return B2()
109
110    return Ba, Bb()
111
112def C():
113    def Ca():
114        @app.route('/get2',methods=['GET'])
115        def C1():
116            
117            return render_template('デモアプリページ3-3ver.1.html', \
118		    title = 'どの商品を購入しますか？', \
119             title1="",\
120		    message = '',\
121            message1="",\
122            message2="",\
123            result="")
124        return C1()
125    
126    def Cb():
127        @app.route("/",methods=["POST"])
128        def C2():
129            buy2=request.form.get("商品選択2")
130            return render_template('デモアプリページ4ver.1.html', \
131		    title = 'どの商品を購入しますか？', \
132             title1="",\
133		    message = '',\
134            message1="",\
135            message2="",\
136            result=buy2)
137        return C2()
138                
139    return Ca(), Cb()
140    
141     
142if __name__ == '__main__':
143    app.debug = True
144    app.run()   
145
146
147

html
1デモアプリページ1ver.1.html
2---------------------------------------------------
3<html>
4    <head>
5      <meta charset="utf-8">
6      <title>1ページ目</title>
7  
8  
9      <link rel="stylesheet" href="./css/style.css">
10    </head>
11    <body bgcolor="yellow" >
12      
13      <div style="text-align: center">
14        <br><br><strong><font size="20">SDGs商品購入アプリ</font></strong><br>
15        <style>
16          .example{
17              width: 300px;
18              padding: 10px;
19              box-sizing: border-box;
20              border: 1px solid #68779a;
21              background: #cbe8fa;
22              cursor: pointer;
23          }
24          button {
25            width: 10em;
26            height:3em;
27          }
28          </style>
29          
30          <br><br><br><img src="https://image.news.livedoor.com/newsimage/stf/8/a/8a8cb_1223_aee79b35101fda7df8d490f140f4260f.jpg" alt="会計"title="会計" width="400" height="300">
31          <img src="https://www.emotion-tech.co.jp/wp-content/uploads/2018/04/%E3%82%A2%E3%83%B3%E3%82%B1%E3%83%BC%E3%83%88%E5%88%86%E6%9E%90_%E3%82%A2%E3%82%A4%E3%82%AD%E3%83%A3%E3%83%83%E3%83%81-1-1100x618.jpg" alt="データ分析"title="データ分析" width="400" height="300">
32          <br><br><form>
33            名　前（必須）：<input type="text" name="shimei"><br><br>
34            メール（必須）：<input type="email" name="email"><br>
35          </form>
36          
37          <br><br><br><button onclick="location.href='http://127.0.0.1:5000/get'">start</button>
38          
39      </div>
40      
41    </body>

html
1デモアプリページ2ver.1.html
2--------------------------------------------------------------------
3<html>
4  <head>
5    <meta charset="utf-8">
6    <title>3ページ目</title>
7    <link rel="stylesheet" href="./css/style.css">
8  </head>
9<div style="text-align: center">
10 <body bgcolor="yellow">
11  <h1>{{ title }}</h1>
12	<p1>{{ message }}</p1>
13
14  <h>{{ title1 }}</h>
15	<p>{{ message1 }}</p>
16
17  <h2>{{ title2 }}</h2>
18  <p>{{ message2 }}</p>
19  
20  <h3>{{ result }}</h3>
21  <p>{{ result }}</p>
22
23
24	<br><dl class="dl-list-01">  
25    <!--商品情報-->  
26    <dt><a href="#"><img src="https://www.sowld.jp/data/sowld/product/20201121_c31df7.jpg" alt="ユっ黒" width="300" height="400" /></a></dt><br>  
27    <dd>  
28    <p>ウニっ黒</p>  
29    <p>¥ 10,000</p>  
30    <p>SDGs貢献度 ★</p>  
31    </dd>  
32
33      
34    <br><dl class="dl-list-02"> 
35    <dt><a href="#"><img src="https://otokomaeken.com/wp-content/uploads/2021/01/e02a1221-d756-4d86-8650-519f4fc41070.jpg" alt="ジャパングース" width="300" height="400" /></a></dt><br>
36    <dd>  
37    <p>臭いテッドアローズ</p>  
38    <p>¥ 30,000</p>  
39    <p>SDGs貢献度 ★★★</p>  
40    </dd>  
41
42    
43    <br><dl class="dl-list-03"> 
44    <dt><a href="#"><img src="https://sankeishop.jp/items/a2678/item/sdg/images/item/sdg/a2678.jpg" alt="ジャパングース" width="300" height="400" /></a></dt><br>
45    <dd>  
46    <p>ジャパングース</p>  
47    <p>¥ 50,000</p>  
48    <p>SDGs貢献度 ★★★★★</p>  
49    </dd>  <br><br><br><br><br>
50    
51     
52
53    
54  <form action="/" method="POST" enctype="multipart/form-data">
55		<div>
56			<strong>どの商品を購入しますか？</strong><br>
57        <input type="radio" name="商品選択1" value="1" > ウニっ黒<br>
58        <input type="radio" name="商品選択1" value="2"> 臭いテッドアローズ<br>
59        <input type="radio" name="商品選択1" value="3"> ジャパングース<br>
60    </div>
61
62    
63     <style>
64      .example{
65          width: 300px;
66          padding: 10px;
67          box-sizing: border-box;
68          border: 1px solid #68779a;
69          background: #cbe8fa;
70          cursor: pointer;
71      }
72      button {
73        width: 10em;
74        height:3em;
75      }
76    
77      </style>
78
79	
80      <input type="button" onclick="location.href='http://127.0.0.1:5000/get2'" value="3へ">
81      
82	
83	</form>
84 </body>
85</div>
86

下記3ページ目htmlを3つ作成しているが
3-2,3-3はここでは省略

html
1デモアプリページ3-1ver.1.html
2----------------------------------------------------------
3<html>
4  <head>
5    <meta charset="utf-8">
6    <title>3ページ目</title>
7    <link rel="stylesheet" href="./css/style.css">
8  </head>
9<div style="text-align: center">
10  <br><br><strong><font size="15">これらの商品はいかがですか？</font></strong>
11<body bgcolor="yellow">
12  <h1>{{ title }}</h1>
13	<p1>{{ message }}</p1>
14
15  <h>{{ title1 }}</h>
16	<p>{{ message1 }}</p>
17
18  <h2>{{ title2 }}</h2>
19  <p>{{ message2 }}</p>
20  
21  <h3>{{ result }}</h3>
22  <p>{{ result }}</p>  
23    <!--商品情報-->  
24
25    これらの商品はいかがですか？
26    <br><dl class="dl-list-02"> 
27    <dt><a href="#"><img src="https://otokomaeken.com/wp-content/uploads/2021/01/e02a1221-d756-4d86-8650-519f4fc41070.jpg" alt="ジャパングース" width="300" height="400" /></a></dt><br>
28    <dd>  
29    <p>臭いテッドアローズ</p>  
30    <p>¥ 30,000</p>  
31    <p>SDGs貢献度 ★★★</p>  
32    </dd>  
33  
34    <br><dl class="dl-list-03"> 
35    <dt><a href="#"><img src="https://sankeishop.jp/items/a2678/item/sdg/images/item/sdg/a2678.jpg" alt="ジャパングース" width="300" height="400" /></a></dt><br>
36    <dd>  
37    <p>ジャパングース</p>  
38    <p>¥ 50,000</p>  
39    <p>SDGs貢献度 ★★★★★</p>  
40    </dd><br><br><br><br>
41  
42  <form action="/" method="POST" enctype="multipart/form-data">
43		<div style="text-align: center">
44			<strong><font size="10">どの商品を購入しますか？</front></strong><br>
45        
46        <input type="radio" name="商品選択2" value="1"> 最初の商品のまま<br>
47        <input type="radio" name="商品選択2" value="2"> 臭いテッドアローズ<br>
48        <input type="radio" name="商品選択2" value="3"> ジャパングース<br>
49
50    </div>
51
52     <style ="text-align: center">
53
54      .example{
55          width: 300px;
56          padding: 10px;
57          box-sizing: border-box;
58          border: 1px solid #68779a;
59          background: #cbe8fa;
60          cursor: pointer;
61      }
62      button {
63        width: 10em;
64        height:3em;
65      }
66      </style>
67      <input type="button" onclick="location.href='http://127.0.0.1:5000/4" value="4へ">
68      
69	</form>
70</body>
71</div>
72

試したこと

defを外せば、routeできました

しかし、条件分岐によって遷移先htmlを変え、その遷移先でもform情報取得したいのでdefが必要なのではないかと思っています
・そもそもdefの中にrouteを入れると反応しないのでしょうか？
・それとも、上記は実現できるが、defの中の書き方に問題があるのでしょうか？
・初心者なので、なるべく最小構成で動かしたいです
・その他手法あれば、ご教示頂きたいです。

よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

・そもそもdefの中にrouteを入れると反応しないのでしょうか？

確証はないですが、無理じゃないですかね。
公式ドキュメントでも、Exampleでも、この書き方は見たことがありません。
Webなので、パスを分けるのはあると思いますが、同じパスで別メソッドの場合はMethodViewを使うというのもあります。

mapを見てみたら、以下の様になっていました。
defの中に書いてあるパスは認識されていないようです。

text
1app.url_map
2Map([<Rule '/static/<filename>' (GET, HEAD, OPTIONS) -> static>,
3 <Rule '/' (GET, POST, HEAD, OPTIONS) -> index>,
4 <Rule '/get' (GET, POST, HEAD, OPTIONS) -> get>,
5 <Rule '/' (POST, OPTIONS) -> ifu>])

上記の場合、POST /でアクセスできるものが2個定義されていますが、(仕様がどうなのか覚えてませんが)上に必ずマッチするか、下に必ずマッチするか、のどっちかになり思った通り動かせないと思います。

選択によってページを変えたいなら、Flask側で受け取ったパラメータに従い、render_templateするhtmlを変更するなどで対応してはいかがでしょうか。
その際、パラメータをPOSTで受け取るか、GETで受け取るかは設計次第になると思います。

それから、所々にあるバックスラッシュですが、要らないような気がします。
(Pycharmでは式の不要なバックスラッシュというメッセージが表示されます。)

投稿2022/11/10 13:09