3つのFORMをJS→VUE.JSに書き換え

更新内容

10/31

　回答が得られず苦労している。JSの不満の要点を書いておく。

・AJAXポスト送信をあくまでバックエンドで処理させたい。
→　このままJSエンジニアにサーバー領域にまで踏み込んでほしくないから。

せめてやるなら、モデルまでNODE.JSで受け取ってからにしろと言いたい。
最近、ＳＰＡじゃなくてユニバーサルとか言い出したのは、
フロントエンジニアが弱気になって来たか、もしくはバックエンドが暇になって来たかの
どちらかだろう・・・

・FLASK側の処理は、あくまでフレームワークでやりたい。
→　せっかく用意されたフレームワークなので、後発のＪＳのためにまで仕様変更したくない

後輩は、先輩に対して、配慮しろと言いたい
最近のＪＳ見てて思うのだが、熟年エンジニアの流儀作法をしらないやつが
参入してきている感がある。結局は先人の教訓に従い、いまさらＴＳなどど言い始めている。
俺は、その流暢は好きではない。

動的型付け言語のプライドを捨ててはいけない

10/28

　自分で解決できず、サイトに丸投げ質問中

https://stackoverflow.com/questions/64583679/i-want-to-rewrite-3-input-form-form-from-js-to-vue-js
https://teratail.com/questions/300488

内容

　既にできているノーマルのJSをどうにかして、Vue.Jsに置き換えてみる練習
　単純に同じフォームが３つあるので、Vue.Jsでコンポーネントできるのではと思った
　簡略化のために、フォームのバリデーションは無し

ポイント

　FLASK側は、FLASK-FORMを使いフォームを名前で分岐している。
　Jinjaには、form1,form2,form3を渡している。

元のコード

{% extends "layout.html" %}
{% block body %}

<div id="content">
    <div class="container-fluid">
        <h1>データ1の読込</h1>
        <p>
            <form class="form form-horizontal" method="POST" action="{{url_for('data_import')}}"  enctype="multipart/form-data">
                {{ form1.hidden_tag() }}
                {{ form1.file }}
                <input type="submit" >
            </form>
        </p>
        <hr>
        <h1>データ2の読込</h1>
        <p>
            <form class="form form-horizontal" method="POST" action="{{url_for('data_import')}}"  enctype="multipart/form-data">
                {{ form2.hidden_tag() }}
                {{ form2.file }}
                <input type="submit" >
            </form>
        </p>
        <hr>

        <h1>データ3の読込</h1>
        <p>
            <form class="form form-horizontal" method="POST" action="{{url_for('data_import')}}"  enctype="multipart/form-data">
                {{ form3.hidden_tag() }}
                {{ form3.file }}
                <input type="submit" >
            </form>
        </p>
        <hr>
</div>
</div>

{% endblock %}

#データインポート処理
@app.route('/import',methods=["GET", "POST"])
def data_import():
    number_form = UploadForm()
    label_form = UploadForm()
    xxx_form = UploadForm()

    if request.method == "POST":
        if number_form.validate_on_submit():
            filename = secure_filename(number_form.file.data.filename)
            number_form.file.data.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
        elif label_form.validate_on_submit():
            filename = secure_filename(label_form.file.data.filename)
            label_form.file.data.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
        elif xxx_form.validate_on_submit():
            filename = secure_filename(label_form.file.data.filename)
            xxx_form.file.data.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))

        return redirect(url_for('data_import'))

    return render_template( 
        'import.html',form1=number_form,form2=label_form,form3=xxx_form)