JavaScript で右クリック メニューを統合する layim のサンプル コード

JavaScript で右クリック メニューを統合する layim のサンプル コード

1. 効果の実証

1.1、友達の右クリックメニュー:

ここに画像の説明を挿入

1.2. グループの右クリックメニュー:

ここに画像の説明を挿入

1.3. グループの右クリックメニュー:

ここに画像の説明を挿入

2. 実装チュートリアル

次に、友達の右クリック メニューを例にとります。実装手順は次のとおりです。

2.1. フレンドの右クリックイベントをバインドする:

/* フレンドの右クリックイベントをバインド */
$('body').on('mousedown', '.layim-list-friend li ul li', function(e){
 // 右クリック以外のイベントをフィルタリングする if(3 != e.which) {
 	戻る;
 }
	// イベントのディスパッチを停止します e.stopPropagation();
	
	var othis = $(this);
 // 後で関数を使いやすくするために友達番号を取得します (友達番号をバインドするには、layim.js ソース コードを変更する必要があります。または、クラス内で友達番号を直接インターセプトする必要があります。これは、ページで F12 を押すと表示されます)
	var mineId = $(this).data('mineid');
	var uid = Date.now().toString(36);
	var space_icon = '  ';
	var space_text = '      ';
	var html = [
			'<ul id="contextmenu_'+uid+'" data-id="'+mineId+'" data-index="'+mineId+'" data-mold="1">',
			'<li data-type="menuChat"><i class="layui-icon" >&#xe611;</i>'+space_icon+'インスタント メッセージを送信</li>',
			'<li data-type="menuProfile"><i class="layui-icon">&#xe60a;</i>'+space_icon+'プロフィールを表示</li>',
			'<li data-type="menuHistory"><i class="layui-icon" >&#xe60e;</i>'+space_icon+'メッセージ履歴</li>',
			'<li data-type="menuDelete">'+space_text+'友達を削除</li>',
			'<li data-type="menuMoveto">'+space_text+'移動</li></ul>'
		]。参加する（''）;
	// ポップアップウィンドウlayer.tips(html, othis, {
  	ヒント: 1
  	、時間: 0
  	、シフト: 5
  	、修正: 真
  	、スキン: 'ayui-box layui-layim-contextmenu'
 });
});

ここでは右クリック イベントが正常にバインドされていますが、ポップアップ ウィンドウによって友人の名前とアバターが直接ブロックされており、あまり使いやすくありません。最適化するにはどうすればよいでしょうか。読み進めてみましょう。

ここに画像の説明を挿入

2.2. ポップアップウィンドウの位置をリセットします。
次に、レイヤーがポップアップした後、成功したコールバックメソッドでポップアップボックスの位置をリセットします。デフォルトのポップアップボックスの位置を基準に、一定のピクセル数だけ左に移動し、ポップアップボックス内のliの数に応じて動的に下に移動します。返信の下部にあるポップアップボックスの場合は、ポップアップボックス全体が上に移動します。

レイヤー.ヒント(html, othis, {
 	ヒント: 1
 	、時間: 0
 	、シフト: 5
 	、修正: 真
 	、スキン: 'ayui-box layui-layim-contextmenu'
 	、成功: function(layero){
 		// -----#Start---------- ポップアップウィンドウの位置をリセットする----------------
 	var stopmp = function (e) { stope(e); };
 	レイヤーo.off('mousedowm',stopmp).on('mousedowm',stopmp);
 	var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu');
 		// 右クリックボックス li の数を取得します。 var liCount = (html.split('</li>')).length;
 	 // 元のポップアップ ボックスの位置を取得します。var top = layerobj.css('top').toLowerCase().replace('px','');
		var left = layerobj.css('left').toLowerCase().replace('px','');
		// 位置パーソナリティ調整 top = getTipTop(1, top, liCount);
		左 = 30 + parseInt(左);
 	// 箇条書きボックスの位置を移動します。layerobj.css({'width':'150px', 'left':left+'px', 'top':top+'px'});
		$('.layui-layim-contextmenu li').css({'padding-left':'18px'});
 		// -----#End---------- ポップアップウィンドウの位置をリセットします----------------
 	}
});

// ウィンドウのドキュメント表示領域の高さを取得します。 var currentHeight = getViewSizeWithScrollbar();
関数 getViewSizeWithScrollbar(){
	var クライアントの高さ = 0;
	if(window.innerWidth){
		クライアントの高さ = window.innerHeight;
	}そうでない場合、(document.documentElement.offsetWidth == document.documentElement.clientWidth){ 
		クライアントの高さ = document.documentElement.offsetHeight;
	}それ以外{ 
		クライアントの高さ = document.documentElement.clientHeight + getScrollWith();
	} 
	クライアントの高さ = クライアントの高さ - 180;
	clientHeight を返します。
}

/**
 * 先端位置の高さを計算します * @param type type (1 友達、グループ、2 グループ)
 * @param top 元の箇条書きフレームの高さ* @param liCount 箇条書きフレームレイヤー内のliの数*/
var getTipTop = 関数 (type, top, liCount) {
	liCount--;
	if(トップ > (現在の高さ-45*liCount)){
		上部 = parseInt(上部) - 45;
	}それ以外{
		if(type == 1){
			上部 = parseInt(上部) + 30*liCount - 10;
		}それ以外{
			上部 = parseInt(上部) + 30*(liCount - 1);
		}
	}
	先頭に戻る;
};

ポップアップフレームの位置をリセットすると、写真のようにさらに美しく見えます。

ここに画像の説明を挿入

2.3. 右クリックのポップアップイベントを最適化します。
ユーザーが他の機能を操作しているとき、右クリックのポップアップ ウィンドウ レイヤーはインターフェイス内にまだ存在します。ユーザー エクスペリエンスを向上させるために、次の操作では、マウス イベントとマウス ホイール イベントを監視して、右クリックのポップアップ ウィンドウ レイヤーを適時に閉じます。

// ブラウザがデフォルトで右クリックできないようにする document.oncontextmenu = function() {
 false を返します。
}
// チャットメインインターフェースイベントをクリックします $('body').on('click', '.layui-layim', function(e){
 空のヒント();
});
// 右クリックチャットメインインターフェースイベント $('body').on('mousedown', '.layui-layim', function(e){
 空のヒント();
});
// マウスホイールイベントをリッスンします $('body').on('mousewheel DOMMouseScroll', '.layim-tab-content', function(e){
 空のヒント();
});
// 右クリックポップアップをすべてクリアする var emptyTips = function () {
	// 右クリックメニューを閉じる layer.closeAll('tips');
};

2.4. 右クリックメニューのオプションのクリックイベントをバインドします。
最後のステップは、「インスタント メッセージの送信」を例にして、右クリック メニューのオプションのクリック イベントをバインドすることです。

var $ = layui.jquery、アクティブ = {
	メニューチャット: 関数(){
		/*インスタントメッセージを送信*/
	 var mineId = $(this).parent().data('id');
	 var moldId = $(this).parent().data('mold');
		コンソールにログ出力します。
	 layim.chat({
			タイプ: moldId == 1 ? "友達" : "グループ",
	 	名前: 'シャオ・フアン'、
			アバター: '友達アバター、実際のアプリケーションの動的バインディング'、
			ID: 鉱山ID、
			ステータス: 「友達の現在のオフラインステータス」
		});
 },
 メニュー履歴: 関数(){
 	/*メッセージレコード*/
		var mineId = $(this).parent().data('id');
	 var moldId = $(this).parent().data('mold');
		コンソールにログ出力します。
 }
};
$('body').on('click', '.layui-layer-tips li', function(e){
 var type = $(this).data('type');
 active[type] ? active[type].call(this) : '';
	// 右クリックのポップアップボックスをすべてクリアします emptyTips();
});

おめでとうございます、完了です!

3. 最後に、完全なコードを添付します

// ブラウザがデフォルトで右クリックできないようにする document.oncontextmenu = function() {
 false を返します。
}
// チャットメインインターフェースイベントをクリックします $('body').on('click', '.layui-layim', function(e){
 空のヒント();
});
// 右クリックチャットメインインターフェースイベント $('body').on('mousedown', '.layui-layim', function(e){
 空のヒント();
});
/* マウスホイールイベントをリッスンする*/
$('body').on('マウスホイール DOMMouseScroll', '.layim-tab-content', function(e){
 空のヒント();
});
/* フレンドの右クリックイベントをバインド */
$('body').on('mousedown', '.layim-list-friend li ul li', function(e){
	// 右クリックのポップアップボックスをすべてクリアします emptyTips();
 if(3 != e.which) {
 	戻る;
 }
	// イベントのディスパッチを停止します e.stopPropagation();
	
	var othis = $(this);
 othis.hasClass('layim-null') の場合、戻り値:
 
	// 選択したスタイルをすべて削除します $('.layim-list-friend li ul li').removeAttr("style","");
 // 選択済みとしてマーク othis.css({'background-color':'rgba(0,0,0,.05)'});
 
	var mineId = $(this).data('mineid');
	var uid = Date.now().toString(36);
	var space_icon = '&nbsp;&nbsp;';
	var space_text = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
 var html = [
  			'<ul id="contextmenu_'+uid + '" data-id="'+mineId+'" data-index="'+mineId+'" data-mold="1">',
  			'<li data-type="menuChat"><i class="layui-icon" >&#xe611;</i>'+space_icon+'インスタント メッセージを送信</li>',
  			'<li data-type="menuProfile"><i class="layui-icon">&#xe60a;</i>'+space_icon+'プロフィールを表示</li>',
  			'<li data-type="menuHistory"><i class="layui-icon" >&#xe60e;</i>'+space_icon+'メッセージ履歴</li>',
  			'<li data-type="menuDelete">'+space_text+'友達を削除</li>',
  			'<li data-type="menuMoveto">'+space_text+'移動</li></ul>'
  		]。参加する（''）;
 
 レイヤー.ヒント(html, othis, {
  	ヒント: 1
  	、時間: 0
  	、シフト: 5
  	、修正: 真
  	、スキン: 'ayui-box layui-layim-contextmenu'
  	、成功: function(layero){
  	 var liCount = (html.split('</li>')).length;
  	var stopmp = function (e) { stope(e); };
  	レイヤーo.off('mousedowm',stopmp).on('mousedowm',stopmp);
  	var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu');
  	// ポップアップ ボックスの位置を移動します。 var top = layerobj.css('top').toLowerCase().replace('px','');
 			var left = layerobj.css('left').toLowerCase().replace('px','');
 			先頭 = getTipTop(1, 先頭, liCount);
 			左 = 30 + parseInt(左);
 			レイヤーオブジェクトに、レイヤーの横幅を 150 ピクセルに設定します。
 			$('.layui-layim-contextmenu li').css({'padding-left':'18px'});
  	}
	});
});

// 右クリックポップアップをすべてクリアする var emptyTips = function () {
	// すべての友達が選択したスタイルを削除します $('.layim-list-friend li ul li').removeAttr("style", "");
	// すべてのグループの選択されたスタイルを削除します $('.layim-list-group li').removeAttr("style","");
	// 右クリックメニューを閉じる layer.closeAll('tips');
};

// ウィンドウのドキュメント表示領域の高さを取得します。 var currentHeight = getViewSizeWithScrollbar();
関数 getViewSizeWithScrollbar(){
	var クライアントの高さ = 0;
	if(window.innerWidth){
		クライアントの高さ = window.innerHeight;
	}そうでない場合、(document.documentElement.offsetWidth == document.documentElement.clientWidth){ 
		クライアントの高さ = document.documentElement.offsetHeight;
	}それ以外{ 
		クライアントの高さ = document.documentElement.clientHeight + getScrollWith();
	} 
	クライアントの高さ = クライアントの高さ - 180;
	clientHeight を返します。
}

/**
 *先端位置の高さを計算します* @param type type (1 friend, group, 2 group)
 * @param top 元の箇条書きフレームの高さ* @param liCount 箇条書きフレームレイヤー内のliの数*/
var getTipTop = 関数 (type, top, liCount) {
	liCount--;
	if(トップ > (現在の高さ-45*liCount)){
		上部 = parseInt(上部) - 45;
	}それ以外{
		if(type == 1){
			上部 = parseInt(上部) + 30*liCount - 10;
		}それ以外{
			上部 = parseInt(上部) + 30*(liCount - 1);
		}
	}
	先頭に戻る;
};

// 右クリックメニューオプションのクリックイベントをバインドする var $ = layui.jquery, active = {
	メニューチャット: 関数(){
		/*インスタントメッセージを送信*/
	 var mineId = $(this).parent().data('id');
	 var moldId = $(this).parent().data('mold');
		コンソールにログ出力します。
	 layim.chat({
			タイプ: moldId == 1 ? "友達" : "グループ",
	 	名前: 'シャオ・フアン'、
			アバター: '友達アバター、実際のアプリケーションの動的バインディング'、
			ID: 鉱山ID、
			ステータス: 「友達の現在のオフラインステータス」
		});
 },
 メニュー履歴: 関数(){
 	/*メッセージレコード*/
		var mineId = $(this).parent().data('id');
	 var moldId = $(this).parent().data('mold');
		コンソールにログ出力します。
 }
};
$('body').on('click', '.layui-layer-tips li', function(e){
 var type = $(this).data('type');
 active[type] ? active[type].call(this) : '';
	// 右クリックのポップアップをすべてクリアします emptyTips();
});

