Startseite>ASP-Quellcode>Andere Kategorien
Herunterladen

Projekteinführung

Alibaba Baixiu, ein Content-Management-System, ist in zwei Kernfunktionen unterteilt: Content-Management und Content-Anzeige.

1. Funktionsmodul

1.1 Inhaltsverwaltung

Modul Funktion
Benutzer Anmelden, Abmelden, Hinzufügen, Löschen, Ändern und Abfragen von Benutzern
Artikel Artikelverwaltung
Einstufung Klassifizierungsmanagement
Kommentar Kommentarverwaltung
Website-Einstellungen Schlüsselwörter, Beschreibung, Website-Logo, Karussellbild

1.2 Inhaltsanzeige

Modul Funktion
Titelseite Navigation, Artikeldatenanzeige
Listenseite Zeigen Sie eine Liste der Artikel nach Kategorie an
Detailseite Artikeldetails anzeigen und Kommentarfunktion implementieren

2. Entwicklungsmodus

2.1 Gemischtes Entwicklungsmodell aus Front-End und Back-End

Der gesamte HTML-Code und die Daten werden auf der Serverseite zusammengefügt und der gesamte Inhalt wird auf einmal an den Client gesendet. Der Browser führt den Code aus und präsentiert den Inhalt dem Benutzer.

02

Frage:

  1. Front-End- und Back-End-Entwickler sind mit dem Code des anderen nicht vertraut. Bei der gemischten Entwicklung ist es sehr schwierig, mit dem Code des anderen umzugehen.
  2. Während des Entwicklungsprozesses überlappen sich die Codes zwangsläufig, was den Arbeitsaufwand verdoppelt.

2.2 Front-End- und Back-End-Trennungsentwicklungsmodell

03

Vorteile: klare Verantwortlichkeiten und Arbeitsteilung, eigenständige Entwicklung, keine gegenseitige Beeinflussung.

3. Projektstruktur

Systemschichtung Nutzen Sie Technologie
Datenschicht mongoDB
Serviceschicht node.js (Express)
Kunde Art-Template, jQuery, Font-Awesome, Swipe

4. Einrichten der Projektbetriebsumgebung (Dinge, die Sie wissen müssen, um das Projekt auszuführen)

  1. Installieren Sie die Software node.js und testen Sie, ob die Installation erfolgreich war
    1. Win + R öffnet das laufende Programm im Windows-System, geben Sie Powershell in das laufende Programm ein und drücken Sie die Eingabetaste, um das Befehlszeilenprogramm zu öffnen
    2. Geben Sie den Befehl node -v ein, um die Version von node.js zu überprüfen. Wenn die Versionsnummer im Befehlszeilenprogramm ausgegeben wird und kein Fehler gemeldet wird, ist die Installation erfolgreich.
  2. Installieren Sie die Software mongodb und mongodb-compass
  3. Kopieren Sie den Alibaba Baixiu-Projektordner auf die Festplatte (serverseitiges Programm).
  4. Gehen Sie im Befehlszeilentool zum Stammverzeichnis des Projekts
    1. Halten Sie die Umschalttaste gedrückt, klicken Sie mit der rechten Maustaste und wählen Sie „PowerShell-Fenster hier öffnen“.
  5. Verwenden Sie den Befehl npm install um die für das Projekt erforderlichen Abhängigkeitsdateien zu installieren
  6. Öffnen Sie die Datei app.js und ändern Sie den Datenbankverbindungsabschnitt in Zeile 47: „mongodb://itcast:itcast@localhost:27017/alibaixiu“.

​ für 'mongodb://localhost:27017/alibaixiu'

(1) Grund: Sie haben das Mongodb-Datenbankverbindungskonto und die Passwortinformationen nicht erstellt. Wir haben uns für die Standardmethode für die Anmeldung bei der Mongodb-Datenbank entschieden.

​ (2) Wenn Sie sich mit Ihrem Konto und Passwort bei der Datenbank anmelden möchten. Bitte beachten Sie: https://www.cnblogs.com/b02330224/p/10049395.html

Geben Sie die Befehle nacheinander in die Befehlszeile ein: use alibaixiu #Enter alibaixiu Database

db.createUser({user:'itcast',pwd:'itcast',roles:['readWrite']}) #Datenbankbenutzer erstellen

​ Wenn Sie die Meldung erhalten, dass die Berechtigungen nicht ausreichen, lesen Sie bitte den obigen Link und melden Sie sich zunächst mit dem Mongodb-Administratorkonto bei der Datenbank an.

7. (Neuer Schritt) Vor kurzem wurden die Datenbankdaten db_data hochgeladen und die Alibaixiu-Datenbank kann über die Mongodb-Compass-Software eingegeben werden.

Erstellen Sie users , comment , slides , categories , posts settings mit demselben Namen wie die JSON-Daten im Ordner db_data

​ (Sammlung) und importieren Sie schließlich nacheinander die entsprechenden JSON-Daten in jede Sammlung.

Importdaten

8. Geben Sie node app.js in das Befehlszeilentool ein, um das Projekt zu starten

5. Dinge, die Sie nach der Ausführung des Projekts beachten sollten (Dinge, die Sie wissen müssen, um好看的项目auszuführen)

1. Öffnen Sie den Browser und geben Sie localhost:3000/admin/login.html in die Adressleiste des Browsers ein, um die Anmeldeseite aufzurufen.

Geben Sie den Standardbenutzernamen des Systems ein: (ursprünglich) [email protected] (jetzt) ​​[email protected] Passwort: 123456 Rufen Sie die Administratorseite auf

2. Da die Datenbankdatei nicht hochgeladen wird, müssen alle Daten manuell hinzugefügt werden (wenn die JSON-Daten in db_data eingeführt werden, überspringen Sie die Schritte 2–10).

3. Rufen Sie die Administratorseite auf und ändern Sie zunächst Ihre Kontoinformationen (Passwort ändern usw.) und laden Sie den Benutzer-Avatar hoch.

4. Fügen Sie dann Artikelinformationen, Systemeinstellungsinformationen und Karussellbildinformationen hinzu (die Bestellung ist nicht erforderlich, das Hinzufügen bedeutet, die Formularinformationen auszufüllen, Bilddateien auszuwählen usw.)

5. Beachten Sie, dass beim Ändern der Klassifizierungsinformationen das Symbol der Klassifizierungsinformationen nach Schriftarten durchsucht werden muss, z. B.: Fa-Telefon, Fa-Geschenk usw.

Das in Font-awesome gesuchte Bildklassennamenformat ist: fa fa-xxx-xxx, Sie müssen nur den Teil fa-xxx-xxx danach hinzufügen.

6. Nachdem Sie die grundlegenden Datenbankinformationen hinzugefügt haben, können Sie sich abmelden und einen neuen Benutzer registrieren (der registrierte Benutzer ist standardmäßig ein normaler Benutzer).

Oder nutzen Sie die Rechte des Administrators zum Hinzufügen von Benutzern, um normale Benutzer hinzuzufügen.

7. Nachdem die Hintergrunddaten hinzugefügt wurden, verwenden Sie ein normales Benutzerkonto, um die Front-End-Artikelanzeigeseite aufzurufen (wenn Sie möchten, dass der Seiteninhalt umfangreicher ist).

Es wird empfohlen, etwa 15 Artikelinformationen und etwa 4 Kategorieinformationen hinzuzufügen.)

8. Wenn Sie das Administratorkonto zum Betreten der Website verwenden möchten, melden Sie sich nicht vom Administratorkonto ab. Öffnen Sie einen neuen Tab in Ihrem Browser

Geben Sie „localhost:3000“ in die Adressleiste ein, um zur Startseite des Artikels zu gelangen

9. Wenn der Administrator die Kommentarfunktion aktiviert, wird die Kommentarfunktion auf der Detailseite des Titelartikels angezeigt. Wenn der Administrator die Kommentarfunktion deaktiviert, wird die Kommentarfunktion auf der Detailseite des Titelartikels angezeigt.

Die Seite bietet keine Kommentarfunktion

10. Wenn der Administrator die Kommentarüberprüfungsfunktion aktiviert, werden die Kommentare des Benutzers nicht sofort auf der Seite angezeigt und der Administrator muss im Hintergrund arbeiten

Kommentare werden auf der Verwaltungsseite überprüft und erst nach ihrer Genehmigung auf der Artikelseite angezeigt. Wenn der Administrator die Kommentarfunktion deaktiviert, wird die

Es wird auf der Artikeldetailseite angezeigt.

11. Wenn das Projekt immer noch nicht ausgeführt werden kann, kontaktieren Sie mich bitte unter 1565066165

6. Projektadresse

Startseite: http://luoxu.ltd:3000/ (während der Domainnamenregistrierung vorübergehend in http://luoxucoder.icu geändert)

Anmeldeseite: http://luoxu.ltd:3000/admin/login.html (ähnlich)

Anzeige der Projekteffekte

1. Front-End-Artikelanzeigeseite

Index

2. Front-End-Artikelklassifizierungsseite

Kategorie

3. Front-End-Artikeldetailseite

Post

4. Anmeldeseite

Login

5. Registrierungsseite

registrieren

6.Backend-Verwaltungsseite

Administrator

Projektfunktion

1. Benutzerfunktionen

1.1 Anmelden

  1. Klickereignis für Anmeldeschaltfläche hinzufügen
  2. Rufen Sie den Benutzernamen und das Passwort ab, die der Benutzer in das Textfeld eingegeben hat
  3. Überprüfen Sie, ob der Benutzer den Benutzernamen und das Passwort eingegeben hat. Wenn nicht, verhindern Sie, dass das Programm abwärts ausgeführt wird, und fordern Sie den Benutzer auf, den Benutzernamen und das Passwort einzugeben.
  4. Rufen Sie die Schnittstelle auf, die die Anmeldefunktion implementiert. Wenn die Anmeldung erfolgreich ist, wird zur Startseite der Datenverwaltung gesprungen. Wenn die Anmeldung fehlschlägt, wird angezeigt, dass der Benutzername oder das Kennwort falsch ist.

1.2 Abfangen der Anmeldung

  1. Verwenden Sie das Skript-Tag, um die vom Server bereitgestellte Schnittstellenadresse zu laden
  2. Bestimmen Sie den Wert der isLogin-Variablen. Wenn der Wert falsch ist, springen Sie zur Anmeldeseite.

1.3 Benutzer hinzufügen

  1. Fügen Sie jedem Formularelement, das Benutzerfunktionen hinzufügt, ein Namensattribut hinzu. Der Wert des Namensattributs muss mit dem im Schnittstellendokument erforderlichen Parameternamen übereinstimmen.
  2. Binden Sie das Submit-Ereignis an das Formular und verhindern Sie, dass das Formular standardmäßig in der Event-Handler-Funktion gesendet wird.
  3. Rufen Sie den vom Benutzer im Formular eingegebenen Inhalt in der Event-Handler-Funktion ab
  4. Rufen Sie die Benutzeroberfläche zum Hinzufügen auf und senden Sie den erhaltenen Inhalt über die Schnittstelle an den Server. Wenn der Vorgang erfolgreich ist, wird die Seite aktualisiert. Wenn der Vorgang fehlschlägt, wird eine Benutzeraufforderung angezeigt.

1.4 Benutzerliste anzeigen

  1. Senden Sie eine Ajax-Anfrage an den Server, um Benutzerlistendaten anzufordern
  2. Der zweite Schritt besteht darin, mithilfe der Template-Engine die Daten und die HTML-Vorlage zu verbinden.
  3. Der dritte Schritt besteht darin, den gespleißten Inhalt auf der Seite anzuzeigen

1.5 Benutzer-Avatar-Upload

  1. Fügen Sie der Dateiauswahlsteuerung ein Onchange-Ereignis hinzu und rufen Sie die vom Benutzer in der Ereignisverarbeitungsfunktion ausgewählte Datei ab.
  2. Erstellen Sie ein formData-Objekt, um Bilddateien hochzuladen
  3. Rufen Sie die Schnittstelle zum Hochladen von Bilddateien auf, um das Hochladen von Bildern zu implementieren
  4. Fügen Sie im Formular „Neuen Benutzer hinzufügen“ ein neues ausgeblendetes Feld hinzu und speichern Sie die Bildadresse im ausgeblendeten Feld

1.6 Anzeige der Benutzerliste

  1. Senden Sie beim Laden der Seite eine Ajax-Anfrage an den Server, um Benutzerlistendaten anzufordern
  2. Verwenden Sie eine Template-Engine, um Daten und HTML-Vorlagen zu verbinden
  3. Zeigen Sie den gespleißten Inhalt auf der Seite an

1.7 Änderung der Benutzerinformationen

  1. Fügen Sie Ereignisse für Klicks auf die Schaltfläche „Bearbeiten“ durch Ereignisdelegierung hinzu
  2. Rufen Sie den ID-Wert des aktuell angeklickten Benutzers in der Ereignisverarbeitungsfunktion ab
  3. Rufen Sie die detaillierten Informationen des Benutzers basierend auf der Benutzer-ID ab und rendern Sie die detaillierten Informationen des Benutzers über die Vorlagen-Engine in das Formular auf der linken Seite
  4. Fügen Sie ein Klickereignis für die Schaltfläche „Ändern“ hinzu, rufen Sie den vom Benutzer in das Formular eingegebenen Inhalt in der Ereignisverarbeitungsfunktion ab und rufen Sie die Schnittstelle zum Ändern von Benutzerinformationen auf, um die Funktion zum Ändern von Benutzerinformationen zu implementieren.

1.8 Benutzer löschen

  1. Klickereignis für Schaltfläche „Löschen“ hinzufügen
  2. Bestätigen Sie, ob der Benutzer den Vorgang löschen möchte
  3. Rufen Sie die ID des aktuell angeklickten Benutzers ab
  4. Rufen Sie die Benutzeroberfläche zum Löschen auf, um den Benutzer basierend auf der ID zu löschen. Wenn der Löschvorgang erfolgreich ist, aktualisieren Sie die aktuelle Seite, damit auf der Seite der neueste Inhalt angezeigt wird.

1.9 Benutzer stapelweise löschen

  1. Verwalten Sie den aktivierten Status von Kontrollkästchen
    1. Wenn die Schaltfläche „Alle auswählen“ ausgewählt ist, werden alle Benutzer ausgewählt; wenn die Schaltfläche „Alle auswählen“ deaktiviert ist, werden alle Benutzer deaktiviert.
    2. Wenn der Status der Kontrollkästchenschaltfläche vor dem Benutzer geändert wird, prüfen Sie, ob sich ein Benutzer in einem nicht ausgewählten Status befindet. Wenn dies der Fall ist, heben Sie den ausgewählten Status der Schaltfläche „Alle auswählen“ auf. Wenn nicht, bedeutet dies, dass sich alle Benutzer in einem befinden Ausgewählter Status Zu diesem Zeitpunkt ist die Schaltfläche „Alle auswählen“ auf den ausgewählten Status festgelegt
  2. Verwalten Sie den Status der Schaltflächen zum Massenlöschen
    1. Wenn die Schaltfläche „Alle auswählen“ ausgewählt ist, wird die Schaltfläche „Batch löschen“ angezeigt. Wenn die Schaltfläche „Alle auswählen“ deaktiviert ist, wird die Schaltfläche „Batch löschen“ ausgeblendet.
    2. Wenn sich der Status der Kontrollkästchenschaltfläche vor dem Benutzer ändert, überprüfen Sie den ausgewählten Status aller Benutzer. Wenn ein Benutzer ausgewählt ist, wird die Schaltfläche zum Stapellöschen angezeigt. Wenn nicht alle Benutzer ausgewählt sind, blenden Sie die Schaltfläche zum Stapellöschen aus.
  3. Implementieren Sie die Funktion zum Massenlöschen von Benutzern
    1. Fügen Sie der Schaltfläche zum Stapellöschen ein Klickereignis hinzu. Speichern Sie in der Funktion zur Verarbeitung von Klickereignissen alle ausgewählten Benutzer-IDs in einem Array.
    2. Rufen Sie die Löschbenutzeroberfläche auf, um die Benutzerlöschfunktion zu implementieren

1.10 Passwort ändern

  1. Fügen Sie jedem Formularelement im Kennwortänderungsformular ein Namensattribut hinzu. Der Wert des Namensattributs muss mit dem Parameternamen in der Schnittstelle übereinstimmen.
  2. Fügen Sie dem Kennwortänderungsformular ein Formularübermittlungsereignis hinzu und verhindern Sie in der Ereignishandlerfunktion das Standardübermittlungsverhalten des Formulars
  3. Rufen Sie den vom Benutzer im Formular eingegebenen Inhalt ab
  4. Rufen Sie die Passwortänderungsschnittstelle auf, um die Passwortänderungsfunktion zu implementieren. Wenn das Passwort erfolgreich geändert wurde, springen Sie zur Anmeldeseite und ermöglichen Sie dem Benutzer, sich erneut anzumelden.

1.11 Angemeldete Benutzerinformationen anzeigen

  1. Rufen Sie entsprechend dem Wert der userId-Variablen die Informationen des aktuell angemeldeten Benutzers vom Server ab.
  2. Benutzerinformationen auf der linken Seite der Seite anzeigen

2. Klassifizierungsfunktion

2.1 Kategorie hinzufügen

  1. Fügen Sie jedem Formularelement im Formular ein Namensattribut hinzu. Der Wert des Namensattributs muss mit dem im Schnittstellendokument erforderlichen Parameternamen übereinstimmen.
  2. Fügen Sie dem Formular ein Formularübermittlungsereignis hinzu und verhindern Sie in der Ereignishandlerfunktion das Standardverhalten der Formularübermittlung
  3. Rufen Sie den vom Benutzer im Formular eingegebenen Inhalt ab
  4. Rufen Sie die Schnittstelle zum Hinzufügen von Kategorien auf, um die Funktion zum Hinzufügen von Kategorien zu implementieren

2.2 Anzeige klassifizierter Daten

  1. Senden Sie eine Ajax-Anfrage an den Server, um Kategorieseitendaten anzufordern
  2. Verwenden Sie eine Vorlagen-Engine, um die vom Server zurückgegebenen Daten mit der HTML-Vorlage zu verbinden
  3. Zeigen Sie den gespleißten Inhalt auf der Seite an

2.3 Änderung klassifizierter Daten

  1. Fügen Sie durch Ereignisdelegierung ein Klickereignis zur Bearbeitungsschaltfläche hinzu und rufen Sie die zu ändernde Klassifizierungsdaten-ID in der Ereignisverarbeitungsfunktion ab.
  2. Rufen Sie die Schnittstelle entsprechend der ID auf, um detaillierte Informationen zu den klassifizierten Daten zu erhalten
  3. Verwenden Sie die Vorlagen-Engine, um klassifizierte Daten und HTML-Zeichen zu verbinden. Nach Abschluss der Verbindung wird der Inhalt auf der Seite gerendert.
  4. Fügen Sie der Schaltfläche „Ändern“ ein Klickereignis hinzu und rufen Sie den vom Administrator im Formular eingegebenen Inhalt in der Ereignishandlerfunktion ab
  5. Rufen Sie die Schnittstelle für Änderungsklassifizierungsdaten auf, um die Funktion zur Änderung von Klassifizierungsdaten zu implementieren.

2.4 Löschung vertraulicher Daten

  1. Fügen Sie durch Ereignisdelegierung ein Klickereignis zur Schaltfläche „Löschen“ hinzu, und das Löschbestätigungsfeld wird im Klickereignishandler angezeigt.
  2. Nachdem der Benutzer den Löschvorgang bestätigt hat, erhalten Sie die ID der zu löschenden klassifizierten Daten.
  3. Rufen Sie die Schnittstelle zum Löschen von Kategoriedaten auf, um die Funktion zum Löschen von Kategoriedaten zu implementieren. Wenn die Kategorie erfolgreich gelöscht wurde, aktualisieren Sie die Seite.

3. Artikelfunktion

3.1 Artikel hinzufügen

  1. Erhalten Sie Artikelklassifizierungsdaten und zeigen Sie die Daten in der Dropdown-Liste der Kategorie an, die der Administrator auswählen kann
  2. Laden Sie das Titelbild des Artikels hoch und speichern Sie die hochgeladene Bildadresse in einem ausgeblendeten Feld
  3. Fügen Sie jedem Formularelement im Formular „Artikel hinzufügen“ ein Namensattribut hinzu. Der Wert des Namensattributs muss mit dem in der Schnittstelle erforderlichen Parameternamen übereinstimmen
  4. Binden Sie das Formularübermittlungsereignis an das Formular zum Hinzufügen von Artikeln und verhindern Sie, dass das Formular standardmäßig in der Ereignishandlerfunktion übermittelt wird.
  5. Rufen Sie den vom Administrator im Formular eingegebenen Inhalt ab
  6. Senden Sie eine Anfrage zum Hinzufügen eines Artikels an den Server, um die Funktion zum Hinzufügen von Artikeln zu implementieren. Nachdem der Artikel erfolgreich hinzugefügt wurde, wird zur Artikellistenseite gesprungen.

3.2 Anzeige der Artikellistendaten

  1. Wenn die Seite angezeigt wird, senden Sie eine Anfrage an den Server für Artikellistendaten.
  2. Verwenden Sie die Vorlagen-Engine, um die Artikellistendaten und den HTML-Code zu verbinden. Nach Abschluss der Verbindung wird der Inhalt auf der Seite angezeigt.
  3. Implementieren Sie die Paging-Funktion für Listendaten basierend auf Paging-Daten

3.3 Filterung der Artikeldatenliste

  1. Senden Sie eine Anfrage an den Server, um Artikelklassifizierungsdaten anzufordern und die Daten in der Dropdown-Liste der Kategorie anzuzeigen, zu der sie gehören.
  2. Fügen Sie der Filterschaltfläche ein Klickereignis hinzu und rufen Sie den vom Benutzer in der Ereignishandlerfunktion ausgewählten Inhalt ab
  3. Senden Sie eine Anfrage an den Server, um die vom Administrator angeforderten Artikellistendaten anzufordern und die Daten auf der Seite anzuzeigen

3.4 Artikelbearbeitung

  1. Fügen Sie einen Link zur Bearbeitungsschaltfläche hinzu und übergeben Sie die Artikel-ID als Abfrageparameter des Links zur Artikelbearbeitungsseite
  2. Rufen Sie den ID-Parameter in der Adressleiste auf der Artikelbearbeitungsseite ab
  3. Erhalten Sie Artikeldetails basierend auf der ID und zeigen Sie die Artikelinformationen im Artikelbearbeitungsformular an
  4. Binden Sie das Formularübermittlungsereignis, um das Artikelformular zu ändern, und verhindern Sie, dass das Formular standardmäßig in der Ereignishandlerfunktion übermittelt wird.
  5. Rufen Sie den vom Benutzer im Formular eingegebenen Inhalt ab
  6. Senden Sie eine Anfrage an den Server, um die Funktion zum Ändern der Artikelinformationen zu implementieren. Wenn die Artikelinformationen erfolgreich geändert wurden, springen Sie zur Artikellistenseite.

3.5 Artikellöschung

  1. Fügen Sie durch Ereignisdelegierung ein Klickereignis zur Löschschaltfläche hinzu, öffnen Sie in der Ereignisverarbeitungsfunktion ein Löschbestätigungsfeld und bestätigen Sie den Löschvorgang mit dem Administrator
  2. Rufen Sie die ID des zu löschenden Artikels in der Event-Handler-Funktion ab
  3. Senden Sie eine Ajax-Anfrage, um den Löschvorgang durchzuführen. Der Löschvorgang ist erfolgreich und die Seite wird aktualisiert.

