序文これまでの 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 を使用するときに発生するホワイトギャップの問題 (フラッシュ画面) をすばやく解決します。
HTML は、Baidu 百科事典のナビゲーション ドロップダウン メニュー機能を模倣します。具体的...
ネットワーク データを読み込むときは、ユーザー エクスペリエンスを向上させるために、通常は円形の読み...
Docker を初めて使い始めると、通常とは異なる問題に遭遇して、必然的に混乱してしまいます。大丈夫...
CSS3 はアニメーションを作成でき、多くの Web ページのアニメーション画像、Flash アニメ...
序文インターネット上にはデータベースの最適化に関する情報や方法が数多くありますが、その多くは品質にば...
LinuxにRedisをインストールしたら、Javaを使って接続します。Javaコードは次のとおりで...
環境変数の設定の簡単な説明プログラムは、環境によって異なる環境変数を必要とします。たとえば、実稼働環...
コードをコピーコードは次のとおりです。 <!--doctype はドキュメント タイプ htm...
目次1 ストレステストの指標1.1 秒あたり1.2 クォータ1.3 平均処理時間(RT) 1.4 同...
問題を見つける最近、仕事中に問題が見つかりました。問題は、MySQL ディスクがいっぱいだったことで...
目次FormDataとは何ですか? vueとaxiosの協力による実践的な体験追加()セット()消去...
<!--[lte IE 6の場合]> <![endif]--> IE6以下で...
目次1. Node.jsとVue 2. ローカル開発環境でフロントエンドのVueプロジェクトを実行す...
フロントエンドがインターフェースを要求すると、バックエンドでインターフェースが定義されます。ステータ...
この記事では、MySql のインデックス、ロック、トランザクションに関する知識のポイントをまとめてい...