Detaillierte Erläuterung zur Entwicklung von JavaScript-Webseiten auf Einstiegsniveau

Teil 3: ❤Drei Möglichkeiten, den Backend-Datenempfang zu übersehen❤ (empfohlene Sammlung)

Teil 2: Spielen Sie mit dem Webformular für schnelle Webentwicklung (❤ Empfohlene Sammlung ❤)

1. Einleitung

Informieren Sie sich vorab über das Internet und lernen Sie dann dieses magische Ding kennen.

Ich stelle mir die chinesische Version vor, aber der Unterschied ist nicht groß.

Schritt 1: Erstellen Sie zunächst ein neues Projekt und folgen Sie dem Diagramm

Schritt 2: Gib ihm einen Namen und zeichne dann ein Bild

Schritt 3: Dies wird angezeigt, wenn Sie im Projekt ein neues Projekt erstellen, und es wird ein neues Fenster geöffnet.

Schritt 4: Klicken Sie auf das Symbol

Schritt 5: Stellen Sie sicher, dass die Kreise gleich sind

Schritt 6: Diese beiden Namen sind beliebig

Schritt 7: Folgen Sie den Anweisungen

Schritt 8: Klicken Sie einfach auf Fertig stellen

Schritt 9: Wie im Bild gezeigt

Schritt 10: Klicken Sie auf das kleine Dreieck links von „Hallo“, dann auf das kleine Dreieck von „Quelle“ und klicken Sie nacheinander auf alle kleinen Dreiecke, die Sie sehen, um Folgendes zu finden:

Der Name des Moduls, das Sie gerade erstellt haben. Hier habe ich Hallo erstellt

Schritt 11: Klicken Sie mit der rechten Maustaste auf „Hallo“, bewegen Sie die Maus auf das neue und es werden mehrere Pakete angezeigt. Klicken Sie mit der linken Maustaste, um das Paket abzuschließen.

Schritt 12: Die Wörter vor „Hallo“ generieren wir selbst. Wir müssen nur noch einen Controller hinzufügen.

Nachdem wir das Paket erstellt haben, müssen wir die Umgebung konfigurieren. Idea selbst unterstützt kein JSP, aber um das Prinzip zu lernen

Aus einfachem JSP können wir einige Prinzipien lernen, die wir später brauchen. Daher müssen wir JSP verwenden.

Also müssen wir eine JSP-Sprache lernen. idea selbst unterstützt diese Sprache nicht. Wenn wir also JSP verwenden möchten, müssen wir importieren

verlassen.

Schritt 13: Klicken Sie mit der rechten Maustaste auf das Hauptmenü, wie in der Abbildung gezeigt

Schritt 14: Geben Sie webapp ein und drücken Sie die Eingabetaste

Schritt 15: Befolgen Sie die in der Abbildung unten gezeigten Schritte, um den Vorgang abzuschließen

Schritt 16: Geben Sie WEB-INF in dieses Verzeichnis ein und drücken Sie die Eingabetaste

Schritt 17: Klicken Sie mit der rechten Maustaste auf die neu erstellte WEB-INF-Datei und klicken Sie auf das Symbol

Schritt 18: Ansichten eingeben und Enter drücken

Unter Ansichten gibt es keine gewünschte JSP-Datei, was bedeutet, dass wir noch keine Abhängigkeiten importiert haben. Vor dem Importieren von Abhängigkeiten

Wir müssen zunächst feststellen, wo sich das Stammverzeichnis befindet

Schritt 19: Um zu erfahren, wo sich das Stammverzeichnis befindet, klicken Sie einfach auf die Datei, wie im Bild gezeigt, und klicken Sie auf die Projektstruktur

Schritt 20: Wie im Bild gezeigt, müssen Sie nicht in Panik geraten, klicken Sie einfach entsprechend der von mir markierten Sequenznummer

Nachdem wir dies als Stammverzeichnis festgelegt haben, können wir alle JSP-Dateien dort ablegen und es aufrufen.

Schritt 21: Nach Abschluss des obigen Schritts befindet sich unter Ansichten eine JSP-Datei. Klicken Sie einfach darauf, wie in der Abbildung gezeigt

Schritt 22: Geben Sie ihm einen zufälligen Namen, ich habe es a1 genannt, und drücken Sie die Eingabetaste

Schritt 23: Der rote Kreis ist das, was ich beiläufig geschrieben habe. Es gibt keine Anforderungen an den Inhalt. Dies wird später auf der Seite angezeigt.

Schritt 24: Nachdem Sie den obigen Schritt abgeschlossen haben, doppelklicken Sie auf die rote Linie und etwas auf der rechten Seite wird angezeigt. Es spielt keine Rolle, was es ist.

Schritt 25: JSP-Abhängigkeiten importieren. Kopieren Sie einfach alle Codeausschnitte wie in der Abbildung gezeigt.

 <!-- Servlet-Abhängigkeitsmodul hinzufügen-->
        <Abhängigkeit>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
        </Abhängigkeit>
        <!-- Abhängigkeitsmodul der JSTL-Tagbibliothek hinzufügen-->
        <Abhängigkeit>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
        </Abhängigkeit>
        <!--Tomcat-Abhängigkeitsmodul hinzufügen.-->
        <Abhängigkeit>
            <groupId>org.springframework.boot</groupId>
            <artifactId>Spring-Boot-Starter-Tomcat</artifactId>
        </Abhängigkeit>
        <!-- Bei Verwendung der JSP-Engine weist der in Springboot integrierte Tomcat diese Abhängigkeit nicht auf-->
        <Abhängigkeit>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>Tomcat-Einbettung-Jasper</artifactId>
</Abhängigkeit>

Kopieren Sie den obigen Code an die unten gezeigte Position zwischen diesen beiden Wörtern, normalerweise in den Zeilen 18-19

Schritt 26: Wenn Sie Strg+V drücken, um zwischen diesen beiden Wörtern zu kopieren, werden in der unteren rechten Ecke zwei Wörter angezeigt. Zu diesem Zeitpunkt müssen wir nur das rechte auswählen

Zeichnen Sie einen Kreis, der automatische Import ist bequemer und schneller

Schritt 27: Klicken Sie nach Abschluss des Kopiervorgangs auf „Konfiguration bearbeiten“, wie im Symbol gezeigt.

Schritt 28: Klicken Sie auf das Symbol

Wählen Sie den dritten Ordner im Arbeitsverzeichnis aus, um anzuzeigen, dass es sich bei diesem Ordner um ein Modul handelt. Es ist auch ersichtlich, dass es ein Modul gibt

Englisches Wort.

Schritt 29: Klicken Sie auf das kleine Dreieck links von src, bis Sie den Controller finden, und klicken Sie dann mit der rechten Maustaste, wie in der Abbildung gezeigt.

Erstellen einer Demo-Klasse

Schritt 30: Geben Sie @Con ein und drücken Sie die Eingabetaste, um den Paketnamen automatisch zu vervollständigen.

Nach Abschluss, wie in der Abbildung dargestellt:

Dieser Controller ist gleichbedeutend mit einem Controller. Alle Programme müssen am Anfang diesen Controller durchlaufen.

Es dient der Verarbeitung und Annahme von Daten.

Schritt 31: Geben Sie @Re an der im Bild gezeigten Stelle ein und drücken Sie die Eingabetaste (die Funktion wird nach dem Drücken der Eingabetaste automatisch abgeschlossen)

Nach der Fertigstellung sieht es so aus:

Schritt 32: Vervollständigen Sie den Rest gemäß dem Bild.

@RequestMapping gibt an, woher es kommt, und ("/") gibt an, dass es aus dem aktuellen Verzeichnis kommt. Gibt "a1" zurück. Dies sollte dasselbe sein wie

Die zuvor erstellte JSP sollte konsistent sein.

Schritt 33: Klicken Sie auf den zweiten Schritt, wie im Bild gezeigt, um den Inhalt rechts anzuzeigen

Schritt 34: Kopieren Sie den folgenden Codeausschnitt in den Inhalt rechts.

spring.mvc.view.prefix = /WEB-INF/Ansichten/
spring.mvc.view.suffix = .jsp

Der Kopiervorgang wird wie in der Abbildung dargestellt abgeschlossen:

Schritt 35: Klicken Sie wie in der Abbildung gezeigt und führen Sie aus

Nach dem Ausführen wird das folgende Bild angezeigt, das anzeigt, dass der Vorgang erfolgreich war.

Manchmal sehen wir die folgende Situation:

Keine Panik, das liegt daran, dass die Schnittstelle belegt ist. Um es ganz deutlich zu sagen: Du hast sie schon einmal benutzt, aber nicht ausgeschaltet.

Die Lösung ist auch sehr einfach, ändern Sie einfach 8080 in eine beliebige andere Nummer (jede beliebige Nummer)

Schritt 36: Wir müssen nur localhost:8081 auf Baidu suchen, wie in der Abbildung gezeigt

Der Satz, den wir zuvor eingegeben haben, wird angezeigt.

Okay, die schnelle Webentwicklung wurde erklärt.

Nachfolgende Artikel:

Teil 3: ❤Drei Möglichkeiten, den Backend-Datenempfang zu übersehen❤ (empfohlene Sammlung)

Teil 2: Spielen Sie mit dem Webformular für schnelle Webentwicklung (❤ Empfohlene Sammlung ❤)

Damit ist dieser Artikel über die Entwicklung von JavaScript-Webseiten für Einsteiger abgeschlossen. Weitere relevante Inhalte für JavaScript-Webseiten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!