1. JSON データを読み取るための axios の使用
インストールコマンド: npm install axios --save
src ディレクトリに新しい http フォルダーを作成し、新しい Index.ts ファイルを作成します。
使用する必要があるコンポーネントの http にメソッドをインポートするだけです
JSON データをカルーセルにバインドする
2. バックエンド開発におけるWebapiの作成・操作・ディレクトリの説明
vs2022 を使用して WebAPI を作成する
.NET6.0を選択
「コントローラーで作成」を選択します
「OpenApl」を選択します
5. ディレクトリを作成する
3. Webapi ルーティング設定、および swagger を使用したインターフェイスの表示とデバッグ
新しいイメージコントローラーを作成する
デフォルトルートを変更する
画像リストを取得するメソッドを追加
ImageUrl="画像のアドレスを内側に追加", CourseUrl="ページジャンプのアドレスを内側に追加"
Swagger を使用した表示とデバッグ
ブレークポイントを追加してデバッグする
次にフォアグラウンドで実行します
するとこの画面が表示されます
次に、段階的にテストします
3. Axios は webapi のクロスドメイン問題分析を読み取ります
出現する現象: webapi インターフェースは swagger またはブラウザから直接アクセスして返されることがわかりますが、axios を使用するとブラウザがエラーを報告します。
理由：上記の現象が発生するのは、ブラウザがJavaScript対応であるためです。
4. クロスドメインの問題の解決
バックエンドはクロスドメインの問題を解決します (ソリューション バックエンドはクロスドメインを許可するようにインターフェイスを設定します)
Program.cs にコードを追加します (メイン関数)
//クロスドメインポリシーを追加
builder.Services.AddCors(オプション =>
{
options.AddPolicy("CorsPolicy", opt => opt.AllowAnyOrigin().AllowAnyHeader().WithExusedHeaders("X-Pagination"));
});
//クロスドメインポリシーを使用する
app.UseCors("CorsPolicy");
フロントエンドはクロスドメインの問題を解決します
フロントエンドはプロキシを設定することでポートとバックエンドの一貫性を保ちます。
次のコードを vue.config.js ファイルの下に追加します。
次に、フロントエンド プロジェクトを再起動します