Python（FastAPI）とVue.js3（Composition API、Vite、TailwindCSS）でWebアプリの開発②：フロントエンドのVue.jsのコーディング

2022年10月23日プログラミング

1 はじめに
2 フォルダ構成とコード
3 関連記事

はじめに

基本的においらは、Vue.jsのCompositionAPIを使いまふ。
<script setup>
********
</script>
<template>
********
</template>

こんな感じの。
Pythonの表記に近いので。
この場合のフロントエンドのコードを紹介しまふ
(‘ω’)ノ

最終コードはこちら

https://github.com/supplepentan/penta_sample_fastapi_vue

フォルダ構成とコード

最終的には下記の様な構成になりまふ。

ブラウザ表示はこんな感じになりまふ（右側が殺風景でふが、おきになさらず）

『PostBackendPost.vue』全体のコード

<script setup lang="ts">
import axios, { AxiosResponse } from "axios";
import { ref } from "vue";

interface Props {
    buckendUrl: string
}

const props = defineProps<Props>();
const file = ref();
const previewImage = ref();

const fileSelected = (event: any): void => {
    file.value = event.target.files[0];
    const reader = new FileReader();
    reader.onload = () => {
        previewImage.value = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
};
const fileUpload = (): void => {
    console.log(props.buckendUrl);
    const formData = new FormData();
    formData.append("file", file.value);
    axios
        .post(props.buckendUrl, formData, {
            responseType: "blob",
        })
        .then((response: AxiosResponse<any, any>) => {
            let mineType: string | undefined = response.headers["content-type"];
            if (mineType === "image/jpeg" | mineType === "image/png") {
                console.log(response.headers["content-type"]);
                const blob = new Blob([response.data], { type: mineType });
                let url: string = URL.createObjectURL(blob);
                const a: HTMLAnchorElement = document.createElement("a");
                document.body.appendChild(a);
                a.download = "returnFile.".concat(mineType.slice(-3));
                a.href = url;
                a.click();
            }
        })
        .catch(error => console.log(error));
};
</script>
<template>
    <div>
        <div class="p-2">
            <label
                class="px-4 py-2 bg-transparent border-blue-500 rounded cursor-pointer bg-sky-200 ring-2 hover:bg-blue-300 hover:text-white hover:border-transparent">
                Select File !
                <input class="hidden" type="file" v-on:change="fileSelected" />
            </label>
            <button v-on:click="fileUpload"
                class="px-4 py-2 font-semibold text-blue-700 bg-transparent bg-blue-100 border-blue-500 rounded ring-2 hover:bg-blue-300 hover:text-white hover:border-transparent">
                Make It !
            </button>
        </div>
        <div class="grid grid-cols-2">
            <div>
                <img v-bind:src="previewImage" class="img-fluid" alt="" />
            </div>
            <div v-if="file" class="m-2 p-2 border rounded-lg border-slate-400">
                <p>Name: {{file.name}}</p>
                <p>Size: {{file.size}}</p>
                <p>Type: {{file.type}}</p>
            </div>
        </div>
    </div>
</template>

import axios, { AxiosResponse } from "axios";

import { ref } from "vue";

interface Props {

buckendUrl: string

}

const props = defineProps<Props>();

const file = ref();

const previewImage = ref();

const fileSelected = (event: any): void => {

file.value = event.target.files[0];

const reader = new FileReader();

reader.onload = () => {

previewImage.value = reader.result;

};

reader.readAsDataURL(event.target.files[0]);

};

const fileUpload = (): void => {

console.log(props.buckendUrl);

const formData = new FormData();

formData.append("file", file.value);

axios

.post(props.buckendUrl, formData, {

responseType: "blob",

})

.then((response: AxiosResponse<any, any>) => {

let mineType: string | undefined = response.headers["content-type"];

if (mineType === "image/jpeg" | mineType === "image/png") {

console.log(response.headers["content-type"]);

const blob = new Blob([response.data], { type: mineType });

let url: string = URL.createObjectURL(blob);

const a: HTMLAnchorElement = document.createElement("a");

document.body.appendChild(a);

a.download = "returnFile.".concat(mineType.slice(-3));

a.href = url;

a.click();

}

})

.catch(error => console.log(error));

};

</script>

<div>

<label

class="px-4 py-2 bg-transparent border-blue-500 rounded cursor-pointer bg-sky-200 ring-2 hover:bg-blue-300 hover:text-white hover:border-transparent">

Select File !

</label>

<button v-on:click="fileUpload"

class="px-4 py-2 font-semibold text-blue-700 bg-transparent bg-blue-100 border-blue-500 rounded ring-2 hover:bg-blue-300 hover:text-white hover:border-transparent">

Make It !

</button>

</div>

<div>

</div>

</div>

</template>

axiosの設定

基本的に画像系のAIで遊ぶので、
axiosを使って、画像ファイルをバックエンドのpythonにpostして、
AI処理した画像のreturnを取得しまふ。

インストールコマンド

npm install axios

1	npm install axios

コード説明

<setup> 部分

①Composition API とTypescriptを使う

<script setup lang="ts">

1	<script setup lang="ts">

②axiosとその型をインポート。vueからリアクティブに使用する『ref』をインポートしまふ。

import axios, { AxiosResponse } from "axios";
import { ref } from "vue";

1 2	import axios, { AxiosResponse } from "axios"; import { ref } from "vue";

③親コンポネートの『AreaMain.vue』から、バックエンドのPost先アドレス(backendUrl)の設定。

interface Props {
    backendUrl: string
}
const props = defineProps<Props>();

interface Props {

backendUrl: string

}

const props = defineProps<Props>();

④『file』は、バックエンドにpostする画像を保持します。
『previesImage』は、post画像選択時のプレビューを保持しまふ。
両方とも『ref』に設定してまふ。

const file = ref();
const previewImage = ref();

1 2	const file = ref(); const previewImage = ref();

⑤postする画像選択するコードでふ。
<template>の『<input class=”hidden” type=”file” v-on:change=”fileSelected” />』に対応してまふ。

const fileSelected = (event: any): void => {
    file.value = event.target.files[0];
    const reader = new FileReader();
    reader.onload = () => {
        previewImage.value = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
};

const fileSelected = (event: any): void => {

file.value = event.target.files[0];

const reader = new FileReader();

reader.onload = () => {

previewImage.value = reader.result;

};

reader.readAsDataURL(event.target.files[0]);

};

⑥バックエンドにpostするコードでふ。バックエンドで処理した画像をダウンロードしまふ。

<template>の『<button v-on:click=”fileUpload”…』に対応してまふ。

const fileUpload = (): void => {
    console.log(props.buckendUrl);
    const formData = new FormData();
    formData.append("file", file.value);
    axios
        .post(props.buckendUrl, formData, {
            responseType: "blob",
        })
        .then((response: AxiosResponse<any, any>) => {
            let mineType: string | undefined = response.headers["content-type"];
            if (mineType === "image/jpeg" | mineType === "image/png") {
                console.log(response.headers["content-type"]);
                const blob = new Blob([response.data], { type: mineType });
                let url: string = URL.createObjectURL(blob);
                const a: HTMLAnchorElement = document.createElement("a");
                document.body.appendChild(a);
                a.download = "returnFile.".concat(mineType.slice(-3));
                a.href = url;
                a.click();
            }
        })
        .catch(error => console.log(error));
};

const fileUpload = (): void => {

console.log(props.buckendUrl);

const formData = new FormData();

formData.append("file", file.value);

axios

.post(props.buckendUrl, formData, {

responseType: "blob",

})

.then((response: AxiosResponse<any, any>) => {

let mineType: string | undefined = response.headers["content-type"];

if (mineType === "image/jpeg" | mineType === "image/png") {

console.log(response.headers["content-type"]);

const blob = new Blob([response.data], { type: mineType });

let url: string = URL.createObjectURL(blob);

const a: HTMLAnchorElement = document.createElement("a");

document.body.appendChild(a);

a.download = "returnFile.".concat(mineType.slice(-3));

a.href = url;

a.click();

}

})

.catch(error => console.log(error));

};

<template> 部分

<template>
    <div>
        <div class="p-2">
            <label
                class="px-4 py-2 bg-transparent border-blue-500 rounded cursor-pointer bg-sky-200 ring-2 hover:bg-blue-300 hover:text-white hover:border-transparent">
                Select File !
                <input class="hidden" type="file" v-on:change="fileSelected" />
            </label>
            <button v-on:click="fileUpload"
                class="px-4 py-2 font-semibold text-blue-700 bg-transparent bg-blue-100 border-blue-500 rounded ring-2 hover:bg-blue-300 hover:text-white hover:border-transparent">
                Make It !
            </button>
        </div>
        <div class="grid grid-cols-2">
            <div>
                <img v-bind:src="previewImage" class="img-fluid" alt="" />
            </div>
            <div v-if="file" class="m-2 p-2 border rounded-lg border-slate-400">
                <p>Name: {{file.name}}</p>
                <p>Size: {{file.size}}</p>
                <p>Type: {{file.type}}</p>
            </div>
        </div>
    </div>
</template>

<div>

<label

class="px-4 py-2 bg-transparent border-blue-500 rounded cursor-pointer bg-sky-200 ring-2 hover:bg-blue-300 hover:text-white hover:border-transparent">

Select File !

</label>

<button v-on:click="fileUpload"

class="px-4 py-2 font-semibold text-blue-700 bg-transparent bg-blue-100 border-blue-500 rounded ring-2 hover:bg-blue-300 hover:text-white hover:border-transparent">

Make It !

</button>

</div>

<div>

</div>

</div>

</template>

開発環境のサーバー起動

起動コマンド

npm run dev

1	npm run dev

“http://127.0.0.1:5173″にブラウザからアクセスしまふ。
『CTRL』キーを押しながらマウスでクリックでも開けまふ。

ビルド

ビルドコマンドで『dist』フォルダに出力されまふ。

npm run build

1	npm run build

後に、ビルドしたファイルをバックエンドのFastAPIに使いまふ。

Python（FastAPI）とVue.js3（Composition API、Vite、TailwindCSS）でWebアプリの開発①：開発環境の設定

Python（FastAPI）とVue.js3（Composition API、Vite、TailwindCSS）でWebアプリの開発③：FastAPIでバックエンド作成

この記事を書いた人

さぷりぺんたん

化学系で博士号を取得したが、あるとき、これからの時代はプログラミング！、と目覚める。 pythonを用いてデータ解析や機械学習に没頭。最近は、Pytorchで作ったONNXモデルを、Nuxt3にのせたWebサービスの開発、 ChatGPT や Stable Diffusion に没頭中☆('ω')☆

SNSでフォローする

Python（FastAPI）とVue.js3（Composition API、Vite、TailwindCSS）でWebアプリの開発②：フロントエンドのVue.jsのコーディング

はじめに

フォルダ構成とコード

『PostBackendPost.vue』全体のコード

axiosの設定

コード説明

<setup> 部分

<template> 部分

開発環境のサーバー起動

ビルド

関連記事

コメントを残す コメントをキャンセル

AnimateDiff：Windows用コードを作成しました

DA-CLIP(Degradation-aware CLIP)：Windows用コードを作成しました

DiffBIR：超解像や劣化画像を修復

ChatGPT：Code Interpreter を使って、超解像（ ESRGAN ）

人気の記事

コメントを残すコメントをキャンセル