LIFF×Vue×Flask×Cloud Runアプリ実装（LINEアプリ）③

以下のページの続きになります。

ボタン押下で画面遷移する方法

前回は、vue-routerを用いてcomponentを切り替えることで画面遷移を実現する方法を記載しましたが、
リンクをクリックする形での遷移でしたので、今回はボタン押下での遷移方法を試したいと思います。

前回作成したTest1.vueを以下のように変更します。
（全部書き換えてるので、新規ファイルでも良いかもしれません。）

<script setup>
  import {reactive} from "vue";
  import {useRouter} from "vue-router";

  const router = useRouter();
  const member = reactive(
    {
      name: "",
      email: "",
      points: 0,
      note: "",
    }
  );
  const onUpdate = function() {
    console.log("update exec");
    console.log(member);
    router.push({name: "Test2"});
  }
</script>
  
<template>
  test1です
  <form v-on:submit.prevent="onUpdate">
    <dl>
      <dt>
        <label for="inputName">名前&nbsp;</label>
      </dt>
      <dd>
        <input type="text" id="inputName" v-model="member.name">
      </dd>
      <dt>
        <label for="inputEmail">メールアドレス&nbsp;</label>
      </dt>
      <dd>
        <input type="text" id="inputEmail" v-model="member.email">
      </dd>
      <dt>
        <label for="inputPoints">ポイント&nbsp;</label>
      </dt>
      <dd>
        <input type="text" id="inputPoints" v-model="member.points">
      </dd>
      <dt>
        <label for="inputNote">備考&nbsp;</label>
      </dt>
      <dd>
        <input type="text" id="inputNote" v-model="member.note">
      </dd>
    </dl>
    <button type="submit">確認</button>
  </form>
</template>

Test2.vueはこうします。

<script setup>
  const member = 
    {
      name: "",
      email: "",
      points: 0,
      note: "",
    }
  ;
  const onUpdate = function() {
    console.log("登録ボタン押下");
  }
</script>
  
<template>
  test2です
  <form v-on:submit.prevent="onUpdate">
    <dl>
      <dt>
        <label for="inputName">名前&nbsp;</label>
      </dt>
      <dd>
        {{member.name}}
      </dd>
      <dt>
        <label for="inputEmail">メールアドレス&nbsp;</label>
      </dt>
      <dd>
        {{member.email}}
      </dd>
      <dt>
        <label for="inputPoints">ポイント&nbsp;</label>
      </dt>
      <dd>
        {{member.points}}
      </dd>
      <dt>
        <label for="inputNote">備考&nbsp;</label>
      </dt>
      <dd>
        {{member.note}}
      </dd>
    </dl>
    <button type="submit">登録</button>
  </form>
</template>

App.vueも要らない要素は適当に削除しちゃってますが、
こういう動きをするように変更しました。

確認ボタンを押下すると、Test2に遷移

とりあえず画面遷移だけできました。
データの内容はまだ連携できてません。

Piniaを使用して会員登録画面作成

Piniaというライブラリを使用して画面間（コンポーネント間）のデータ連携を実現したいと思います。

まずはインストール

$ npm install pinia

main.jsを以下のように変更

import { createApp } from 'vue';
import App from './App.vue';
import router from './router.js';
import { createPinia } from 'pinia';

const pinia = createPinia();

createApp(App)
  .use(router)
  .use(pinia)
  .mount('#app');

FlaskでAPIを作成してVueから呼び出す

まずはFlask側

requirements.txtに「flask_restful」を追加

Flask==2.3.3
requests==2.31.0
debugpy # Required for debugging.
flask_restful

続いて、app.pyに以下のように変更

import os

from flask import Flask, render_template
from flask_restful import Api, Resource

# API用Router
from api.router import router


def create_app():
    # Flask Appインスタンス生成
    app = Flask(__name__, template_folder='templates/liff-test/dist', static_folder='templates/liff-test/dist', static_url_path='')

    # DB設定
    # app.config.from_object(config.Config)
    # db.init_db(app)
    # db.init_ma(app)

    # APIのRouter設定
    app.register_blueprint(router)
    return app


# アプリ生成
app = create_app()
if __name__ == '__main__':
    server_port = os.environ.get('PORT', '8080')
    app.run(debug=False, port=server_port, host='0.0.0.0')


@app.route('/', defaults={'path': ''})
@app.route('/<path>')
def main(path):
    """Return a friendly HTTP greeting."""
    message = "It's running!"

    """Get Cloud Run environment variables."""
    service = os.environ.get('K_SERVICE', 'Unknown service')
    revision = os.environ.get('K_REVISION', 'Unknown revision')

    return render_template("index.html",
        message=message,
        Service=service,
        Revision=revision)

新しくapiフォルダを作成して、中にrouter.pyを作成

from flask import Blueprint

router = Blueprint('router', __name__)


@router.route('/api/apitest', methods=['GET'])
def apitest():
    text = "apiからの返却値"
    return text

続いて、vue側の修正

まずはvueのルートフォルダ（package.jsonがあるフォルダ）で以下のコマンドを実行

$ npm install axios

続いて、Test2.vueを以下のように変更

<script setup>
  import {useMemberStore} from "../stores/memberStore.js";
  import {axios} from "axios";

  const memberStore = useMemberStore();

  const onUpdate = function() {
    console.log("登録ボタン押下");

    const response = await axios.get('/api/apitest');
    alert(response);
  }
</script>
  
<template>
  test2です
  <form v-on:submit.prevent="onUpdate">
    <dl>
      <dt>
        <label for="inputName">名前&nbsp;</label>
      </dt>
      <dd>
        {{memberStore.name}}
      </dd>
      <dt>
        <label for="inputEmail">メールアドレス&nbsp;</label>
      </dt>
      <dd>
        {{memberStore.email}}
      </dd>
      <dt>
        <label for="inputPoints">ポイント&nbsp;</label>
      </dt>
      <dd>
        {{memberStore.points}}
      </dd>
      <dt>
        <label for="inputNote">備考&nbsp;</label>
      </dt>
      <dd>
        {{memberStore.note}}
      </dd>
    </dl>
    <button type="submit">登録</button>
  </form>
</template>

LIFF×Vue×Flask×Cloud Runアプリ実装（LINEアプリ）③

ボタン押下で画面遷移する方法

Piniaを使用して会員登録画面作成

FlaskでAPIを作成してVueから呼び出す