異端開発室

概要 Axiosは、JavaScript環境で広く利用されているHTTPクライアントライブラリです。本稿では、Vue.jsアプリケーションからAxiosを使用してAJAXリクエストを送信する方法と、開発環境でのAPIプロキシ設定について詳しく解説します。 Axiosのインストール VueプロジェクトにAxiosを導入するには、パackage.jsonに追加する必要があります。ターミナルで以下のコマンドを実 ...

モダンなフロントエンド開発において、AxiosなどのHTTPクライアントをそのまま各コンポーネントで使用することは、メンテナンス性の低下を招くリスクがあります。本記事では、堅牢なアプリケーションを構築するために、Axiosをラップ（二次封入）して共通化する方法について解説します。 Axiosをラップすべき主な理由 ライブラリへの依存度低減: ライブラリに重大な ...

Vue.jsにおいて、画像のアップロードとダウンロードはさまざまな方法で実現できます。以下では、それぞれの基本的なアプローチについて説明します。 画像アップロード 1. HTML <input type="file"> 要素を使用する これは最も基本的な方法であり、ファイル入力フィールドを利用してユーザーがアップロードしたい画像を選択できるようにします。 <templa ...

Promiseによる非同期処理の改善 従来のコールバック関数では、複数の非同期操作を順序通りに実行する際に「コールバックヘリックス」が発生し、コードの可読性が低下していました。ES6で導入されたPromiseは、この問題を解決するための主要な仕組みです。 <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script> <scr ...

概要 Django REST Framework（DRF）をバックエンドに据えたシングルページアプリケーション（SPA）では、ブラウザの同一オリジンポリシーとCSRF保護をどう両立させるかが重要になる。単純に@csrf_exemptを付けるとセキュリティが低下するため、以下の2パターンで安全にトークンを付与する手法を紹介する。 パターンA：Cookieベースの自動付与 DRF標準のCSRF_USE_SESSIONS ...

開発フェーズのタスク 要件定義 フロントエンド技術選定 プロジェクト初期設定（Vue汎用テンプレート構築） 基本ページ開発 アプリマーケットトップページ（審査済みアプリ一覧表示） アプリ詳細ページ コンテンツ作成機能（アプリ/問題/評価項目） 解答機能（アプリ問題解答/結果表示/回答履歴確認） 使用技術 Vue 3 (Vue CLI) Pinia（状態管理） Axios（HTTP通信） A ...

システム要件 ブランドデータの基本CRUD操作実装 一括削除機能の実装 ページング機能によるデータ表示 条件指定検索機能の実装 環境設定 プロジェクト構成 Maven依存関係設定 (pom.xml): <dependencies> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.5. ...

日次1 1. プロジェクト構成と主要ファイル プロジェクトフォルダ構造： 主要ファイル： 2. Vue2との変更点 setupオプションの記述方法と実行タイミング ライフサイクル図： コンポーネントがレンダリングされる際、setup関数が最初に実行され、beforeCreateより前で自動的に呼び出されます。 構文糖衣（Syntax Sugar）：コード量を削減 まとめ： 3. コンポジションAPI -- r ...

Axios は Promise ベースの軽量 HTTP クライアントで、ブラウザと Node.js の両環境で同一 API を提供します。ブラウザでは内部で XMLHttpRequest を、サーバサイドでは Node.js 標準の http モジュールを利用して動作します。 主な機能 リクエスト／レスポンス インターセプター リクエストのキャンセル／タイムアウト ネストしたクエリパラメータの自動シリアライズ リ ...

一、HTTPリクエスト処理1. APIインタフェースの定義import request from '@/utils/request' export const fetchUserList = (query: UserQuery, payload: UserPayload) => request({ url: '/api/v1/users', method: 'post', query, payload })2. リクエストインターセプタimport axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'a ...