CodeGym /Blog Java /Aleatoriu /Crearea unei aplicații web simplă folosind servlet-uri și...

Nivel

San Francisco

21 July 2023
166 views
0 comments

Crearea unei aplicații web simplă folosind servlet-uri și JSP-uri (partea 1)

Cunoștințe necesare pentru a înțelege articolul: v-ați dat deja mai mult sau mai puțin seama de Java Core și ați dori să vă uitați la tehnologiile JavaEE și la programarea web . Ar fi cel mai logic să studiezi în prezent misiunea Java Collections , care tratează subiecte apropiate articolului.

Crearea unei aplicații web simple folosind servlet-uri și JSP-uri (partea 1) - 1

Acest material este continuarea logică a articolului meu Crearea celui mai simplu proiect web în IntelliJ Idea Enterprise . În acel articol, am demonstrat cum să creez un șablon de proiect web funcțional. De data aceasta vă voi arăta cum să creați o aplicație web simplă, dar total atractivă, folosind API-ul Java Servlet și API-ul JavaServer Pages . Aplicația noastră va avea o pagină de pornire cu două link-uri:

un link către o pagină pentru adăugarea de utilizatori;
un link către lista de utilizatori.

Ca și înainte, voi folosi IntelliJ Idea Enterprise Edition , Apache Maven (vom conecta doar câteva dependențe) și Apache Tomcat . În cele din urmă, ne vom „înfrumuseța” aplicația folosind cadrul W3.CSS . Vom presupune că aveți deja un proiect gol la care acum îl vom adăuga. Dacă nu, parcurgeți primul articol și faceți unul. Va dura doar cateva minute :)

Câteva despre structura viitoarei noastre aplicații

Pagina noastră de pornire (/) va fi cea mai obișnuită pagină HTML statică , cu un antet și două link-uri/butoane:

adăugați un utilizator nou (navigează la / adaugă );
vizualizați lista de utilizatori (navigează la / listă ).

Tomcat va prinde cereri pentru aceste adrese și le va trimite către unul dintre cele două servlet-uri pe care le vom face (vom specifica maparea în web.xml ). Servleturile vor procesa apoi cererile, vor pregăti datele (sau vor salva date, dacă adăugăm un utilizator) și vor transfera controlul către fișierele JSP corespunzătoare , care apoi „redează” rezultatul. Vom stoca datele într-o listă simplă (Lista).

Creați o pagină de pornire statică

Dacă index.jsp în folderul web, ștergeți-l. În schimb, creați un fișier HTML simplu numit index.html în acest folder:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My super project!</title>
</head>
<body>
    <!-- header -->
    <div>
        <h1>Super app!<//h1>
    </div>

    <div>       <!-- content -->
        <div>    <!-- button holder -->
            <button onclick="location.href='/list'">List users<//button>
            <button onclick="location.href='/add'">Add user<//button>
        </div>
    </div>
</body>
</html>

Nu e nimic complicat aici. În eticheta titlu , indicăm titlul paginii noastre. În corpul paginii, avem două div-uri principale: antet și conținut . Div- ul de conținut include un suport pentru butoanele noastre. Și acolo avem două butoane care te duc la adresa corespunzătoare cu un clic. Puteți rula proiectul și să vedeți cum arată acum. Dacă faceți clic pe butoane, obțineți pagini cu erori 404, pentru că noi paginile corespunzătoare nu există încă. Dar putem spune că butoanele funcționează. Rețineți că aceasta nu este cea mai universală abordare: dacă JavaScript este dezactivat în browser, atunci aceste butoane nu vor funcționa. Dar vom presupune că nimeni nu dezactivează JavaScript. :) Evident, te-ai descurca cu link-uri simple, dar eu prefer butoanele. O poți face oricum preferi. Și nu vă faceți griji pentru faptul că exemplele mele vor avea o mulțime de div-uri . Le vom umple cu stiluri mai târziu și totul va arăta mai frumos. :)

Creați fișiere JSP pentru a reda rezultatul

În același director web , creați un folder în care vom adăuga fișierele noastre JSP . L-am numit „ viziuni ”, dar încă o dată poți să improvizezi. În acest folder, vom crea două fișiere JSP:

add.jsp — o pagină pentru adăugarea utilizatorilor;
list.jsp — pagină pentru afișarea listei de utilizatori.

Atribuiți-le anteturi adecvate de pagină. Ceva de genul „ Adăugați un utilizator nou ” și „ Lista de utilizatori ”, și o vom lăsa așa.

Creați două servlet-uri

Servleturile vor primi și procesa cererile pe care le trimite Tomcat . În folderul src/main/java , creați pachetul aplicației , unde vom pune codul sursă. Alte pachete vor merge și acolo. Deci, pentru a preveni crearea acestor pachete unul în celălalt, vom crea o clasă în pachetul aplicației (o vom șterge mai târziu). Acum creați trei pachete diferite în pachetul aplicației :

entities — entitățile noastre (clasa care descrie obiectele utilizatorului) merg aici;
model — aici merge modelul nostru (vom vorbi despre asta puțin mai târziu);
servlet-uri — și aici merg servleturile noastre.

Odată ce ați făcut acest lucru, puteți șterge calm acea clasă din pachetul aplicației (dacă ați creat-o, desigur). În pachetul servlets , creați două clase:

AddServlet — procesează cererile trimise către / add ;
ListServlet — procesează cererile trimise către / list .

Conectarea dependențelor în Maven

Tomcat 9. * implementează specificațiile pentru Servlet 4.0 și JavaServer Pages 2.3 . Așa se spunea în al doilea rând al primului paragraf din documentația oficială a Tomcat 9. Aceasta înseamnă că dacă, ca mine, utilizați această versiune de Tomcat , atunci codul pe care îl veți scrie și rula va folosi aceste versiuni. Dar am dori să avem aceste specificații în proiectul nostru, astfel încât codul nostru, care le folosește, cel puțin să fie compilat cu succes. Și pentru a face acest lucru, trebuie să le încărcăm în proiectul nostru. Aici Maven vine în ajutor.

Regula generală este următoarea: dacă trebuie să conectați ceva la proiectul dvs. folosind Maven:

accesați site-ul de depozit de la Maven;
găsiți versiunea necesară a bibliotecii necesare;
obțineți codul de dependență care trebuie lipit în pom.xml;
pastă! :)

Sa incepem. Mai întâi, pregătiți fișierul POM . Undeva după intrarea /version , dar înainte de /project , introduceți următoarele:


<dependencies>

</dependencies>

Facem acest lucru pentru a indica faptul că vom enumera dependențele necesare în cadrul acestor etichete. Acum accesați mvnrepository.com . Există un câmp de căutare în partea de sus. Pentru a începe, căutați „ servlet ”. Primul rezultat, care a fost folosit de peste șapte mii de ori, ni se potrivește. Amintiți-vă, avem nevoie de versiunea 4.0 (pentru Tomcat 9). Alte versiuni pot fi adecvate pentru implementările mai vechi. Aceasta este o versiune destul de recentă, așa că nu există atât de multe utilizări. Dar avem nevoie de ea. Se deschide o pagină de unde puteți obține codul pentru această dependență pentru o varietate de manageri de pachete sau îl puteți descărca pur și simplu. Dar, deoarece dorim să-l conectăm folosind Maven, vom selecta codul din fila Maven. Copiem și lipim în secțiunea de dependență a fișierului nostru POM. Dacă primiți o notificare care vă întreabă dacă doriți să activați importul automat în colțul din dreapta jos al IDEA , continuați și sunteți de acord cu aceasta. Dacă ați refuzat din greșeală, accesați „ Setări ” și activați manual importul automat: Setări (Ctrl + Alt + S) -> Build, Execution, Deployment -> Maven -> Importing .și fișierele de configurare IDEA pentru acest proiect sincronizate. Urmând același principiu, vom găsi și conecta JavaServer Pages 2.3 (căutați „JSP”). Și din moment ce am început deja Maven, să-i spunem doar că fișierele noastre sursă urmează sintaxa Java 8 și că trebuie să le compilam în bytecode pentru versiunea respectivă. După toți acești pași, pom.xml va arăta cam așa:


<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>cc.codegym.info.fatfaggy</groupId>
    <artifactId>my-super-project</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compile.source>1.8</maven.compile.source>
        <maven.compile.target>1.8</maven.compile.target>
    </properties>

    <dependencies>
        <!-- Servlet API 4.0 for tomcat 9 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.0</version>
            <scope>provided</scope>
        </dependency>

        <!-- JavaServer Pages API 2.3 for tomcat 9 -->
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>javax.servlet.jsp-api</artifactId>
            <version>2.3.1</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>

</project>

Transformați servlet-urile noastre în servlet-uri adevărate

În acest moment, perechea de servlet-uri pe care le-am creat sunt de fapt clase obișnuite. Nu au nicio funcționalitate. Dar acum am conectat API-ul Servlet la proiectul nostru și, în consecință, putem folosi clasele sale. Pentru a face servleturile noastre „reale”, tot ce trebuie să facem este să le facem să moștenească clasa HttpServlet .

Cartografiere sau marcare

Acum ar fi bine să îi spunem cumva lui Tomcat că cererile pentru adresa / add sunt procesate de către AddServlet- ul nostru , iar cererile pentru adresa / list sunt gestionate de ListServlet . Acest proces se numește mapare (markup). Acest lucru se face în web.xml folosind același principiu:

pentru a începe, descrieți servletul (furnizați un nume și specificați calea către clasa în sine);
apoi legați acest servlet la o anumită adresă (specificați numele servlet-ului, pe care tocmai i l-am dat și specificați adresa ale cărei cereri ar trebui trimise acestui servlet).

Descrieți servletul:


<servlet>
    <servlet-name>add</servlet-name>
    <servlet-class>app.servlets.AddServlet</servlet-class>
</servlet>

Acum legați-l la adresa:


<servlet-mapping>
    <servlet-name>add</servlet-name>
    <url-pattern>/add</url-pattern>
</servlet-mapping>

După cum puteți vedea, numele-servlet este același în ambele cazuri. Drept urmare, Tomcat știe că, dacă se primește o solicitare pentru /add, aceasta trebuie trimisă la app.servlets.AddServlet. Facem același lucru cu al doilea servlet. În cele din urmă, web.xml are aproximativ următorul conținut:


<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

    <!-- add servlet -->
    <servlet>
        <servlet-name>add</servlet-name>
        <servlet-class>app.servlets.AddServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>add</servlet-name>
        <url-pattern>/add</url-pattern>
    </servlet-mapping>

    <!-- list servlet -->
    <servlet>
        <servlet-name>list</servlet-name>
        <servlet-class>app.servlets.ListServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>list</servlet-name>
        <url-pattern>/list</url-pattern>
    </servlet-mapping>
</web-app>

Apropo, nu am creat markup pentru pagina de pornire (/). Cert este că nu avem nevoie de el în acest caz. Pagina noastră de pornire este un fișier HTML simplu care afișează doar două butoane. Nu are conținut dinamic, așa că nu trebuie să creăm un servlet separat pentru solicitările de la / care nu va face altceva decât să înainteze execuția către un JSP (care ar trebui să fie creat) pentru a desena două butoane pentru noi. Nu avem nevoie de asta. O pagină statică ni se potrivește. Când Tomcat primește o solicitare, va verifica dacă există un singur servlet care ar putea procesa cererea pentru adresa respectivă și apoi va vedea că această adresă conține deja fișierul HTML gata., pe care o va servi. Putem rula aplicația noastră din nou (reporniți serverul sau redistribuiți-l - orice preferi) și să ne asigurăm că pagina de pornire este redată, nimic nu s-a stricat și tranzițiile apar atunci când facem clic pe butoane (deși primim din nou o eroare). Apropo, în timp ce înainte primim o eroare 404, acum obținem o eroare 405. Înseamnă că maparea a funcționat și servleturile au fost găsite, dar nu aveau o metodă potrivită pentru a gestiona cererea.

Scurtă digresiune: ce se întâmplă „sub capotă”?

Probabil te-ai gândit deja cum funcționează aplicația noastră în Tomcat. Ce se întâmplă acolo? Și unde este metoda main()? De îndată ce accesați localhost:8080 în browser, browserul trimite o solicitare la această adresă folosind protocolul HTTP. Sper că știți deja că există multe tipuri diferite de solicitări, iar cele mai populare sunt GET și POST. Fiecare cerere trebuie să primească răspuns. Se așteaptă ca o solicitare GET să primească un răspuns de cod HTML gata de utilizare, returnat în browser. Browserul înlocuiește apoi codul cu toate literele, butoanele și formularele frumoase. O solicitare POST este puțin mai interesantă, deoarece conține și câteva informații. De exemplu, să presupunem că introduceți acreditările într-un formular de înregistrare sau de conectare pe un site web și faceți clic pe „Trimite”. Acest lucru face ca o solicitare POST cu informațiile dumneavoastră personale să fie trimisă către server. Serverul primește aceste informații, le procesează și returnează un răspuns (de exemplu, o pagină HTML cu profilul dvs.). Principala diferență dintre ele este că cererile GET sunt folosite doar pentru a prelua date de pe server, în timp ce cererile POST transportă anumite informații (și datele de pe server se pot schimba). De exemplu, atunci când încărcați fotografia pe server, aceasta este transportată acolo într-o solicitare POST și serverul o adaugă la baza de date, adică are loc o modificare. Acum înapoi la Tomcat. Când primește o cerere de la un client, se uită la adresă. Verifică dacă există un servlet adecvat pentru a procesa cererile pentru adresa respectivă (sau o resursă disponibilă care poate fi returnată imediat). Dacă nu găsește ceva de returnat, apoi răspunde cu o eroare 404 mai degrabă decât cu o pagină HTML. Dar dacă găsește un servlet potrivit „șezând” la acea adresă, atunci se uită la tipul de cerere (GET, POST sau altceva) și întreabă servlet-ul dacă are o metodă care poate gestiona acest tip de interogare. Dacă servletul spune că nu știe cum să gestioneze acest tip, atunciTomcat returnează un cod 405. Și asta s-a întâmplat în proiectul nostru. Dar dacă se găsește un servlet potrivit și are o metodă potrivită, atunci Tomcat creează un obiect servlet, îl pornește pe un fir nou(care îl lasă să ruleze singur), iar Tomcat își continuă munca, acceptând și trimițând cereri. În plus, Tomcat creează încă două obiecte: un HttpServletRequest (pe care îl voi numi „cerere” pe scurt) și un HttpServletResponse (pe care îl voi numi „răspuns”). Pune toate datele primite de la solicitarea clientului în primul obiect, astfel încât toate acele date să poată fi extrase din acesta. Și apoi, după toate acestea, trece aceste două aceste obiecte la metoda corespunzătoare a servlet-ului care a fost pornit pe un fir separat. De îndată ce servletul își termină munca și are un răspuns gata pentru a fi trimis clientului, flutură un steag către Tomcat, spunând „Am terminat. Totul este gata”. Tomcat primește răspunsul și îl trimite clientului. Acest lucru îi permite lui Tomcat să primească cereri și să trimită răspunsuri, fără a fi distras, iar toată munca este realizată de servlet-uri care rulează pe fire separate. Asta înseamnă că atunci când scriem codul servlet-ului, determinăm ce lucru va fi efectuat. Și vă puteți gândi la metoda main() ca fiind localizată în interiorul Tomcat însuși (da, este scrisă în Java), iar când „lansăm” Tomcat, metoda main() este pornită.

Crearea unei aplicații web simple folosind servlet-uri și JSP-uri (partea 1) - 2

Utilizați servlet-uri pentru a captura metodele GET și pentru a trimite răspunsuri super simple

În acest moment, servleturile noastre nu au metode adecvate (GET), așa că Tomcat returnează o eroare 405. Să le creăm! Clasa HttpServlet, pe care o moștenim servleturile noastre, declară diferite metode. Pentru a atribui un cod specific metodelor, pur și simplu le înlocuim. În acest caz, trebuie să suprascriem doGet()metoda în ambele servlet-uri.


@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

}

După cum puteți vedea, această metodă are două argumente: req (cerere) și resp (răspuns). Acestea sunt chiar obiectele pe care Tomcat le creează și le populează pentru noi atunci când apelează metoda corespunzătoare în servlet. Pentru început, vom crea cele mai simple răspunsuri. Pentru a face acest lucru, vom lua obiectul resp și vom obține un obiect PrintWriter din el. Acest tip de obiect este folosit pentru a compune un răspuns. Îl vom folosi pentru a scoate un șir simplu.


@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    PrintWriter writer = resp.getWriter();
    writer.println("GET method from AddServlet");
}

Vom face ceva similar în ListServlet și apoi ne vom reporni serverul. După cum puteți vedea, totul funcționează! Când dai clic pe butoane, primești pagini cu textul pe care l-am „scris” cu PrintWriter. Dar fișierele JSP pe care le-am pregătit pentru a genera pagini cu răspunsuri nu sunt folosite. Asta pur și simplu pentru că nu sunt niciodată executați. Servletul nostru creează răspunsul în sine și termină de rulat, semnalând lui Tomcat că este gata să răspundă clientului. Tomcat doar preia răspunsul și îl trimite înapoi clientului.

Să transmitem controlul de la servlet-uri la fișierele JSP. Vom schimba codul metodelor noastre după cum urmează:

obținem un obiect dispecer de solicitare de la obiectul de cerere și îi transmitem adresa paginii JSP către care dorim să transferăm controlul;
folosim acest obiect pentru a transfera controlul către pagina JSP specificată, fără a uita să transmitem obiectele de solicitare și răspuns pe care le-am primit de la Tomcat.


@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    RequestDispatcher requestDispatcher = req.getRequestDispatcher("views/add.jsp");
    requestDispatcher.forward(req, resp);
}

În eticheta de corp a paginilor JSP, puteți adăuga ceva, astfel încât să putem vedea clar ce pagină este afișată. După ce ați făcut asta, reporniți serverul și verificați. Facem clic pe butoanele de pe pagina principală și paginile se deschid, ceea ce înseamnă că solicitările sunt trimise către servlet-uri. Apoi controlul este transmis paginilor JSP, care sunt acum redate. Asta este tot pentru acum. În următoarea parte a acestui articol, vom lucra la funcționalitatea aplicației noastre.

Mai multe lecturi:
Crearea unei aplicații web simple folosind servlet-uri și JSP-uri (partea 2) Prima ta aplicație care folosește servlet-uri Java

Comentarii

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION