WindowsでAIプログラミング

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

はじめに

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

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

最終コードはこちら

https://github.com/supplepentan/penta_sample_fastapi_vue

フォルダ構成とコード

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

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

『PostBackendPost.vue』全体のコード

axiosの設定

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

インストールコマンド

コード説明

<setup> 部分

①Composition API とTypescriptを使う

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

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

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

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

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

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

<template> 部分

開発環境のサーバー起動

起動コマンド

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

ビルド

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

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

関連記事

この記事を書いた人
化学系で博士号を取得したが、 あるとき、これからの時代はプログラミング!、と目覚める。 pythonを用いてデータ解析や機械学習に没頭。 最近は、フロントにVue.js、バックにFastAPIを用いて、 PytorchやTensorflowを実装したWebサービスを開発中。☆('ω')☆
SNSでフォローする

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA