CodeGym /Java blog /Véletlen /Egyszerű webalkalmazás készítése szervletekkel és JSP-kke...

Szint

San Francisco

21 July 2023
163 views
0 comments

Egyszerű webalkalmazás készítése szervletekkel és JSP-kkel (1. rész)

A cikk megértéséhez szükséges ismeretek: többé-kevésbé már kitalálta a Java Core-t , és szeretne a JavaEE technológiákkal és webprogramozással foglalkozni . Az lenne a legésszerűbb, ha jelenleg a Java Collections küldetést tanulmányozná , amely a cikkhez közel álló témákkal foglalkozik.

Egyszerű webalkalmazás létrehozása szervletekkel és JSP-kkel (1. rész) - 1

Ez az anyag logikus folytatása A legegyszerűbb webprojekt létrehozása az IntelliJ Idea Enterprise-ban című cikkemnek . Ebben a cikkben bemutattam, hogyan lehet működő webprojektsablont létrehozni. Ezúttal megmutatom, hogyan készíthetsz egy egyszerű, de teljesen vonzó webalkalmazást a Java Servlet API és a JavaServer Pages API segítségével . Pályázatunknak lesz egy kezdőlapja két linkkel:

hivatkozás egy oldalra, ahol felhasználókat vehet fel;
egy link a felhasználók listájához.

A korábbiakhoz hasonlóan most is az IntelliJ Idea Enterprise Editiont , az Apache Maven-t (csak összekapcsolunk néhány függőséget) és az Apache Tomcat-et fogom használni . A végén a W3.CSS keretrendszer segítségével "megszépítjük" az alkalmazásunkat . Feltételezzük, hogy már van egy üres projektje, amelyet most hozzáadunk. Ha nem, fuss át az első cikken, és készíts egyet. Csak pár percet vesz igénybe :)

Egy kicsit a jövőbeli alkalmazásunk felépítéséről

Kezdőlapunk (/) egy legszokványosabb statikus HTML oldal lesz, fejléccel és két linkkel/gombbal:

új felhasználó hozzáadása (navigál a / add );
a felhasználók listájának megtekintése (navigáció a / lista ).

A Tomcat felfogja az ezekre a címekre vonatkozó kéréseket, és elküldi azokat a két szervlet egyikére, amelyet készíteni fogunk (a leképezést a web.xml fájlban adjuk meg ). A servletek ezután feldolgozzák a kéréseket, előkészítik az adatokat (vagy elmentik az adatokat, ha felhasználót adunk hozzá), és átadják a vezérlést a megfelelő JSP-fájloknak , amelyek aztán "renderelik" az eredményt. Az adatokat egy sima vanília listában (List) tároljuk.

Hozzon létre egy statikus kezdőlapot

Ha az index.jsp fájlt a webmappában tárolja, törölje azt. Ehelyett hozzon létre egy egyszerű HTML-fájlt index.html néven ebben a mappában:


<!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>

Nincs itt semmi bonyolult. A cím címkében feltüntetjük oldalunk címét. Az oldaltörzsben két fő div van: fejléc és tartalom . A tartalom div tartalmaz egy tartót gombjaink számára. És ott van két gomb, amely egy kattintással a megfelelő címre viszi. Futtathatja a projektet, és megnézheti, hogyan néz ki most. Ha rákattint a gombokra, 404-es hibás oldalakat kap, mert a megfelelő oldalak még nem léteznek. De elmondhatjuk, hogy a gombok működnek. Vegye figyelembe, hogy ez nem a leguniverzálisabb megközelítés: ha a JavaScript ki van kapcsolva a böngészőben, akkor ezek a gombok nem működnek. De feltételezzük, hogy senki sem tiltja le a JavaScriptet. :) Nyílván egyszerű linkekkel is be lehetne érni, de én jobban szeretem a gombokat. Megteheti, ahogy tetszik. És ne aggódj amiatt, hogy a példáimban sok div lesz . Később megtöltjük stílusokkal, és minden szebb lesz. :)

Hozzon létre JSP fájlokat az eredmény megjelenítéséhez

Ugyanabban a webes könyvtárban hozzon létre egy mappát, ahová hozzáadjuk a JSP-fájlokat . Nézeteknek hívtam , de ismét lehet improvizálni. Ebben a mappában két JSP-fájlt hozunk létre:

add.jsp — felhasználók hozzáadására szolgáló oldal;
list.jsp – oldal a felhasználók listájának megjelenítéséhez.

Rendelje hozzájuk a megfelelő oldalfejlécet. Valami olyasmi, mint " Új felhasználó hozzáadása " és " Felhasználói lista ", és így hagyjuk.

Hozzon létre két szervletet

