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 を使用するときに発生するホワイトギャップの問題 (フラッシュ画面) をすばやく解決します。

推薦する

WeChat アプレットのカスタム下部ナビゲーション バー コンポーネント

この記事の例では、WeChatアプレットの下部ナビゲーションバーコンポーネントの具体的な実装コードを...

Mybatis mysqlの削除操作では、最初のデータメソッドのみを削除できます。

バグ図のように、削除文とパラメータをデータベースにコピーして実行し、2つのデータを削除しようとしたの...

MySQL 5.7.29 + Win64 解凍バージョンのインストールチュートリアル(画像とテキスト付き)

公式サイトをダウンロード自分に合ったバージョンを選択してダウンロードしてください。 ダウンロードをク...

Win10 での MySQL 8.0.15 のインストールと設定のグラフィック チュートリアル

この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...

sshとは何ですか?使い方は?どのような誤解があるのでしょうか?

目次序文SSHとは何かssh は何に使用されますか? sshの使い方ssh 再修正要約する序文ssh...

ウェブページでよく使用される共有コードの完全なリスト(フロントエンドに必須)

コードをコピーコードは次のとおりです。 1. 新浪微博<a href="http:/...

MySQL はどのようにしてマスターとスレーブの同期を実現するのでしょうか?

マスタースレーブ同期 (マスタースレーブレプリケーションとも呼ばれる) は、マスタースレーブデータの...

vue3 カスタムディレクティブの詳細

目次1. カスタム指示の登録1.1. グローバルカスタム指示1.2. ローカルカスタム指示2. カス...

RHEL8 で静的 IP アドレスを設定するさまざまな方法の簡単な分析

Linux サーバーで作業している場合、ネットワーク カード/イーサネット カードに静的 IP アド...

タブ切り替え機能を実装するJavaScriptカスタムプラグイン

この記事では、タブ切り替え機能を実装するためのJavaScriptの具体的なコードを参考までに共有し...

フォームから Vue ElementUI を使用してログイン効果を実装する例

目次1. ElementUIで基本的なスタイルを構築する2. [送信]ボタンをクリックして、アカウン...

Vue の動的コンポーネントと非同期コンポーネントの詳細な理解

1. 動的コンポーネント <!DOCTYPE html> <html> &l...

Postman に基づく HTTP インターフェース テスト プロセスの分析

偶然、素晴らしい人工知能のチュートリアルを発見したので、みんなと共有せずにはいられませんでした。この...

js でオブジェクトを作成するさまざまな方法とその長所と短所のまとめ

目次初期作成方法ファクトリーパターンコンストラクターパターンコンストラクタパターンの最適化プロトタイ...

Gitlab実践チュートリアルでは、関連する設定操作にgit configを使用します。

この記事では、実際に発生した問題をもとに、git の設定に関する内容を紹介します。コマンド: git...