FastApi+Vue+LayUIを使用してフロントエンドとバックエンドを分離するサンプルコード

序文

これまでの API 開発では、FastApi を使用してうまく実現できました。ただし、実際の使用では、通常、フロントエンドプロジェクトとバックエンドプロジェクトを分離することをお勧めします。今日は、FastApi+Vue+LayUI を使用して、フロントエンドとバックエンドを分離したデモを作成します。

プロジェクト設計

後部

バックエンドでは、FastApi を使用して新しいテストビューでルートを定義し、アプリに登録します。また、フロントエンドが呼び出してレンダリングできるように、データベースからのデータの読み取りをシミュレートするためのインターフェイスをテストビューに定義します。
コード

テスト

fastapi から FastAPI、Depends、Header、HTTPException、APIRouter をインポートします。
fastapi.param_functionsから本文をインポート
starlette.requestsからリクエストをインポート
starlette.templating から Jinja2Templates をインポートします
スターレットのインポートステータスから
uvicorn をインポートする
データからインポートデータ
fastapi.responses から StreamingResponse をインポートします
fastapi.responsesからJSONResponseをインポートします

# ルーターをインスタンス化する router = APIRouter()
テンプレート = Jinja2Templates('テンプレート')

# ビューはルーターを使用してリクエストメソッドとURIを宣言することに注意してください
@router.get('/info')
ユーザーリスト()を定義します:
    # vueのレスポンスデータ項目 = [
        {'id':'1','name':'フィガー'},
        {'id':'2','name':'飛ぶ'},
        {'id':'3','name':'エンヘン'},
        ]
    JSONResponse(content=items) を返します

@ルーター.get('/')
def welcome():
    「テストルートはこちらです」と返します

'''
実際、ここでの home.html も、ユーザーにレンダリングするためにフロントエンド サービスが必要です。
ただし、デモンストレーションの便宜上、フロントエンド サーバーを起動せず、フロントエンド コードを home.html に直接記述しました。
実際、ユーザーが /check を要求すると、フロントエンド コードはデータを取得するために /info インターフェイスを要求します。
これにより、フロントエンド ページでのデータ レンダリングが可能になります。
'''

@router.get('/check')
def home(リクエスト:リクエスト):
    テンプレートを返します。TemplateResponse(name='home.html',context={'request':request,})

フロントエンド

フロントエンドでは、Vue、LayUI、Axios の JS および CSS CDN リソースを直接インポートします。Vue インスタンスのマウントフェーズでは、axios を使用してバックエンドインターフェイスを呼び出してデータを取得し、LayUI スタイルを使用してテーブル要素を美しくします。
コード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- layui.css をインポート -->
    <link rel="スタイルシート" href="https://www.layuicdn.com/layui/css/layui.css" rel="外部nofollow" />

    <!-- layui.js をインポート -->
    <script src="https://www.layuicdn.com/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <title>ホーム</title>
</head>
<本文>
    <div id="アプリ">
        <テーブルクラス="layui-table">

            <tr v-for="p in 情報">
                <td>[[ p.id ]]</td>
                <td>[[ p.name ]]</td>
            </tr>

        </テーブル>
    </div>
    <テーブル id="test" クラス="layui-table"></テーブル>


<script type="text/javascript">
    const Vapp = Vue.createApp({
        データ（） {
            戻る {
                情報: [{id:1,name:'phyger'}],
                情報: 「こんにちは、vue...」
            }
        },
        マウント() {
            this.showinfo();
        },
        メソッド: {
            表示情報(){
                axios.get('/test/info')
                .then(応答=>{
                    this.infos=レスポンスデータ;
                    console.log(応答);
                    コンソールにログ出力します。

                })
                ,エラー=>{
                    コンソールログ(エラー);
                };
            },
        },
    })
    Vapp.config.compilerOptions.delimiters = ['[[', ']]']
    Vapp.mount('#app')
</スクリプト>
</本文>

</html>

プロジェクトを実行する

FastApi バックエンドサーバーを起動し、/test/check インターフェイスにアクセスします。

質疑応答

Q: /info インターフェースをリクエストすると、なぜ一時リダイレクトが常に表示されるのですか?

A: 理由は、FastApi インターフェイスを定義したときに、URI の形式が標準化されていなかったためです。URI の末尾に / は必要ありませんでした。インターフェイスに / を追加し、ブラウザーを使用して URI にアクセスすると、ブラウザーは末尾の / を無視します。FastApi は、/ のないブラウザー要求を、/ で定義したビュー関数に内部的にリダイレクトします。

FastApi+Vue+LayUI によるフロントエンドとバックエンドの分離を実現するサンプルコードに関するこの記事はこれで終わりです。FastApi+Vue+LayUI によるフロントエンドとバックエンドの分離に関するその他の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: