友達やグループを見つけるためのJavaScriptのLayim

友達やグループを見つけるためのJavaScriptのLayim

現在、layuiの関係者はlayim友達検索ページの構造とスタイルを提供していません。私は個人的に非常に興味があるので、自分でセットを作り、それをアップロードしてみんなと共有します。私はフロントエンド開発者ではないので、いくつかの側面は十分に網羅されていません。アドバイスをお願いします。

まずは落ち着くための効果画像を提示します

ここに画像の説明を挿入

Layim は友達を探す、グループを探す、友達を追加する、グループに参加する:

ソースコードを添付し、ポイントをダウンロードする

1. ユーザーメンバーリストのバインド

/** HTML コード*/
<textarea title="ユーザーテンプレート" id="LAY_Friend" style="display:none;">
	{{# layui.each(d.data, function(index, item){ }}
		<div class="layui-col-sm4 layui-col-md4 layui-col-lg2">
	 <div class="layui-card">
	 	<div class="アバター">
	 		<img class="layadmin-homepage-pad-img" src="{{ item.avatar }}" />
	 	</div>
	 	<div class="units">
		 	<p>{{ item.userName }}({{ item.userCode }})</p>
		 	<p>{{ item.roleNames }}</p>
		 	<p>
			 	{{# if(item.isValid == 0){ }}
			 		<button userId="{{ item.userId }}" class="addFriend layui-btn layui-btn-xs" style="background-color:#7ADDD4;">&nbsp;&nbsp;<strong>+</strong>&nbsp;&nbsp;友達&nbsp;&nbsp;</button>
			 	{{# } それ以外 { }}
			 		<span class="c_red">すでに友達です</span>
			 	{{# }}
		 	</p>
	 	</div>
	 </div>
 	</div>
 	{{# }); }}
</テキストエリア>

/** js コード */
$.ajax({
 タイプ: "get",
 URL: "../json/friend.json",
 非同期: true、
 データ: データ、
 成功: 関数 (データ) {
 	var json = データ;
 	var list = json.data;
 	if(リスト != null){
 		// データは HTML 形式に変換されます var html = laytpl(LAY_Friend.value).render({
			 データ: リスト
			});
			コントロール.html(html);
 	}それ以外{
 		control.append('<div style="color:#ccc; margin:150px 350px;">検索条件に一致するユーザーは見つかりませんでした</div>');
 	}
 }
});

2. 友達を追加する

ここに画像の説明を挿入

/**
 * 友達を追加 */
$(document).on('click', '.addFriend', function() {
	var myBut = $(this);
	var userId = myBut.attr("userId");
	// 友達追加検証インターフェースをポップアップ表示 layim.add({
		タイプ: '友達'
 、ユーザー名: user.username
 、アバター: user.avatar
 ,submit: 関数(グループ, コメント, インデックス){
			layer.msg('友達リクエストが送信されました。相手からの確認をお待ちください', { icon: 1 });
			// ボタンを変更します。myBut.parent().html('<span class="c_red">アプリケーションが送信されました</span>');
		 	// ここにプッシュ情報コードを挿入します} 
 });
});

3. プッシュ情報

ソケットプッシュを使用して友達アプリケーションを追加する

// メッセージをプッシュする var msg = {
		type: "addMsgbox", // 適当に定義、サーバー側でメッセージの種類を区別するために使用される sendType: 1, // 適当に定義、サーバー側でメッセージの種類を区別するために使用される fromId: loginUserId, // 申請者 toId: user.id, // 友人 ID groupId: group, // グループ remark: remark // 検証情報 }
websocket.send(JSON.stringify({
 	type: 'chatMsgbox' // 定義するだけです。サーバー側でメッセージの種類を区別するために使用されます。data: msg
 }));

4. 好きなのは

https://www.jb51.net/article/23188.htm

これで、layim が JavaScript で友達やグループを見つける方法に関するこの記事は終わりです。layim が友達やグループを見つける方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

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

<<:  nginx keepaliveの具体的な使い方

>>:  MySQL マスタースレーブレプリケーションの実践の詳細説明 - GTID ベースのレプリケーション

推薦する

MySQL でパーティション分割後にクエリを実装するために MRG_MyISAM (MERGE) を使用する例

大量のデータベース データを最適化することは非常に高度な科学であり、開発者が習得する必要がある専門的...

ウェブページレイアウトデザインのシンプルな原則

この記事では、Web ページ レイアウト デザインのいくつかの簡単な原則をまとめ、Web ページ デ...

MySQL 5.7.25 のインストールと設定方法のグラフィックチュートリアル

MySQL インストール ファイルには、msi 形式と zip 形式の 2 種類があります。クリック...

CocosCreator 入門チュートリアル: TS で初めてのゲームを作る

目次前提TypeScript と JavaScriptコードエディタの選択TypeScriptを学ぶ...

JavaScript フロー制御 (分岐)

目次1. プロセス制御2. シーケンシャルプロセス制御3. 分岐フロー制御if文1. 支店構造2. ...

Vue3 のウォッチの使用方法とベストプラクティスガイド

目次序文🌟 1. APIの紹介2. 複数のデータソースの監視3. リスニングアレイ4. 監視対象5....

Nginxホットデプロイメントの実装

目次セマフォNginx ホットデプロイメント上記のブログ投稿に従ってください。ファイアウォールをオフ...

CentOS 7にMySQLをインストールする詳細な手順

CentOS7では、MySQLをインストールすると、MariaDBもデフォルトでインストールされます...

Nginx がフロントエンド リソースへのクロスドメイン アクセスの問題をどのように解決するかの詳細な説明

フロントエンドのクロスドメイン問題に2日間近く悩まされましたが、ようやくngnxを使って解決したので...

入力タイプとは何を意味し、入力を制限する方法

入力を制限する一般的な方法1. ボタンが押されたときに点線のボックスを消すには、入力に属性値hide...

Vue の大容量ファイルアップロードとブレークポイント再開アップロードの実装

目次ファイルアップロードのための2つのソリューションファイルストリーム(フォームデータ)に基づくクラ...

MySQL マスタースレーブ同期、トランザクションロールバックの実装原理

ビンログBinLog は、データベース テーブル構造の変更 (テーブルの作成、変更など) とテーブル...

Nginx を使用して DoNetCore を Alibaba Cloud にデプロイする方法

基本的な環境設定まずはご自身でドメイン名とサーバーを購入してくださいクラウドサーバーECSに基づいて...

Linux システムでの virtuoso データベースの詳細なインストールと使用

最近、リンク データについていくつか調査していて、rdf データベースを使用する必要があったため、v...

MySQLプリコンパイル機能の詳細な説明

この記事では、MySQLのプリコンパイル機能について紹介します。具体的な内容は以下のとおりです。 1...