3.6 Beliebte Artikelempfehlungen

  1. Senden Sie eine Anfrage an den Server für beliebte Empfehlungsdaten

  2. Verwenden Sie eine Vorlagen-Engine, um Daten und HTML-Vorlagen zu verbinden und den verbundenen Inhalt auf der Seite anzuzeigen 

     var str = '<div>{{name}}</div>' ;
var obj = { name : '张三' }
var html = template . render ( str , obj ) ;

3.7 Artikelsuche

  1. Binden Sie das Formularsendeereignis an das Suchformular
  2. Verhindern Sie das standardmäßige Übermittlungsverhalten des Formulars im Ereignishandler und rufen Sie die vom Benutzer eingegebenen Suchbegriffe ab
  3. Springen Sie zur Suchergebnisseite und übergeben Sie die vom Benutzer eingegebenen Suchbegriffe an die Suchergebnisseite
  4. Auf der Suchergebnisseite werden die vom Benutzer eingegebenen Schlüsselwörter aus den Abfrageparametern in der Adressleiste ermittelt.
  5. Die Suchoberfläche wird entsprechend den vom Benutzer eingegebenen Suchschlüsselwörtern aufgerufen. Wenn der Server die Daten zurückgibt, werden die Suchergebnisdaten und die HTML-Vorlage gespleißt und der gespleißte Inhalt schließlich auf der Seite angezeigt.

4.Kommentarfunktion

4.1 Anzeige der Kommentarliste

  1. Senden Sie eine Anfrage an den Server, um die Kommentarlistendaten abzurufen
  2. Verwenden Sie eine Vorlagen-Engine, um die Kommentarlistendaten und die HTML-Vorlage zu verbinden und den Inhalt nach Abschluss der Verbindung auf der Seite anzuzeigen.
  3. Implementieren Sie eine Paging-Funktion basierend auf Paging-Daten

4.2 Kommentarmoderation

  1. Ändern Sie den Text in der Moderationsschaltfläche basierend auf dem Status des aktuellen Kommentars. Wenn der aktuelle Kommentar nicht überprüft wird, wird auf der Schaltfläche „Genehmigung“ angezeigt. Wenn der aktuelle Kommentar überprüft wird, wird auf der Schaltfläche „Verwerfen“ angezeigt.
  2. Fügen Sie durch Ereignisdelegierung ein Klickereignis zur Überprüfungsschaltfläche hinzu und rufen Sie den Status des aktuellen Kommentars in der Ereignisverarbeitungsfunktion ab
  3. Senden Sie eine Anfrage an den Server und teilen Sie ihm mit, in welchen Status der Kommentar geändert werden soll. Wenn die Änderung erfolgreich ist, aktualisieren Sie die Seite, damit die neuesten Daten auf der Seite angezeigt werden.

4.3 Kommentarlöschung

  1. Fügen Sie durch Ereignisdelegierung ein Klickereignis zur Schaltfläche „Löschen“ hinzu und öffnen Sie das Löschbestätigungsfeld in der Ereignisverarbeitungsfunktion
  2. Rufen Sie den ID-Wert des Kommentars ab, den der Administrator löschen möchte
  3. Senden Sie eine Anfrage an den Server, um den Kommentar zu löschen. Wenn der Kommentar erfolgreich gelöscht wurde, aktualisieren Sie die Seite.

5.Karussell-Diagrammfunktion

5.1 Bildkarusselldaten hinzufügen

  1. Implementieren Sie die Bild-Upload-Funktion und speichern Sie die hochgeladene Bildadresse in einem versteckten Feld
  2. Fügen Sie jedem Formularelement im Bildkarussellformular ein Namensattribut hinzu. Der Wert des Namensattributs muss mit dem in der Schnittstelle erforderlichen Parameternamen übereinstimmen.
  3. Binden Sie das Formularübermittlungsereignis an das Bildkarussellformular und verhindern Sie, dass das Formular standardmäßig in der Ereignishandlerfunktion übermittelt wird.
  4. Rufen Sie den vom Administrator im Formular eingegebenen Inhalt ab
  5. Senden Sie eine Anfrage an den Server, um die Funktion zum Hinzufügen von Bildkarusselldaten zu implementieren. Wenn die Daten erfolgreich hinzugefügt wurden, aktualisieren Sie die Seite.

