Layim in javascript to find friends and groups

Layim in javascript to find friends and groups

Currently, layui officials have not provided the structure and style of the layim friend search page. I am personally very curious, so I made a set myself, and now upload it to share with everyone. I am not a front-end developer, so some aspects are not comprehensive enough. Please give me some advice!

First present the effect picture to calm you down

insert image description here

Layim find friends, find groups, add friends, join groups:

Attach the source code, download the points

1. Binding user member list

/** html code*/
<textarea title="User Template" 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="avatar">
	 		<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;Friends&nbsp;&nbsp;</button>
			 	{{# } else { }}
			 		<span class="c_red">Already friends</span>
			 	{{# } }}
		 	</p>
	 	</div>
	 </div>
 	</div>
 	{{# }); }}
</textarea>

/** js code */
$.ajax({
 type: "get",
 url: "../json/friend.json",
 async: true,
 data: data,
 success: function (data) {
 	var json = data;
 	var list = json.data;
 	if(list != null){
 		// Data converted to HTML format var html = laytpl(LAY_Friend.value).render({
			 data: list
			});
			control.html(html);
 	}else{
 		control.append('<div style="color:#ccc; margin:150px 350px;">No users matching the search criteria were found</div>');
 	}
 }
});

2. Add friends

insert image description here

/**
 * Add friends */
$(document).on('click', '.addFriend', function() {
	var myBut = $(this);
	var userId = myBut.attr("userId");
	// Pop up the add friend verification interface layim.add({
		type: 'friend'
 ,username: user.username
 ,avatar: user.avatar
 ,submit: function(group, remark, index){
			layer.msg('Friend request has been sent, please wait for the other party to confirm', { icon: 1 });
			// Modify button myBut.parent().html('<span class="c_red">Application has been submitted</span>');
		 	// Insert your push information code here} 
 });
});

3. Push information

Use socket push to add friend application

// Push a message var msg = {
		type: "addMsgbox", // Defined casually, used to distinguish message types on the server side sendType: 1, // Defined casually, used to distinguish message types on the server side fromId: loginUserId, // Applicant toId: user.id, // Friend ID groupId: group, // Group remark: remark // Verification information }
websocket.send(JSON.stringify({
 	type: 'chatMsgbox' // Just define it, used to distinguish message types on the server side, data: msg
 }));

4. Guess you like

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

This is the end of this article about layim finding friends and groups in javascript. For more relevant layim finding friends and groups content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Example code of layim integrating right-click menu in JavaScript
  • JS implementation example of finding whether the attribute value of an object in an array exists
  • JavaScript regular expressions and string search methods
  • Examples of common search, sorting, and deduplication algorithms implemented in JS
  • Detailed explanation of JS binary search algorithm

<<:  Specific use of nginx keepalive

>>:  Detailed explanation of MySQL master-slave replication practice - GTID-based replication

Recommend

Deep understanding of the mechanism of CSS background-blend-mode

This article is welcome to be shared and aggregat...

Record a pitfall of MySQL update statement update

background Recently, I executed a DML statement d...

Windows system mysql5.7.18 installation graphic tutorial

MySQL installation tutorial for Windows system do...

A brief discussion on two methods to solve space-evenly compatibility issues

Since its launch in 2009, flex has been supported...

Better looking CSS custom styles (title h1 h2 h3)

Rendering Commonly used styles in Blog Garden /*T...

Several ways to solve CSS style conflicts (summary)

1. Refine the selector By using combinators, the ...

CSS implements the bottom tapbar function

Now many mobile phones have the function of switc...

How to solve the DOS window garbled problem in MySQL

The garbled code problem is as follows: The reaso...

Is it necessary to create a separate index for the MySQL partition field column?

Preface Everyone knows that the partition field m...

Vue+Websocket simply implements the chat function

This article shares the specific code of Vue+Webs...

Detailed explanation of using Vue.prototype in Vue

Table of contents 1. Basic Example 2. Set the sco...

MySQL cross-database transaction XA operation example

This article uses an example to describe the MySQ...

About the overlap of margin value and vertical margin in CSS

Margin of parallel boxes (overlap of double margi...