序文これまでの 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: サーバー上の php-cgi.exe プロセスが多数存在し、CPU が 100% 占有される問題の解決方法
>>: CSS が最初のサイクルで画像を読み込むために @keyframes を使用するときに発生するホワイトギャップの問題 (フラッシュ画面) をすばやく解決します。
この記事の例では、WeChatアプレットの下部ナビゲーションバーコンポーネントの具体的な実装コードを...
バグ図のように、削除文とパラメータをデータベースにコピーして実行し、2つのデータを削除しようとしたの...
公式サイトをダウンロード自分に合ったバージョンを選択してダウンロードしてください。 ダウンロードをク...
この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...
目次序文SSHとは何かssh は何に使用されますか? sshの使い方ssh 再修正要約する序文ssh...
コードをコピーコードは次のとおりです。 1. 新浪微博<a href="http:/...
マスタースレーブ同期 (マスタースレーブレプリケーションとも呼ばれる) は、マスタースレーブデータの...
目次1. カスタム指示の登録1.1. グローバルカスタム指示1.2. ローカルカスタム指示2. カス...
Linux サーバーで作業している場合、ネットワーク カード/イーサネット カードに静的 IP アド...
この記事では、タブ切り替え機能を実装するためのJavaScriptの具体的なコードを参考までに共有し...
目次1. ElementUIで基本的なスタイルを構築する2. [送信]ボタンをクリックして、アカウン...
1. 動的コンポーネント <!DOCTYPE html> <html> &l...
偶然、素晴らしい人工知能のチュートリアルを発見したので、みんなと共有せずにはいられませんでした。この...
目次初期作成方法ファクトリーパターンコンストラクターパターンコンストラクタパターンの最適化プロトタイ...
この記事では、実際に発生した問題をもとに、git の設定に関する内容を紹介します。コマンド: git...