5.2 Anzeige der Karusselldiagrammdaten

  1. Senden Sie eine Anfrage an den Server für Bildkarusselllistendaten
  2. Verwenden Sie eine Vorlagen-Engine, um die Daten der Bildkarussellliste und die HTML-Vorlage zu verbinden. Nach Abschluss der Verbindung wird der Inhalt auf der Seite angezeigt.

5.3 Löschen von Bildkarusselldaten

  1. Fügen Sie durch Ereignisdelegierung ein Klickereignis zur Schaltfläche „Löschen“ hinzu
  2. Öffnen Sie das Löschbestätigungsfeld in der Event-Handler-Funktion
  3. Rufen Sie die ID der zu löschenden Karussellbilddaten ab
  4. Senden Sie eine Anfrage an den Server, um den Löschvorgang durchzuführen. Der Löschvorgang ist erfolgreich und die Seite wird aktualisiert.

5.4 Karusselldiagramm-Datenanzeige (aktualisiert)

  1. Senden Sie eine Anfrage an den Server für Karusselldaten
  2. Verwenden Sie eine Vorlagen-Engine, um Daten und HTML-Strings zu verbinden und den verbundenen Inhalt auf der Seite anzuzeigen
  3. Verschieben Sie den ursprünglichen JavaScript-Code, der den Karusselleffekt implementiert, an das Ende der Erfolgsfunktion der Ajax-Methode

6. Website-Einstellungsfunktion

6.1 Website-Einstellungen

  1. Implementieren Sie das Hochladen von Website-Logobildern und speichern Sie die hochgeladene Bildadresse in einer versteckten Domain
  2. Fügen Sie jedem Formularelement im Formular ein Namensattribut hinzu. Der Wert des Namensattributs muss mit dem im Schnittstellendokument erforderlichen Parameternamen übereinstimmen.
  3. Binden Sie das Submit-Ereignis an das Formular und verhindern Sie, dass das Formular standardmäßig in der Event-Handler-Funktion gesendet wird.
  4. Rufen Sie den vom Administrator im Formular eingegebenen Inhalt ab
  5. Senden Sie eine Anfrage an den Server, um die Funktion zum Hinzufügen von Website-Einstellungsdaten zu implementieren

6.2 Website-Einstellungsdaten anzeigen

  1. Senden Sie eine Anfrage an den Server, um Website-Einstellungsdaten abzurufen
  2. Bestimmen Sie, ob die vom Server zurückgegebenen Daten wahr sind. Wenn sie wahr sind, zeigen Sie die Daten im Formular an.

7. Neueste Update-Funktion der Website

7.1 Auf der Seite werden Artikelkommentarinformationen angezeigt

1. Durchsuchen Sie die Kommentare des Artikels anhand der Artikel-ID

2. Genehmigte Kommentare werden direkt auf der Seite angezeigt

3. Die neuesten Kommentare wurden optimiert

4. Nicht genehmigte Kommentare auf der Verwaltungsseite werden rot markiert

7.2 Seitenoptimierung

1. Alle Like-Buttons implementieren die Like-Funktion

2. Der Kommentarlink implementiert die Funktion, zum Kommentarartikel zu springen

3. Alle Klassifizierungsschaltflächen implementieren die Funktion, zur Klassifizierungsseite zu springen

7.3 Registrierungsseite

1. Der Anmeldeseite wurde eine Schaltfläche zur Benutzerregistrierung hinzugefügt

2. js auf der Registrierungsseite implementiert die grundlegende Überprüfung der Front-End-Registrierungsinformationen

3. Mit Bootstrap entwickelte Seitenfunktionen

4. Alle auf der Registrierungsseite registrierten Benutzer sind normale Benutzer

5. Die Funktion implementiert, Benutzer anhand ihrer E-Mail-Adressen zu finden

Detaillierte Informationen entnehmen Sie bitte der Schnittstellendokumentation.

Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle