AIアプリマーケット向けWebフロントエンドの基本ページ開発
開発フェーズのタスク
要件定義
フロントエンド技術選定
プロジェクト初期設定（Vue汎用テンプレート構築）
基本ページ開発
アプリマーケットトップページ（審査済みアプリ一覧表示）
アプリ詳細ページ
コンテンツ作成機能（アプリ/問題/評価項目）
解答機能（アプリ問題解答/結果表示/回答履歴確認）
使用技術
Vue 3 (Vue CLI)
Pinia（状態管理）
Axios（HTTP通信）
A ...
8月16日 09:33 投稿
JavaWebアプリケーションのCRUD操作とデータ管理実装
システム要件
ブランドデータの基本CRUD操作実装
一括削除機能の実装
ページング機能によるデータ表示
条件指定検索機能の実装
環境設定
プロジェクト構成
Maven依存関係設定 (pom.xml):
<dependencies>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.5. ...
8月9日 17:03 投稿
VUE3開発ノート
日次1
1. プロジェクト構成と主要ファイル
プロジェクトフォルダ構造：
主要ファイル：
2. Vue2との変更点
setupオプションの記述方法と実行タイミング
ライフサイクル図：
コンポーネントがレンダリングされる際、setup関数が最初に実行され、beforeCreateより前で自動的に呼び出されます。
構文糖衣（Syntax Sugar）：コード量を削減
まとめ：
3. コンポジションAPI -- r ...
7月30日 06:03 投稿
ブラウザ・Node.js 両対応 HTTP クライアント Axios 実践ガイド
Axios は Promise ベースの軽量 HTTP クライアントで、ブラウザと Node.js の両環境で同一 API を提供します。ブラウザでは内部で XMLHttpRequest を、サーバサイドでは Node.js 標準の http モジュールを利用して動作します。
主な機能
リクエスト／レスポンス インターセプター
リクエストのキャンセル／タイムアウト
ネストしたクエリパラメータの自動シリアライズ
リ ...
7月22日 01:05 投稿
Vue TypeScript Element Template 実践活用ガイド
一、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 ...
7月18日 23:29 投稿
Vue.jsにおける非同期リクエストの連鎖とMyBatisでのパラメータマッピングエラーの解決方法
1. 非同期通信におけるパラメータ取得とリクエストの実行順序
フロントエンドの開発において、あるAPIから取得した値を別のリクエストのパスパラメータとして使用する場合、データの同期制御が不十分だと「パラメータが空」の状態でリクエストが送信されることがあります。
問題の状況
特定のユーザー情報を取得した後に、その情報を元に統計データを取得する処理において ...
7月17日 02:03 投稿
Vue2とEChartsを連携させたインタラクティブなグラフ描画手法
環境構築と依存関係の導入Vue2プロジェクトにEChartsを導入し、動的なデータ可視化を実現するための基盤を構築します。必要なパッケージをインストールし、コンポーネント内で利用できるようにします。npm install echarts element-ui axiosコンポーネントのスクリプトセクションでEChartsを読み込みます。import * as echarts from 'echarts';
import axios from 'axios'; ...
7月11日 21:44 投稿
Ant Design Vue でのカスタムファイルアップロードコンポーネントの実装
Ant Design Vue の <a-upload> コンポーネントを拡張し、ファイルのアップロード・ダウンロード・削除機能を実装する方法を紹介します。API の download イベントが期待通りに動作しなかったため、代わりに preview イベントを活用してダウンロード処理を実現しています。
親コンポーネントからの呼び出し例
<new-upload
ref="upDataMout"
:upload-action-ur ...
7月7日 18:27 投稿
AJAX、Fetch、Axiosによるデータ取得の比較
jQuery.ajaxの特徴
jQuery.ajaxはネイティブのXHRをラッピングし、JSONPサポートを追加した非同期通信手段。以下が基本的な使用例。
$.ajax({
endpoint: 'https://api.example.com/data',
parameters: { id: 123 },
requestType: 'GET',
expectedFormat: 'json',
asyncOperation: true,
cacheControl: false,
onSuccess: function(response) { ...
7月4日 23:35 投稿
Vue 3での実装例
Element UIの日本語化
Vueプロジェクトのmain.tsに以下のコードを追加します。
import jaLocale from 'element-plus/es/locale/lang/ja'
app.use(ElementPlus, {
locale: jaLocale,
})
Axiosの統一インターフェース作成
1. utilsディレクトリ内にrequest.tsを作成します。
import axios from "axios";
import { ElNotification } from "element-plus";
import { u ...
7月4日 18:43 投稿