teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問3つのFORMをJS→VUE.JSに書き換えたい

編集履歴

質問編集履歴

1

vue追加

2020/10/29 01:24

投稿

yuujiMotoki
yuujiMotoki

スコア90

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,39 @@
1
+ #更新しました
2
+
3
+ 　
4
+
5
+ VUE側を書きました。
6
+
7
+ - HTMLのファイルフォームからPOSTして、FlaskFormで処理したい
8
+
9
+ - JS側のPOSTには、AJAX使いたくない（可読性がない）
10
+
11
+ - 将来的にも、FLASK側はライブラリで処理したい
12
+
13
+
14
+
15
+ POSTの中身をみても、``data:None``で受け取れていない
16
+
17
+
18
+
19
+ VUE側でのバインディングが良く分からない
20
+
21
+
22
+
23
+ ```
24
+
25
+ (Pdb) vars(number_form.file)
26
+
27
+ {'meta': <wtforms.form.Meta object at 0x000001EA7762A0D0>, 'default': None, 'description': '', 'render_kw': None, 'filters': (), 'flags': <wtforms.fields.Flags: {}>, 'name': 'file', 'short_name': 'file', 'type': 'FileField', 'validators': (), 'id': 'file', 'label': Label('file', 'File'), 'process_errors': [], 'object_data': None, 'data': None, 'raw_data': []}
28
+
29
+ ```
30
+
31
+
32
+
33
+
34
+
35
+
36
+
1
37
  #内容
2
38
 
3
39
  　フォームで３つのファイルをPOST送信するコードを書いています。
@@ -46,88 +82,148 @@
46
82
 
47
83
 
48
84
 
85
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
86
+
87
+
88
+
89
+ <!-- vue.js form -->
90
+
49
- {% extends "layout.html" %}
91
+ <div id="app">
50
-
51
- {% block body %}
52
-
53
-
54
92
 
55
93
  <div id="content">
56
94
 
57
95
  <div class="container-fluid">
58
96
 
97
+ <template
98
+
99
+ title="ファイル１の読込"
100
+
101
+ form = {{form1}}　　　　　<!--　Flask側から　form1　をレンダリング　-->
102
+
103
+ >
104
+
105
+ </template>
106
+
107
+ <template
108
+
109
+ title="ファイル２の読込"
110
+
111
+ form = {{form2}}　　　　　<!--　Flask側から　form2　をレンダリング　-->
112
+
113
+ >
114
+
115
+ </template>
116
+
117
+ <template
118
+
119
+ title="ファイル３の読込" 　　<!--　Flask側から　form3　をレンダリング　-->
120
+
121
+ form = {{form3}}
122
+
123
+ >
124
+
125
+ </template>
126
+
127
+ </div>
128
+
129
+ </div>
130
+
131
+ </div>
132
+
133
+
134
+
135
+ ```
136
+
137
+ ```javascript
138
+
139
+
140
+
141
+ {% raw %}
142
+
143
+ <script type="text/x-template" id="template">
144
+
59
- <h1>データ1の読込</h1>
145
+ <h1>{{title}}</h1>
60
-
61
- <p>
62
146
 
63
147
  <form class="form form-horizontal" method="POST" action="{{url_for('data_import')}}" enctype="multipart/form-data">
64
148
 
149
+ <input type="file" name="filename">
150
+
65
- {{ form1.hidden_tag() }}
151
+ {{ this.form.hidden_tag }}
66
-
67
- {{ form1.file }}
68
152
 
69
153
  <input type="submit" >
70
154
 
71
155
  </form>
72
156
 
73
- </p>
74
-
75
157
  <hr>
76
158
 
77
- <h1>データ2の読込</h1>
78
-
79
- <p>
80
-
81
- <form class="form form-horizontal" method="POST" action="{{url_for('data_import')}}" enctype="multipart/form-data">
82
-
83
- {{ form2.hidden_tag() }}
84
-
85
- {{ form2.file }}
86
-
87
- <input type="submit" >
88
-
89
- </form>
90
-
91
- </p>
92
-
93
- <hr>
94
-
95
-
96
-
97
- <h1>データ3の読込</h1>
98
-
99
- <p>
100
-
101
- <form class="form form-horizontal" method="POST" action="{{url_for('data_import')}}" enctype="multipart/form-data">
102
-
103
- {{ form3.hidden_tag() }}
104
-
105
- {{ form3.file }}
106
-
107
- <input type="submit" >
108
-
109
- </form>
110
-
111
- </p>
112
-
113
- <hr>
114
-
115
- </div>
116
-
117
- </div>
118
-
119
-
120
-
121
- {% endblock %}
122
-
123
-
124
-
125
- ```
126
-
127
-
159
+ </script>
160
+
161
+ {% endraw %}
162
+
163
+
164
+
165
+ <script>
166
+
167
+
168
+
169
+ Vue.component('template', {
170
+
171
+ template: '#template',
172
+
173
+ props: {
174
+
175
+ title : String,
176
+
177
+ form : Object,
178
+
179
+ },
180
+
181
+ data: function(){
182
+
183
+ return {
184
+
185
+ title : "",
186
+
187
+ hidden_tag:""
188
+
189
+ };
190
+
191
+ }
192
+
193
+ }
194
+
195
+ )
196
+
197
+
198
+
199
+ // Vue
200
+
201
+ new Vue({
202
+
203
+ el: '#app'
204
+
205
+ });
206
+
207
+
208
+
209
+ </script>
210
+
211
+ ```
128
212
 
129
213
  ```python
130
214
 
215
+
216
+
217
+ from flask_wtf import FlaskForm
218
+
219
+
220
+
221
+ class UploadForm(FlaskForm):
222
+
223
+ file = FileField()
224
+
225
+
226
+
131
227
  #データインポート処理
132
228
 
133
229
  @app.route('/import',methods=["GET", "POST"])