4. その他の右クリックメニューコード拡張

4.1、グループの右クリックメニュー:

/* グループの右クリックイベントをバインド */
$('body').on('mousedown', '.layim-list-friend li h5', function(e){
	// 右クリックのポップアップボックスをすべてクリアします emptyTips();
 if(3 != e.which) {
 	戻る;
 }
	// イベントのディスパッチを停止します e.stopPropagation();
	
	var othis = $(this);
 othis.hasClass('layim-null') の場合、戻り値:
 
 var グループ ID = othis.data('グループ ID');
	var uid = Date.now().toString(36);
	var space_icon = '&nbsp;&nbsp;';
	var space_text = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
	
	var html = [
  			'<ul id="contextmenu_'+uid+'" data-id="'+groupId+'" data-index="'+groupId +'">',
  			'<li data-type="menuReset"><i class="layui-icon" >&#xe669;</i>'+space_icon+'友達リストを更新</li>',
  			// '<li data-type="menuOnline"><i class="layui-icon">&#x1005;</i>'+space_icon+'オンラインの友達を表示</li>',
  			'<li data-type="menuInsert">'+space_text+'グループを追加</li>',
  			'<li data-type="menuRename">'+space_text+'名前の変更</li>',
  			'<li data-type="menuRemove" data-mold="1">'+space_text+'グループを削除</li></ul>',
  		]。参加する（''）;
	
 レイヤー.ヒント(html, othis, {
 	ヒント: 1
 	、時間: 0
 	、シフト: 5
 	、修正: 真
 	、スキン: 'ayui-box layui-layim-contextmenu'
 	、成功: function(layero){
 	 var liCount = (html.split('</li>')).length;
	  	var stopmp = function (e) { stope(e); };
	  	レイヤーo.off('mousedowm',stopmp).on('mousedowm',stopmp);
	  	var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu');
	  	// ポップアップ ボックスの位置を移動します。 var top = layerobj.css('top').toLowerCase().replace('px','');
			var left = layerobj.css('left').toLowerCase().replace('px','');
			先頭 = getTipTop(2, 先頭, liCount);
			左 = 30 + parseInt(左);
			レイヤーオブジェクトに、レイヤーの横幅を 150 ピクセルに設定します。
			$('.layui-layim-contextmenu li').css({'padding-left':'18px'});
 	}
 });
});

4.2. 友達リストの空白領域での右クリックメニュー:

/* 右クリックイベントをフレンドリストの空白領域にバインドします */
$('body').on('mousedown', '.layim-list-friend', function(e){
	// 右クリックのポップアップボックスをすべてクリアします emptyTips();
 if(3 != e.which) {
 	戻る;
 }
	// イベントのディスパッチを停止します e.stopPropagation();

	var othis = $(this);
 othis.hasClass('layim-null') の場合、戻り値:
  
	var uid = Date.now().toString(36);
	var space_icon = '&nbsp;&nbsp;';
	var space_text = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
	var html = [
  			'<ul id="contextmenu_'+uid+'">',
  			'<li data-type="menuReset"><i class="layui-icon" >&#xe669;</i>'+space_icon+'友達リストを更新</li>',
  			'<li data-type="menuInsert">'+space_text+'グループを追加</li></ul>',
  		]。参加する（''）;
  
 レイヤー.ヒント(html, othis, {
 	ヒント: 1
 	、時間: 0
 	、シフト: 5
 	、修正: 真
 	、スキン: 'ayui-box layui-layim-contextmenu'
 	、成功: function(layero){
 	 var liCount = (html.split('</li>')).length;
	  	var stopmp = function (e) { stope(e); };
	  	レイヤーo.off('mousedowm',stopmp).on('mousedowm',stopmp);
	  	var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu');
	  	var top = e.pageY;
	  	var left = e.pageX;
	  	var 画面の幅 = window.screen.width;
	  	// エンティティの状況に応じて位置を調整する if(screenWidth-left > 150){
	  		左 = 左 - 30;
	  	}それ以外の場合(画面幅左 < 110){
	  		左 = 左 - 180;
	  	}それ以外{
	  		左 = 左 - 130;
	  	}
	  	if(トップ > 816){
				トップ = トップ - 140;
	  	}それ以外{
				トップ = トップ - 60;
	  	}
			レイヤーオブジェクトに、レイヤーの横幅を 150 ピクセルに設定します。
			$('.layui-layim-contextmenu li').css({'padding-left':'18px'});
 	}
 });
});

