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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Spring Boot+Vue のフロントエンドとバックエンドの分離と統合ソリューションの詳細な例
  • Vue2 フロントエンドとバックエンドの分離プロジェクトにおける Ajax クロスドメイン セッション問題の解決
  • Vue+springboot フロントエンドとバックエンドの分離により、シングルサインオンのクロスドメイン問題解決を実現
  • SpringBoot+Vue.jsでフロントエンドとバックエンド分離のファイルアップロード機能を実現
  • Vue WeChat認証ログインのフロントエンドとバックエンドを分離するエレガントなソリューションの詳細な説明
  • vue+Springboot フロントエンドとバックエンドの分離プロジェクトをデプロイする手順
  • Vue.js を使用してフロントエンドとバックエンドを分離した RBAC ロール権限管理を実装する方法の詳細な説明
  • vue.js + UEditor 統合の詳細解説 [フロントエンドとバックエンドの分離プロジェクト]

<<:  サーバー上の php-cgi.exe プロセスが多数存在し、CPU が 100% 占有される問題の解決方法

>>:  CSS が最初のサイクルで画像を読み込むために @keyframes を使用するときに発生するホワイトギャップの問題 (フラッシュ画面) をすばやく解決します。

推薦する

HTMLはBaidu百科事典のナビゲーションドロップダウンメニュー機能を模倣します

HTML は、Baidu 百科事典のナビゲーション ドロップダウン メニュー機能を模倣します。具体的...

スケルトンスクリーン効果を実現する CSS

ネットワーク データを読み込むときは、ユーザー エクスペリエンスを向上させるために、通常は円形の読み...

Dockerでの接続例外中のエラーを解決する

Docker を初めて使い始めると、通常とは異なる問題に遭遇して、必然的に混乱してしまいます。大丈夫...

CSS3 アニメーション ボールローリング JS コントロールアニメーション一時停止

CSS3 はアニメーションを作成でき、多くの Web ページのアニメーション画像、Flash アニメ...

MySQL の最適化: 高品質の SQL 文を書く方法

序文インターネット上にはデータベースの最適化に関する情報や方法が数多くありますが、その多くは品質にば...

Linux で Redis のリモート接続を実装する方法

LinuxにRedisをインストールしたら、Javaを使って接続します。Javaコードは次のとおりで...

Nest.js 環境変数の設定とシリアル化の詳細な説明

環境変数の設定の簡単な説明プログラムは、環境によって異なる環境変数を必要とします。たとえば、実稼働環...

標準的なHTMLの書き方は、Dreamweaverによって自動的に生成されるものとは異なります。

コードをコピーコードは次のとおりです。 <!--doctype はドキュメント タイプ htm...

サーバーストレステストの概念と方法 (TPS/同時実行性)

目次1 ストレステストの指標1.1 秒あたり1.2 クォータ1.3 平均処理時間(RT) 1.4 同...

MySQL がエラーを報告: ファイルが見つかりません: './mysql/plugin.frm' 解決策

問題を見つける最近、仕事中に問題が見つかりました。問題は、MySQL ディスクがいっぱいだったことで...

Vue で axios を使用して画像をアップロードするときに発生する問題

目次FormDataとは何ですか? vueとaxiosの協力による実践的な体験追加()セット()消去...

Vue.js プロジェクトの開始方法

目次1. Node.jsとVue 2. ローカル開発環境でフロントエンドのVueプロジェクトを実行す...

uniappの無痛トークンリフレッシュ方法の詳細な説明

フロントエンドがインターフェースを要求すると、バックエンドでインターフェースが定義されます。ステータ...

MySql のインデックス、ロック、トランザクションの知識ポイントのまとめ

この記事では、MySql のインデックス、ロック、トランザクションに関する知識のポイントをまとめてい...