異端開発室

VueにおけるDiffアルゴリズムは、仮想DOMの比較と更新を行うpatch関数によって実現されます。 1. patch関数 patch関数は主に以下の4つの引数を取りますが、主なのは最初の2つです。 oldVnode: 旧の仮想DOMノード vnode: 新しい仮想DOMノード hydrating: サーバーサイドレンダリング用のフラグ removeOnly: transition-groupコンポーネント用のフラグ 主な処理フローは以 ...

システムアーキテクチャ設計 FlaskバックエンドはRESTful API構造を採用し、データ交換インターフェースを提供 VueフロントエンドはAxiosによる非同期通信を実現し、モジュールベースのコンポーネント開発を行う データベースにはMySQLまたはPostgreSQLを使用し、プロジェクトとタスク情報を格納 JWT（JSON Web Token）によるユーザー認証および権限管理を実施 Flaskバッ ...

大規模システムでは、フロントエンドも複雑になるため、コンポーネントベースの開発が重要です。従来のASP.NETや純粋なJavaScriptモジュール開発には限界があり、ReactやVueのような新しい技術が注目されています。 ReactとVueはどちらも軽量でユーザーインターフェース構築に適していますが、それぞれ異なる特徴を持っています。以下は両者の比較です。 ### テンプレー ...

外部の可視化ダッシュボード（例：Grafana）をVueアプリケーション内にiframeとして埋め込む際、動的に変化するURLの取得やiframe内のDOM要素に対する操作（非表示・削除・追加）が必要になるケースがある。これらの操作は同源ポリシーにより制限されるため、事前にバックエンド側でプロキシ設定を行い、iframeのドメインを現在のVueアプリケーションと同一オリジンにする ...

推奨：2番目の方法を紹介しています。1番目はCDNを使用して企业内部環境では利用できなくなります。 方法1：MathJax 2.7.5（CDN読み込み） この方法は推奨しません。企业内部ネットワークでは外部CDNにアクセスできないためです。 1.index.htmlにCDNを追加 <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJa ...

マイクロフロントエンドのカスタムフレームワーク 1. サブアプリケーションの統合 Vue2アプリケーション const webpack = require('webpack'); const path = require('path'); module.exports = { devServer: { port: 9004, headers: { 'Access-Control-Allow-Origin': '*' } }, configureWebpack: { output: { library: 'vue2App', ...

背景 Vueベースのローコードプラットフォームの開発を担当し、既に二次開発が行われている状況で、一部のコンポーネントのパスを変更する必要がありました。しかし、その変更により二次開発されたコンポーネントの参照が壊れる可能性があり、各チームにパスの変更を通知することも現実的ではありませんでした。 解決策 この問題を解決するための主なアプローチは、Webpac ...

JSON Web Tokenによる認証処理 利用方法：http://getblimp.github.io/django-rest-framework-jwt/ インストール手順 pip install djangorestframework-jwt 設定方法 REST_FRAMEWORK = { 'DEFAULT_AUTHENTICATION_CLASSES': ( 'rest_framework.authentication.BasicAuthentication', 'rest_framework.authentication.SessionAuthentication', ...

一、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 ...

この記事は「掘金・启航计划」に参加しています。 プロジェクトの背景 Viteが登場してから、webpackのユーザーの多くを引き継ぎました。初心者でもすぐにViteの高速性を体験できます。 Viteの公式ドキュメントでは、その名前の由来について述べられています。Vite（フランス語で「速さ」）という名前通り、すべての要素が「速さ」を強調しています。 しかし、vue-cliに慣れ ...