Node.js + Express + Socket realisiert einen Online-Chatroom für mehrere Personen in Echtzeit
|
In diesem Artikel wird der spezifische Code von Node.js + Express + Socket zur Realisierung eines Online-Chatrooms für mehrere Personen in Echtzeit zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Die Dateistruktur ist wie folgt:
Frontend-Teil:Anmeldeseite Anmeldeteil: anmelden.html
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0, Maximalmaßstab=1.0, Benutzerskalierung=nein">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Anmelden</title>
<link rel="stylesheet" href="css/login.css" >
</Kopf>
<Text>
<div Klasse="Login-Box Flex-Box">
<!--Titelleiste für die Anmeldung-->
<h2 class="sign-title box-width">ANMELDEN</h2>
<!--Avatarleiste-->
<div Klasse="Bildkarussell">
<div Klasse="Pfeil linker Pfeil">
<div Klasse="vor-Pfeil"></div>
</div>
<img class="p1 img-setting" src="./img/1.jpg" alt="1.jpg">
<img class="p2 img-setting" src="./img/2.jpg" alt="2.jpg">
<img class="p3 img-setting" src="./img/3.jpg" alt="3.jpg">
<img class="p2 img-setting" src="./img/4.jpg" alt="4.jpg">
<img class="p1 img-setting" src="./img/5.jpg" alt="5.jpg">
<div Klasse="Pfeil nach rechts">
<div Klasse="nach-Pfeil"></div>
</div>
</div>
<!--Spalte „Benutzername“-->
<div Klasse="Name-Box Box-Breite">
<input type="text" class="user-name box-width" placeholder="Bitte geben Sie Ihren Namen ein">
</div>
<!--Bestätigungsspalte-->
<div Klasse="Schaltflächen-Box-Boxbreite">
<input type="button" class="login-button box-width" value="Im Chatroom anmelden">
</div>
<!--Spalte mit Fehlermeldung-->
<div Klasse="Fehlerbox Boxbreite">
<span class="error-message">Willkommen im Chatroom!</span>
</div>
</div>
</body>
<script src="js/login.js"></script>
</html>login.css
* {
Polsterung: 0;
Rand: 0;
Schriftfamilie: „Microsoft Yahei“;
}
html,
Körper {
Breite: 100 %;
Höhe: 100%;
Schriftfamilie: „Microsoft Yahei“;
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
}
Körper {
Hintergrund: linearer Farbverlauf (-135 Grad, Nr. 51D15B, Nr. 42A855);
Hintergrund: -moz-linear-gradient(-135 Grad, #51D15B, #42A855);
Hintergrund: -webkit-linear-gradient(-135 Grad, #51D15B, #42A855);
Hintergrund: -o-linear-gradient(-135 Grad, #51D15B, #42A855);
}
.flex-box {
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
}
.box-Breite {
Breite: 80%;
}
/*Äußerste Schicht*/
.login-box {
Breite: 20 %;
Mindestbreite: 304px;
maximale Breite: 404px;
Höhe: 50%;
Mindesthöhe: 368px;
maximale Höhe: 468px;
Flex-Richtung: Spalte;
Kastenschatten: 1px 1px 15px #7B8C99;
Hintergrund: #fff;
}
/*LOGIN-Titel*/
.sign-title {
Farbe: #42A855;
Rand: 2px durchgezogen #42A855;
Rand oben: transparent;
Rand links: transparent;
Rand rechts: transparent;
}
/*Bildwechsel*/
.Bildkarussell {
Position: relativ;
Anzeige: Flex;
Marge: 10 %;
}
/*Bildwechselpfeil*/
.Pfeil {
Z-Index: 3;
Position: absolut;
Schriftgröße: 60px;
Höhe: 100%;
Breite: 30%;
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
Farbe: #ffffff;
}
.Pfeil:schweben {
Cursor: Zeiger;
}
.Linkspfeil {
links: 0;
}
.vor-Pfeil {
Breite: 0px;
Höhe: 0px;
Rahmenbreite: 30px;
Rahmenstil: durchgezogen;
Rahmenfarbe: transparent #51D15B transparent transparent;
}
.Rechtspfeil {
rechts: 0;
}
.nach-Pfeil{
Breite: 0px;
Höhe: 0px;
Rahmenbreite: 30px;
Rahmenstil: durchgezogen;
Rahmenfarbe: transparent transparent transparent #51D15B;
}
.Bildkarussell img {
Breite: 80px;
Höhe: 80px;
Übergang: alle 0,2 s linear;
-moz-transition: alle 0,2 s Auslaufen;
-webkit-transition: alle 0,2 s Auslaufzeit;
-o-Übergang: alle 0,2 s Auslaufen;
}
.img-Einstellung {
Rand: 0px -15px;
}
.p1 {
transformieren: Skalierung (0,6);
Z-Index: 1;
}
.p1:hover {
transformieren: Skalierung (0,8);
}
.p2 {
transformieren: Skalierung (0,8);
Z-Index: 2;
}
.p2:hover {
transformieren: Skalierung(1);
}
.p3 {
transformieren: Skalierung(1);
Z-Index: 3;
}
.p3:hover {
transformieren: Skalierung (1,2);
}
/*Benutzername*/
.name-box {
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Rand: 1px durchgezogen #51D15B;
}
.name-box .benutzername {
Breite: 100 %;
Textausrichtung: zentriert;
Polsterung: 10px;
Umrissfarbe: #42A855;
Rand: keiner;
Schriftgröße: 16px;
}
/* Anmeldeschaltfläche */
.button-box{
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Rand: 10px 0 20px;
}
.button-box .login-button{
Breite: 100 %;
Polsterung: 10px 20px;
Umriss: keiner;
Rand: keiner;
Hintergrund: #42A855;
Farbe: weiß;
Schriftgröße: 16px;
}
/* Fehlermeldung*/
.Fehlerbox{
Farbe: #42A855;
Rand: 2px durchgezogen #42A855;
Rand oben: transparent;
Rahmen links: transparent;
Rand rechts: transparent;
}
.error-box span{
Sichtbarkeit: versteckt;
Farbe: #d43f3a;
Schriftgröße: 14px;
}login.js
// Wird zum Speichern der Reihenfolge der Bilder verwendet var imgArray = ['1','2','3','4','5'];
// Pfeil abrufen var leftArrow = document.getElementsByClassName('left-arrow')[0];
var rightArrow = document.getElementsByClassName('Rechtspfeil')[0];
// Benutzernamen abrufen var userName = document.getElementsByClassName('user-name')[0];
// Anmelde-Button abrufen var loginButton = document.getElementsByClassName('login-button')[0];
// Fehlermeldungsleiste abrufen var errorMessage = document.getElementsByClassName('error-message')[0];
// Listener-Ereignis für linken Pfeil hinzufügen leftArrow.addEventListener('click',function(){
imgArray.unshift(imgArray[imgArray.length - 1]); // Füge ein Element am Anfang des Arrays hinzu //
imgArray.pop(); // Löschen und das letzte Element des Arrays zurückgeben carouselImg(); // Bilder wechseln });
// Listener-Ereignis für Rechtspfeil hinzufügen rightArrow.addEventListener('click',function(){
imgArray.push(imgArray[0]); // Setze das erste Element ans Ende imgArray.shift(); // Lösche und gib das erste Element des Arrays zurück carouselImg(); // Bilder wechseln });
// Bilder wechseln Funktion carouselImg(){
für(var Anzahl = 0; Anzahl < imgArray.Länge; Anzahl++){
document.getElementsByTagName('img')[Anzahl].src = './img/' + imgArray[Anzahl] + '.jpg';
document.getElementsByTagName('img')[Anzahl].alt=imgArray[Anzahl] + '.jpg';
}
}
// Listener-Ereignis für Anmeldeschaltfläche hinzufügen loginButton.addEventListener('click',function(){
wenn(Benutzername.Wert === ''){
errorMessage.innerHTML = „Bitte geben Sie Ihren Namen ein“;
errorMessage.style.visibility = "sichtbar";
}sonst wenn(Benutzername.Wert.Länge > 8){
errorMessage.innerHTML = „Ihr Name darf nicht mehr als 8 Wörter enthalten“;
errorMessage.style.visibility = "sichtbar";
}anders{
window.location.href=encodeURI('index.html?selectpicture=' + document.getElementsByClassName('p3')[0].alt +
'&Benutzername=' + Benutzername.Wert);
}
});
// Geben Sie die Tastenkombination für das Login-Ereignis ein. document.onkeydown = function (event) {
var e = Ereignis || Fenster.Ereignis;
wenn(e && e.keyCode === 13){
loginButton.click();
}
};Hauptseite
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8" />
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<title>Chatraum</title>
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1">
<link rel="stylesheet" href="./css/index.css" />
</Kopf>
<Text>
<div Klasse="Chatbox">
<!-- Chatbox-Überschrift-->
<div Klasse="Chat-Header">
<div Klasse="Schaltflächenfeld">
<input type="button" class="log-out" value="ABMELDEN" />
</div>
</div>
<!-- Chatbox-Text-->
<div Klasse="Chat-Body">
<!-- Linke Seite des Chatfensters -->
<div Klasse="Chat-Body-Links">
<!-- Chat-Inhalt auf der linken Seite des Chat-Fensters-->
<div Klasse="Chat-Inhalt"></div>
<!-- Chat-Eingabefeld auf der linken Seite des Chat-Fensters-->
<div Klasse="Chat-Bearbeiten">
<input type="text" class="edit-box" placeholder="Bitte geben Sie Ihre Nachricht ein" maxlength="15"/>
<input type="button" class="edit-button" value="SENDEN" />
</div>
</div>
<!-- Rechte Seite des Chatfensters -->
<div Klasse="Chat-Body-Rechts">
<!-- Zählen Sie die Anzahl der Personen auf der rechten Seite des Chatfensters-->
<div class="online-count">Online:0</div>
<!-- Benutzername auf der rechten Seite des Chatfensters -->
<div class="user-name">Benutzername</div>
<!-- Avatar auf der rechten Seite des Chatfensters-->
<img Klasse="Benutzer-img" />
</div>
</div>
</div>
</body>
</html>
<script src="./js/socket.io.js"></script>
<script src="./js/index.js"></script>index.css
*{
Rand: 0;
Polsterung: 0;
Schriftfamilie: „Microsoft Yahei“
}
html,Text{
Breite: 100 %;
Höhe: 100%;
}
/* Hintergrundfarbe */
Körper{
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
Hintergrund: linearer Farbverlauf (-135 Grad, Nr. 51D15B, Nr. 42A855);
Hintergrund: -moz-linear-gradient(-135deg,#51D15B,#42A855);
Hintergrund: -webkit-linear-gradient(-135 Grad,#51D15B,#42A855);
Hintergrund: -o-linear-gradient(-135deg,#51D15B,#42A855);
}
/* Äußerste Schicht */
.chat-box{
Breite: 50%;
maximale Breite: 720px;
Mindestbreite: 400px;
Höhe: 80%;
Mindesthöhe: 530px;
maximale Höhe: 530px;
Anzeige: Flex;
Flex-Richtung: Spalte;
Hintergrund: #fff;
Kastenschatten: 1px 1px 15px #333;
}
/* Kopfzeile */
.chat-header{
Rand: 5px;
Kastenschatten: 1px 1px 15px #7B8C99;
}
.button-box{
Anzeige: Flex;
Inhalt ausrichten: Flex-Ende;
}
.Abmelden{
Höhe: 100%;
Schriftgröße: 14px;
Schriftstärke: fett;
Polsterung: 5px 15px;
Farbe: #79C2EA;
Hintergrund: #fff;
Gliederung: keine;
Rand: keiner;
Rahmenradius: 15px;
Cursor: Zeiger;
}
/* Körper */
.chat-body{
Höhe: 90%;
Anzeige: Flex;
Flex-Richtung: Reihe;
Inhalt ausrichten: Abstand herum;
Elemente ausrichten: zentrieren;
Rand: 5px;
Polsterung: 5px;
}
/* Linke Körperseite */
.chat-body-left{
Höhe: 100%;
Breite: 70%;
Anzeige: Flex;
Flex-Richtung: Spalte;
Inhalt ausrichten: Abstand herum;
Rand: 5px;
}
/* Inhalt links */
.chat-inhalt{
Kastenschatten: 1px 1px 15px #7B8C99;
Höhe: 100%;
Rand unten: 5px;
Überlauf: scrollen;
}
/*Chatblase*/
.meine-Nachrichtenbox {
Anzeige: Flex;
Inhalt ausrichten: Flex-Ende;
Inhalt ausrichten: zentriert;
Rand: 5px;
}
.andere-message-box {
Anzeige: Flex;
Inhalt ausrichten: Flex-Start;
Inhalt ausrichten: zentriert;
Rand: 5px;
}
.Nachrichteninhalt {
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Inhalt ausrichten: zentriert;
Hintergrundfarbe: #51D15B;
Polsterung: 5px 10px;
Rahmenradius: 15px;
Farbe: #fff;
}
.anderer-Nachrichteninhalt{
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Inhalt ausrichten: zentriert;
Hintergrundfarbe: #79C2EA;
Polsterung: 5px 10px;
Rahmenradius: 15px;
Farbe: #fff;
}
.message-content span{
Polsterung: 20px 0px;
}
.Benutzer-Chat-Img {
Breite: 50px;
Höhe: 50px;
}
.anderer-message-content span{
Polsterung: 20px 0px;
}
.Nachrichtenpfeil{
Breite: 0;
Höhe: 0;
Rahmenbreite: 8px;
Rahmenstil: durchgezogen;
Rahmenfarbe: transparent transparent transparent #51D15B;
selbst ausrichten: zentrieren;
}
.anderer-message-arrow{
Breite: 0;
Höhe: 0;
Rahmenbreite: 8px;
Rahmenstil: durchgezogen;
Rahmenfarbe: transparent #79C2EA transparent transparent;
selbst ausrichten: zentrieren;
}
.Benutzerinformationen{
Anzeige: Flex;
Flex-Richtung: Spalte;
Inhalt ausrichten: Flex-Ende;
}
.andere-Benutzerinformationen{
Anzeige: Flex;
Flex-Richtung: Spalte;
Inhalt ausrichten: Flex-Ende;
}
.Benutzer-Chat-Name{
Farbe: #333;
Schriftgröße: 16px;
Textausrichtung: zentriert;
}
/* Chat-Eingabefeld*/
.chat-bearbeiten{
Rand oben: 5px;
Anzeige: Flex;
Inhalt ausrichten: Abstand dazwischen;
Elemente ausrichten: zentrieren;
Kastenschatten: 1px 1px 15px #7B8C99;
Überlauf: versteckt;
}
/* Eingabebereich für Chat-Eingabefeld*/
.edit-box{
Breite: 80%;
Höhe: 100%;
Rand: 5px;
Rand: keiner;
Gliederung: keine;
}
/* Schaltfläche für das Chat-Eingabefeld*/
.Bearbeiten-Schaltfläche{
Höhe: 100%;
Polsterung: 5px 15px;
Hintergrund: #fff;
Farbe: #79C2EA;
Gliederung: keine;
Rand: keiner;
Rahmenradius: 15px;
Cursor: Zeiger;
Schriftgröße: 14px;
Schriftstärke: fett;
}
/* Rechte Körperseite */
.chat-body-rechts
Höhe: 100%;
Breite: 30%;
Anzeige: Flex;
Flex-Richtung: Spalte;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
Rand: 5px;
Kastenschatten: 1px 1px 15px #7B8C99;
}
.Benutzername{
Rand: 15px;
Schriftgröße: 18px;
Schriftstärke: fett;
Farbe: #79C2EA;
}
.Benutzer-Img{
Breite: 100px;
Höhe: 100px;
Rand: 5px;
}
.online-Anzahl{
Schriftgröße: 18px;
Schriftstärke: fett;
Farbe: #79C2EA;
}
/* Kompatibel mit kleinen Bildschirmen */
@media screen und (max-width:420px) {
.chat-box{
Breite: 50%;
maximale Breite: 720px;
Mindestbreite: 300px;
Höhe: 80%;
Mindesthöhe: 530px;
maximale Höhe: 530px;
}
.chat-body-left{
Höhe: 100%;
Breite: 100 %;
Anzeige: Flex;
Flex-Richtung: Spalte;
Inhalt ausrichten: Abstand herum;
Rand: 5px;
}
.chat-body-rechts
Anzeige: keine;
}
}index.js
// Inhalt der URL abrufen var url = decodeURI(location.href).split('?')[1].split('&'); //..Das erste Element des Arrays ist der Bildpfad und das zweite Element der Benutzername console.log(url);
// Chat-Inhaltsfeld abrufen var chatContent = document.getElementsByClassName('chat-content')[0];
// Chat-Eingabefeld abrufen var editBox = document.getElementsByClassName('edit-box')[0];
// Holen Sie sich die Schaltfläche „Senden“ im Chat-Eingabefeld var editButton = document.getElementsByClassName('edit-button')[0];
// Holen Sie sich die Spalte mit dem Benutzernamen var userName = document.getElementsByClassName('user-name')[0];
// Spalte „Anzahl der Online-Personen abrufen“ var onlineCount = document.getElementsByClassName('online-count')[0];
// Der Name der Login-Seite steht rechts userName.innerHTML = url[1].split('=')[1];
var userImg = document.getElementsByClassName('user-img')[0];
// Platziere den Avatar der Anmeldeseite rechts userImg.src = `./img/${url[0].split('=')[1]}`;
var logOut = document.getElementsByClassName('abmelden')[0];
// Schaltfläche zum Binden des Klickereignisses senden editButton.addEventListener('click',sendMessage);
// Abmelden-Schaltfläche bindet Klickereignis logOut.addEventListener('click',closePage);
// Eingabetaste binden und Ereignisse senden document.onkeydown = function(event){
var e = Ereignis || Fenster.Ereignis;
wenn(e && e.keyCode === 13){
wenn(editBox.value !== ''){
editButton.klick();
}
}
};
//Schließe die Seite Funktion closePage(){
var userAgent = navigator.userAgent;
console.log(`userAgent=${userAgent}`);
if(userAgent.indexOf('Firefox') != -1 || userAgent.indexOf("Chrome") != -1){ //..wenn es Firefox oder Google ist window.location.href = "about:blank";
}anders{
Fensteröffner = null;
Fenster öffnen("","_self");
fenster.schließen();
}
}
// Socket-Teil var socket = io();
// Eine Chat-Blase generieren, wenn eine Nachricht empfangen wird und diese nicht lokal ist socket.on('message',function(information){
console.log('Empfangene Nachricht',Information);
if(information.name !== userName.textContent){ // Nicht lokal createOtherMessage(information); // Eine Chat-Blase generieren}
});
// Wenn sich jemand mit dem Socket verbindet, socket.on('connected', function(onlinecount) {
console.log(`Jemand ist angemeldet, die Anzahl der Personen online beträgt: ${onlinecount}`);
onlineCount.innerHTML = 'Online:' + onlinecount;
});
// Beim Empfang einer Verbindungsunterbrechung, socket.on('disconnected', function(onlinecount){
console.log(`Jemand hat die Verbindung getrennt: Aktuelle Anzahl der Personen: ${onlinecount}`);
onlineCount.innerHTML = 'Online:' + onlinecount;
});
//Sende die lokale Nachricht Funktion sendMessage(){
if(editBox.value != ''){ //..wenn der gesendete Inhalt nicht leer ist var myInformation = {
Name: Benutzername.Textinhalt,
Chatinhalt: editBox.value,
img: BenutzerBild.src
};
socket.emit('Nachricht',meineInformation);
createMyMessage(); // Eine native Chat-Blase erstellen editBox.value = ''; //..Textfeld löschen}
}
//Erstelle eine Chat-Blase-Funktion createMyMessage(){
var meineMessageBox = document.createElement('div');
myMessageBox.className = "meine-Nachrichtenbox";
var Nachrichteninhalt = document.createElement('div');
messageContent.className = 'Nachrichteninhalt';
var text = document.createElement('span');
text.innerHTML = editBox.Wert;
messageContent.appendChild(text);
meineMessageBox.appendChild(messageContent);
var Pfeil = document.createElement('div');
Pfeil.Klassenname = "Nachrichtenpfeil";
meineMessageBox.appendChild(Pfeil);
var Benutzerinformation = document.createElement('div');
userInformation.className = 'Benutzerinformationen';
var userChatImg = document.createElement('img');
userChatImg.className = "Benutzer-Chat-Img";
userChatImg.src = userImg.src;
var userChatName = document.createElement('div');
userChatName.className = 'Benutzer-Chat-Name';
userChatName.innerHTML= BenutzerName.textinhalt;
Benutzerinformation.appendChild(BenutzerChatBild);
Benutzerinformation.appendChild(Benutzer-Chatname);
meineMessageBox.appendChild(Benutzerinformation);
chatContent.appendChild(meineMessageBox);
chatContent.scrollTop = chatContent.scrollHeight; // Zum neuesten Chat-Inhalt scrollen}
// Chatblasen für andere Benutzer generieren function createOtherMessage(information) {
var andereMessageBox = document.createElement('div');
otherMessageBox.className = "andere-Nachrichtenbox";
var andereBenutzerinformation = document.createElement('div');
otherUserInformation.className = 'andere Benutzerinformationen';
var userChatImg = document.createElement('img');
userChatImg.className = "Benutzer-Chat-Img";
userChatImg.src = information.img;
var userChatName = document.createElement('span');
userChatName.className = 'Benutzer-Chat-Name';
userChatName.innerHTML = information.name;
andereBenutzerinformation.appendChild(userChatImg);
andereBenutzerinformation.appendChild(Benutzer-Chatname);
otherMessageBox.appendChild(andereBenutzerinformation);
var otherMessageArrow = document.createElement('div');
otherMessageArrow.className = "anderer-Nachrichtenpfeil";
otherMessageBox.appendChild(andererMessageArrow);
var andererMessageContent = document.createElement('div');
otherMessageContent.className = "anderer Nachrichteninhalt";
var text = document.createElement('span');
text.innerHTML = information.chatinhalt;
andererNachrichteninhalt.appendChild(text);
andereMessageBox.appendChild(andererMessageContent);
chatContent.appendChild(andereMessageBox);
chatContent.scrollTop = chatContent.scrollHeight;
}server.js
// Import muss mehrdeutig sein var express = require('express');
var app = express();
var http = erfordern('http').Server(App);
var io = erfordern('socket.io')(http);
var Pfad = erforderlich('Pfad');
// Online-Zahlenstatistik var onlineCount = 0;
app.use(express.static(__dirname));
// Pfadzuordnung app.get('/login.html',function(request,response){
Antwort.sendFile('login.html');
});
// Wenn ein Benutzer eine Verbindung herstellt, io.on('connection',function(socket){
console.log('ein Benutzer hat sich verbunden');
//Sende die Anzahl der Online-Benutzer an den Client io.emit('connected',++onlineCount);
// Wenn ein Benutzer die Verbindung trennt socket.on('disconnect',function(){
console.log('Benutzer getrennt');
//An die Anzahl der Clients senden io.emit('disconnected',--onlineCount);
console.log(onlineAnzahl);
});
// Nachricht vom Client empfangen socket.on('message',function(message){
//Senden Sie eine Nachricht an die Client-Konsole.log('Die vom Server empfangene Nachricht lautet:',message);
io.emit('Nachricht',Nachricht);
});
});
var server = http.listen(4000,function(){
console.log('Server läuft');
}); endlich Terminal-Eingang Knotenserver.js Geben Sie die Adressleiste des Browsers ein http://localhost:4000/login.html
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Grafisches Tutorial zur Installation und Konfiguration der MySQL 8.0.16 Win10-Zip-Version
>>: Implementierung eines Docker-Cross-Host-Netzwerks (Overlay)
Artikel empfehlen
Beispielcode für die Verwendung von CSS zum Abdunkeln der Schriftfarbe des ausgewählten Bereichs beim Scrollen
Wenn Sie den Datumswähler kapseln, müssen Sie die...
Detaillierte Erklärung der binären und varbinären Datentypen in MySQL
Vorwort BINARY und VARBINARY ähneln in gewisser W...
Grafisches Tutorial zur Installation und Konfiguration von MySQL Server 5.7.20
Dieser Artikel zeichnet die Installations- und Ko...
Bootstrap 3.0-Lernunterlagen für Anfänger
Als ersten Artikel dieser Studiennotiz beginnen w...
JavaScript zum Erzielen eines Digitaluhreffekts
In diesem Artikelbeispiel wird der spezifische Ja...
MySQL-Primärschlüssel-Benennungsstrategie im Zusammenhang
Als ich kürzlich die Details der Datenlebenszyklu...
So verwenden Sie React zur Implementierung einer Bilderkennungs-App
Lassen Sie mich Ihnen zuerst das Effektbild zeige...
Problem der Inkonsistenz der MySQL-Multiplikations- und Divisionsgenauigkeit (vier Dezimalstellen nach der Division)
Frage Als ich heute eine Projektfunktion schrieb,...
Implementierung der Multisite-Konfiguration von Nginx auf Mac M1
Hinweis: nginx über brew installiert Stammverzeic...
Detaillierte Erläuterung von MySQL-Unterabfragen (verschachtelte Abfragen), Verknüpfungstabellen und kombinierten Abfragen
1. Unterabfrage MySQL 4.1 und höher unterstützen ...
Interaktive Erlebnistrends, die 2015-2016 zum Mainstream werden
Der wichtigste Artikel zum interaktiven Design im...
Einfaches Anwendungsbeispiel für MySQL-Trigger
Dieser Artikel veranschaulicht anhand von Beispie...
Lösung für den Fehler 1045, wenn Navicat eine Verbindung zu MySQL herstellt
Beim Herstellen einer Verbindung mit der lokalen ...
Detaillierter Installationsprozess des NodeJS-Verwaltungstools NVM
keine Ahnung nvm ist für die Verwaltung mehrerer ...
Eine kurze Diskussion über die Rolle von Vue3 defineComponent
Inhaltsverzeichnis defineComponent-Überladungsfun...