ここに画像の説明を挿入

4.3. グループの右クリックメニュー:

/* グループチャットの右クリックイベントをバインド*/
$('body').on('mousedown', '.layim-list-group li', function(e){
	// 右クリックのポップアップボックスをすべてクリアします emptyTips();
 if(3 != e.which) {
 	戻る;
 }
	// イベントのディスパッチを停止します e.stopPropagation();
	
	var othis = $(this);
 othis.hasClass('layim-null') の場合、戻り値:
  
	// 選択したスタイルをすべて削除します $('.layim-list-group li').removeAttr("style","");
 // 選択済みとしてマーク othis.css({'background-color':'rgba(0,0,0,.05)'});
	
	var mineId = $(this).data('mineid');
	var uid = Date.now().toString(36);
	var space_icon = '&nbsp;&nbsp;';
	var space_text = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
	var html = [
			'<ul id="contextmenu_'+uid+'" data-id="'+mineId+'" data-index="'+mineId+'" data-mold="2">',
			'<li data-type="menuChat"><i class="layui-icon" >&#xe611;</i>'+space_icon+'グループメッセージを送信</li>',
			'<li data-type="menuProfile"><i class="layui-icon">&#xe60a;</i>'+space_icon+'グループ情報を表示</li>',
			'<li data-type="menuHistory"><i class="layui-icon" >&#xe60e;</i>'+space_icon+'メッセージ履歴</li>',
			'<li data-type="menuUpdate">'+space_text+'グループアイコンの変更</li>',
			'<li data-type="menuRemove" data-mold="2">'+space_text+'グループを解散する</li>',
			'<li data-type="menuSecede">'+space_text+'グループを退出</li></ul>',
		]。参加する（''）;
レイヤー.ヒント(html, othis, {
 	ヒント: 1
 	、時間: 0
 	、シフト: 5
 	、修正: 真
 	、スキン: 'ayui-box layui-layim-contextmenu'
 	、成功: function(layero){
 	 var liCount = (html.split('</li>')).length;
 	var stopmp = function (e) { stope(e); };
 	レイヤーo.off('mousedowm',stopmp).on('mousedowm',stopmp);
 	var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu');
 	// ポップアップ ボックスの位置を移動します。 var top = layerobj.css('top').toLowerCase().replace('px','');
		var left = layerobj.css('left').toLowerCase().replace('px','');
		先頭 = getTipTop(1, 先頭, liCount);
		左 = 30 + parseInt(左);
		レイヤーオブジェクトに、レイヤーの横幅を 150 ピクセルに設定します。
		$('.layui-layim-contextmenu li').css({'padding-left':'18px'});
 	}
});

4.4. グループリストの空白領域での右クリックメニュー:

/* グループチャットの空白領域に右クリックイベントをバインドする */
$('body').on('mousedown', '.layim-list-groups', function(e){
	// 右クリックのポップアップボックスをすべてクリアします emptyTips();
 if(3 != e.which) {
 	戻る;
 }
	// イベントのディスパッチを停止します e.stopPropagation();

	var othis = $(this);
 othis.hasClass('layim-null') の場合、戻り値:
 
	var uid = Date.now().toString(36);
	var space_icon = '&nbsp;&nbsp;';
	var space_text = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
	var html = [
  			'<ul id="contextmenu_'+uid+'">',
  			'<li data-type="menuResetGroup"><i class="layui-icon" >&#xe669;</i>'+space_icon+'グループチャットリストを更新</li>',
  			'<li data-type="menuInsertGroup">'+space_text+'グループチャットを作成</li></ul>',
  		]。参加する（''）;
  
	レイヤー.ヒント(html, othis, {
		ヒント: 1
		、時間: 0
		、シフト: 5
		、修正: 真
		、スキン: 'ayui-box layui-layim-contextmenu'
		、成功: function(layero){
		 var liCount = (html.split('</li>')).length;
			var stopmp = function (e) { stope(e); };
			レイヤーo.off('mousedowm',stopmp).on('mousedowm',stopmp);
			var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu');
			var top = e.pageY;
			var left = e.pageX;
			var 画面の幅 = window.screen.width;
			if(画面幅左 > 150){
				左 = 左 - 30;
			}それ以外の場合(画面幅左 < 110){
				左 = 左 - 180;
			}それ以外{
				左 = 左 - 130;
			}
			if(トップ > 816){
				トップ = トップ - 140;
			}それ以外{
				トップ = トップ - 60;
			}
			レイヤーオブジェクトに、レイヤーの横幅を 150 ピクセルに設定します。
			$('.layui-layim-contextmenu li').css({'padding-left':'18px'});
		}
	});
});

ここに画像の説明を挿入

V. 結論

興味からインスタント メッセージングにかなり興味を持ち、layim と連絡を取り始めました。最初は、関数を作成するたびにさまざまな小さな問題に遭遇しました。私の場合、問題が時間内に解決されなければ、その夜は眠れませんでした。情報を探し続けてソース コードを読むことしかできませんでしたが、最終的には甘い果実を収穫することができました。機能を実装するにあたり、ネットの専門家のブログ記事を参考にさせていただきましたので、同じようなものを見つけたら、ぜひ若い世代に思い出させてください！
私のレベルが限られているため、記事やコード内に不適切な表現がありましたら、遠慮なくご指摘ください。

これで、JavaScript での layim の右クリック メニュー統合のサンプル コードに関するこの記事は終了です。layim の右クリック メニュー統合の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • 配列内のオブジェクトの属性値が存在するかどうかを確認する JS 実装例
  • JavaScript 正規表現と文字列検索メソッド
  • JS で実装された一般的な検索、並べ替え、重複排除アルゴリズムの例
  • JSバイナリ検索アルゴリズムの詳細な説明
  • 友達やグループを見つけるためのJavaScriptのLayim

<<:  Nginx シグナル制御

>>:  CentOS 6.5 に MySQL 5.6 をインストールするチュートリアル

推薦する

MySQLをインストールした後、ログイン時にルートアカウントプロンプトが表示されます。mysql ERROR 1045 (28000): アクセスが拒否されました。解決策

MySQL をインストールした後、初めてmysql -uroot -pを実行したときに、root パ...

HTMLで境界線を設定する3つの方法の詳細な説明

HTML で境界線を設定する 3 つの方法 境界線の幅: 1px 2px 2px; 境界線のスタイル...

HTMLタグと基本要素の学習のまとめ

1. HTML の要素とタグ<br />要素は、1 つのタグまたは 1 組のタグによって...

よく使用される Linux コマンドの完全なリスト (推奨コレクション)

目次1. システム情報2. シャットダウン（システムのシャットダウン、再起動、ログアウト） 3. フ...

React における setState の同期または非同期の問題の理解

目次1. setState は同期的ですか?非同期ですか? 2. 非同期的に動作する1. React...

JavaScript で二分探索木を実装する

JavaScriptでの検索二分木実装は参考までに。具体的な内容は以下のとおりです。バイナリ検索木 ...

Baidu サイト検索が https をサポートしていない問題の解決策 (テスト済み)

最近、携帯電話で https が有効になりました。緑色のロックを取得するには、次の問題を解決する必要...

Docker Compose を使用して ELK を迅速にデプロイする (テスト済みで効果的)

目次1. 概要1.1 定義1.2 機能説明2. ELKを展開する2.1 ディレクトリとファイルを作成...

Docker を使用して Nginx+Flask+Mongo アプリケーションをデプロイする

サーバーにはNginx、データベースサポートにはMongo、Python言語のWebフレームワークに...

MySQL の InnoDB ストレージ ファイルの詳細な説明

物理的に言えば、InnoDB テーブルは、共有テーブルスペース ファイル (ibdata1)、排他テ...

Linux システムで Code Cloud にプロジェクトをアップロードする方法

Code Cloudで新しいプロジェクトtest1を作成します。 公開鍵を取得するには次のコマンドを...

JavaScript キャンバス テキスト クロック

この記事では、テキストクロックを実装するためのキャンバスの具体的なコードを例として紹介します。具体的...

Vueはタブ切り替えを実装します

この記事では、タブ切り替えを実装するためのVueの具体的なコードを例として紹介します。具体的な内容は...

Reactプロジェクトの新規作成からデプロイまでの実装例

新しいプロジェクトを始めるこの記事では主に、新規プロジェクトを0から1まで取り組むプロセスを記録し、...

MySQL にテーブルデータを挿入するときに中国語の文字化けが発生する問題を解決する方法

1. 問題開発中に、他のデータベースから MySQL データベース テーブルにデータを挿入すると、次...