A szervletek fogadják és feldolgozzák a Tomcat által küldött kéréseket. Az src/main/java mappában hozza létre az alkalmazáscsomagot , ahová a forráskódunkat helyezzük el. Más csomagok is oda fognak menni. Ezért, hogy megakadályozzuk, hogy ezek a csomagok egymáson belül jöjjenek létre, létrehozunk néhány osztályt az alkalmazáscsomagban ( később töröljük). Most hozzon létre három különböző csomagot az alkalmazáscsomagban :

entitások — az entitásaink (a felhasználói objektumokat leíró osztály) ide kerülnek;
modell — ide megy a modellünk (erről egy kicsit később beszélünk);
szervletek – és ide kerülnek a servletjeink.

Ha ezt megtetted, nyugodtan törölheted az adott osztályt az alkalmazáscsomagból ( persze ha te hoztad létre). A szervlet csomagban hozzon létre két osztályt:

AddServlet — feldolgozza a / add címre küldött kéréseket ;
ListServlet — feldolgozza a / list címre küldött kéréseket .

Függőségek összekapcsolása a Mavenben

A Tomcat 9. * megvalósítja a Servlet 4.0 és a JavaServer Pages 2.3 specifikációit . Ez áll a Tomcat 9 hivatalos dokumentációjának első bekezdésének második sorában. Ez azt jelenti, hogy ha Ön, mint én, a Tomcat ezen verzióját használja , akkor a megírt és futtatott kód ezeket a verziókat fogja használni. De szeretnénk, ha ezek a specifikációk szerepelnének a projektünkben, hogy az ezeket használó kódunk legalább sikeresen lefordítható legyen. És ehhez be kell töltenünk őket a projektünkbe. Itt jön a segítségre Maven .

Az általános szabály a következő: ha valamit a Maven segítségével kell csatlakoztatnia a projekthez:

lépjen a tárhely webhelyére a Mavenről;
keresse meg a szükséges könyvtár szükséges verzióját;
megkapja a függőségi kódot, amelyet be kell illeszteni a pom.xml fájlba;
paszta! :)

Kezdjük. Először készítse elő a POM-fájlt . Szúrja be valahova a /version bejegyzés után, de a /project elé a következőt:


<dependencies>

</dependencies>

Ezt azért tesszük, hogy jelezzük, hogy ezeken a címkéken belül felsoroljuk a szükséges függőségeket. Most lépjen az mvnrepository.com oldalra . Felül van egy keresőmező. Az indításhoz keressen rá a ' servlet ' kifejezésre. Az első, több mint hétezerszer használt eredmény megfelel nekünk. Ne feledje, hogy szükségünk van a 4.0-s verzióra ( Tomcat 9). Más verziók megfelelőek lehetnek a régebbi megvalósításokhoz. Ez egy meglehetősen friss verzió, így nincs sok felhasználási módja. De szükségünk van rá. Megnyílik egy oldal, ahol számos csomagkezelőhöz megkaphatja a függőség kódját, vagy egyszerűen letöltheti. De mivel a Maven segítségével szeretnénk csatlakoztatni, a kódot a Maven lapon választjuk ki. Másoljuk és beillesztjük a POM-fájlunk függőségi szakaszába. Ha olyan értesítést kap, amely megkérdezi, hogy engedélyezi-e az automatikus importálást az IDEA jobb alsó sarkában , lépjen tovább, és fogadja el. Ha véletlenül visszautasította, lépjen a " Beállítások " menübe, és kapcsolja be manuálisan az automatikus importálást: Beállítások (Ctrl + Alt + S) -> Build, Execution, Deployment -> Maven -> Importing .és a projekt IDEA konfigurációs fájljait szinkronban. Ugyanezt az elvet követve meg fogjuk találni és csatlakoztatni a JavaServer Pages 2.3-at (keress rá a „JSP” kifejezésre). És mivel már elindítottuk a Mavent, mondjuk el, hogy forrásfájljaink a Java 8 szintaxisát követik, és az adott verzióhoz bájtkódba kell fordítanunk őket. Mindezen lépések után a pom.xml fájl valahogy így fog kinézni:


<?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>

A servleteket valódi servletekké alakíthatjuk

Jelenleg az általunk létrehozott servletpár valójában közönséges osztály. Semmiféle funkciójuk nincs. Most azonban összekapcsoltuk a Servlet API-t a projektünkkel, és ennek megfelelően használhatjuk az osztályait. Ahhoz, hogy servletjeink "igazivá váljanak", mindössze annyit kell tennünk, hogy örököljék a HttpServlet osztályt.

Leképezés vagy jelölés

Jó lenne valahogy elmondani a Tomcatnak , hogy a / add címre vonatkozó kéréseket az AddServlet dolgozza fel , és a / list címre vonatkozó kéréseket a ListServlet kezeli . Ezt a folyamatot leképezésnek (markup) nevezik. Ez a web.xml fájlban ugyanezen elv szerint történik :

kezdéshez írja le a szervletet (adjon meg egy nevet és adja meg magának az osztálynak az elérési útját);
majd kösd ezt a servletet egy adott címhez (add meg a servlet nevét, amit az imént adtunk neki, és adjuk meg azt a címet, amelynek a kéréseit erre a szervletre kell küldeni).

A servlet leírása:


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

Most kösd a címhez:


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

Mint látható, a szervletnév mindkét esetben ugyanaz. Ennek eredményeként a Tomcat tudja, hogy ha az /add kérés érkezik, azt el kell küldeni az app.servlets.AddServlet-nek. Ugyanezt tesszük a második szervlettel is. Végül a web.xml-ünk körülbelül a következő tartalommal rendelkezik:


<?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>

Egyébként nem készítettünk jelölést a kezdőlaphoz (/). Az a helyzet, hogy ebben az esetben nincs rá szükségünk. Kezdőlapunk egy egyszerű HTML-fájl, amely mindössze két gombot jelenít meg. Nincs dinamikus tartalma, így nem kell külön servletet létrehoznunk a / -től érkező kérésekhez , ami nem tesz mást, mint továbbítja a végrehajtást valamilyen JSP- re (amit szintén létre kell hozni), hogy húzzon nekünk két gombot. Erre nincs szükségünk. A statikus oldal megfelel nekünk. Amikor a Tomcat kérést kap, ellenőrzi, hogy van-e egyetlen szervlet, amely képes feldolgozni az adott címre vonatkozó kérést, majd látni fogja, hogy ez a cím már tartalmazza-e a kész HTML- fájlt., amelyet ki fog szolgálni. Újra futtathatjuk az alkalmazásunkat (újraindíthatjuk a kiszolgálót vagy újratelepíthetjük újra – ahogy tetszik), és megbizonyosodhatunk arról, hogy a kezdőlap renderelésre kerül, semmi sem tört el, és az átmenetek akkor következnek be, amikor a gombokra kattintunk (bár ismét hibaüzenetet kapunk). Amúgy míg korábban 404-es hibaüzenetet kaptunk, most 405-öt kapunk. Ez azt jelenti, hogy a leképezés működött és a servleteket megtalálták, de nem volt megfelelő módszerük a kérés kezelésére.

Rövid kitérő: mi történik "a motorháztető alatt"?

Valószínűleg már gondolt arra, hogyan működik alkalmazásunk a Tomcatben. Mi történik odabent? És hol van a main() metódus? Amint a localhost:8080 címre lép a böngészőjében, a böngésző kérést küld erre a címre a HTTP protokoll használatával. Remélem, már tisztában vagy azzal, hogy sokféle kérés létezik, és a legnépszerűbbek a GET és a POST. Minden kérésre válaszolni kell. A GET-kérés várhatóan használatra kész HTML-kódot kap, visszaküldve a böngészőnek. A böngésző ezután lecseréli a kódot az összes szép betűre, gombra és űrlapra. A POST kérés egy kicsit érdekesebb, mivel bizonyos információkat is tartalmaz. Tegyük fel például, hogy megadja a hitelesítő adatokat egy regisztrációs vagy bejelentkezési űrlapon egy webhelyen, és kattintson a „Küldés” gombra. Ez azt eredményezi, hogy egy POST kérés kerül elküldésre a szervernek az Ön személyes adataival. A szerver megkapja ezeket az információkat, feldolgozza, és valamilyen választ ad vissza (például egy HTML-oldalt az Ön profiljával). A fő különbség köztük az, hogy a GET kéréseket csak a szerverről történő adatok lekérésére használják, míg a POST kérések bizonyos információkat hordoznak (és a szerveren lévő adatok változhatnak). Például amikor feltöltöd a képedet a szerverre, az egy POST kérésben oda kerül, és a szerver hozzáadja az adatbázishoz, azaz változás történik. Most térjünk vissza a Tomcathez. Amikor egy ügyféltől kérést kap, megnézi a címet. Ellenőrzi, hogy van-e megfelelő szervlet az adott címre vonatkozó kérések feldolgozására (vagy rendelkezésre álló erőforrás, amely azonnal visszaküldhető). Ha nem talál visszaadnivalót, akkor HTML-oldal helyett 404-es hibával válaszol. De ha talál egy megfelelő servletet az adott címen, akkor megnézi a kérés típusát (GET, POST vagy valami más), és megkérdezi a servletet, hogy van-e olyan metódusa, amely képes kezelni az ilyen típusú lekérdezéseket. Ha a szervlet azt mondja, hogy nem tudja, hogyan kell kezelni ezt a típust, akkorA Tomcat 405-ös kódot ad vissza. És pontosan ez történt a projektünkben. De ha találunk egy megfelelő szervletet, és annak megfelelő metódusa van, akkor a Tomcat létrehoz egy szervlet objektumot, és elindítja egy új szálon(ami lehetővé teszi, hogy önállóan fusson), a Tomcat pedig folytatja saját munkáját, fogadja és küldi a kéréseket. Ezenkívül a Tomcat két további objektumot hoz létre: egy HttpServletRequest-et (amit röviden "kérésnek" fogok hívni) és egy HttpServletResponse-t (amit "válasznak" fogok hívni). Az ügyfél kéréséből kapott összes adatot az első objektumba helyezi, így az összes adat kinyerhető belőle. Aztán mindezek után ezt a két objektumot átadja a külön szálon elindított servlet megfelelő metódusának. Amint a szervlet befejezi munkáját, és készen áll a válasz elküldésére az ügyfélnek, zászlót int a Tomcat felé, és azt mondja: "Kész. Minden kész". A Tomcat megkapja a választ, és elküldi az ügyfélnek. Ez lehetővé teszi a Tomcat számára, hogy kéréseket fogadjon és válaszokat küldjön, anélkül, hogy elzavarna, és minden munkát külön szálakon futó szervletek végzik. Ez azt jelenti, hogy amikor a szervlet kódját írjuk, meghatározzuk, hogy milyen munkát végezzünk el. A main() metódust pedig úgy képzelhetjük el, hogy magában a Tomcatban található (igen, Java-ban van írva), és amikor "indítjuk" a Tomcat-et, elindul a main() metódus.

Egyszerű webalkalmazás készítése szervletekkel és JSP-kkel (1. rész) - 2

Használjon szervleteket a GET metódusok elkapásához és rendkívül egyszerű válaszok küldéséhez

Jelenleg servletjeinknek nincs megfelelő metódusa (GET), ezért a Tomcat 405-ös hibát ad vissza. Alkossuk meg őket! A HttpServlet osztály, amit mi servletjeink örökölünk, különféle metódusokat deklarál. Ha konkrét kódot akarunk hozzárendelni a metódusokhoz, egyszerűen felülírjuk őket. doGet()Ebben az esetben mindkét szervletben felül kell bírálnunk a metódust.


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

}

Amint láthatja, ez a módszer két argumentumot használ: req (request) és resp (válasz). Pontosan ezeket az objektumokat hozza létre és tölti fel nekünk a Tomcat, amikor meghívja a megfelelő metódust a szervletben. Kezdésként a legegyszerűbb válaszokat hozzuk létre. Ehhez vesszük a resp objektumot, és kapunk belőle egy PrintWriter objektumot. Az ilyen típusú objektumokat válasz összeállítására használják. Egy egyszerű karakterlánc kimenetére fogjuk használni.


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

Valami hasonlót csinálunk a ListServletben, majd újraindítjuk a szerverünket. Mint látható, minden működik! Ha rákattint a gombokra, olyan oldalakat kap, amelyeken a PrintWriterrel "írtuk" a szöveget. A válaszokat tartalmazó oldalak generálására előkészített JSP-fájlok azonban nem használatosak. Ez egyszerűen azért van, mert soha nem végezték ki őket. A servletünk maga hozza létre a választ, és befejezi a futást, jelezve a Tomcatnek, hogy kész válaszolni az ügyfélnek. A Tomcat egyszerűen átveszi a választ, és visszaküldi az ügyfélnek.

Adjuk át a vezérlést a szervletekről a JSP-fájlokra. A metódusaink kódját az alábbiak szerint módosítjuk:

kérés diszpécser objektumot kapunk a kérelem objektumtól, és átadjuk neki annak a JSP-oldalnak a címét, amelyre át akarjuk adni a vezérlést;
ezt az objektumot használjuk az irányítás átadására a megadott JSP oldalra, nem felejtve el átadni a Tomcattől kapott kérés és válasz objektumokat.


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

A JSP-oldalak body címkéjéhez hozzáadhat valamit, így egyértelműen láthatja, hogy melyik oldal jelenik meg. Ha ezt megtette, indítsa újra a szervert, és ellenőrizze. A főoldalon lévő gombokra kattintunk, és az oldalak megnyílnak, ami azt jelenti, hogy a kérések a servletekre kerülnek. Ezután a vezérlés átadódik a JSP-oldalaknak, amelyek megjelenítése folyamatban van. Ez minden most. A cikk következő részében az alkalmazásunk működésével foglalkozunk.

További olvasnivalók:
Egyszerű webalkalmazás készítése szervletekkel és JSP-kkel (2. rész) Az első Java szervleteket használó alkalmazás

Hozzászólások

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