Derzeit haben die Verantwortlichen von Layui die Struktur und den Stil der Seite zur Suche nach Layim-Freunden nicht bereitgestellt. Ich persönlich bin sehr neugierig, deshalb habe ich selbst ein Set erstellt und lade es jetzt hoch, um es mit allen zu teilen. Da ich kein Frontend-Entwickler bin, sind mir einige Aspekte nicht umfassend genug. Bitte gebt mir einen Rat! Präsentieren Sie zur Beruhigung zunächst das Effektbild Layim Freunde finden, Gruppen finden, Freunde hinzufügen, Gruppen beitreten:
1. Verbindliche Benutzer-Mitgliederliste/** HTML-Code*/ <textarea title="Benutzervorlage" id="LAY_Friend" style="display:none;"> {{# layui.each(d.data, Funktion(Index, Element){ }} <div Klasse="layui-col-sm4 layui-col-md4 layui-col-lg2"> <div Klasse="layui-Karte" > <div Klasse="Avatar"> <img class="layadmin-homepage-pad-img" src="{{ item.avatar }}" /> </div> <div Klasse="Einheiten"> <p>{{ item.Benutzername }}({{ item.Benutzercode }})</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;"> <strong>+</strong> Freunde </button> {{# } anders { }} <span class="c_red">Bereits Freunde</span> {{# } }} </p> </div> </div> </div> {{# }); }} </textarea> /** js-Code */ $.ajax({ Typ: "get", URL: "../json/friend.json", asynchron: wahr, Daten: Daten, Erfolg: Funktion (Daten) { var json = Daten; var Liste = json.data; wenn(Liste != null){ // Daten in HTML-Format konvertiert var html = laytpl(LAY_Friend.value).render({ Daten: Liste }); Steuerung.html(html); }anders{ control.append('<div style="color:#ccc; margin:150px 350px;">Es wurden keine Benutzer gefunden, die den Suchkriterien entsprechen</div>'); } } }); 2. Freunde hinzufügen /** * Freunde hinzufügen */ $(document).on('klicken', '.addFriend', function() { var meinBut = $(dies); var userId = meinBut.attr("userId"); // Öffne die Schnittstelle zur Bestätigung des Hinzufügens von Freunden layim.add({ Typ: "Freund" ,Benutzername: Benutzer.Benutzername ,Avatar: Benutzer.Avatar ,submit: Funktion(Gruppe, Bemerkung, Index){ layer.msg('Freundschaftsanfrage wurde gesendet, bitte warten Sie auf die Bestätigung der anderen Partei', { icon: 1 }); // Schaltfläche „Ändern“ myBut.parent().html('<span class="c_red">Bewerbung wurde übermittelt</span>'); // Fügen Sie hier Ihren Push-Informationscode ein} }); }); 3. Push-InformationenVerwenden Sie Socket Push, um eine befreundete Anwendung hinzuzufügen // Eine Nachricht pushen var msg = { Typ: "addMsgbox", // Wird beiläufig definiert, wird verwendet, um Nachrichtentypen auf der Serverseite zu unterscheiden sendType: 1, // Wird beiläufig definiert, wird verwendet, um Nachrichtentypen auf der Serverseite zu unterscheiden fromId: loginUserId, // Bewerber toId: user.id, // Freundes-ID groupId: group, // Gruppe comment: comment // Überprüfungsinformationen } websocket.send(JSON.stringify({ Typ: 'chatMsgbox' // Einfach definieren, wird verwendet, um Nachrichtentypen auf der Serverseite zu unterscheiden, Daten: msg })); 4. Vermutlich magst duhttps://www.jb51.net/article/23188.htm Dies ist das Ende dieses Artikels über die Suche nach Freunden und Gruppen mit Layim in JavaScript. Weitere relevante Inhalte zu der Suche nach Freunden und Gruppen mit Layim finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder lesen Sie weiter in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: Spezifische Verwendung von Nginx Keepalive
>>: Detaillierte Erläuterung der MySQL Master-Slave-Replikationspraxis - GTID-basierte Replikation
Moderne Browser erlauben nicht mehr, JavaScript i...
Inhaltsverzeichnis Fall 1: Fall 2: Fall 3: Um es ...
Einführung in NFS NFS (Network File System) ist e...
Ich habe das System vor einiger Zeit neu installi...
Tastaturzeichen Englisch ` Rückwärtszitat ~ Tilde...
Vorwort: Wenn wir Dezimalzahlen speichern müssen ...
Voraussetzung: content="width=750" <...
Als ich kürzlich das Linux-Betriebssystem zum Aus...
Vorwort Unabhängig davon, ob es sich um Oracle od...
Docker unterstützt die Ausführung auf den folgend...
Was tun, wenn Sie Ihr Linux/Mac MySQL-Passwort ve...
Inhaltsverzeichnis Vorwort Warum Unit-Tests einfü...
Inhaltsverzeichnis Vorwort Aufzählbare Eigenschaf...
Inhaltsverzeichnis Vorwort Verwenden Sie keine Ze...
Welche Vorteile bietet das Erlernen von HTML? 1: ...