Een eenvoudige webtoepassing maken met behulp van servlets en JSP's (deel 1) Kennis die nodig is om het artikel te begrijpen: Je hebt Java Core al min of meer door en wilt graag kijken naar JavaEE-technologieën en webprogrammering. Het zou voor u het meest logisch zijn om momenteel de Java Collections-zoektocht te bestuderen, die onderwerpen behandelt die dicht bij het artikel staan.
Entiteiten creëren
In het entiteitenpakket maken we een Userklasse met twee persoonlijke tekenreeksvariabelen: name en password . Maak constructors (standaard en een die beide waarden aanneemt) en getters/setters, en overschrijf de toString()methode voor het geval dat, samen met de equals()en hashCode()methoden. Met andere woorden, we zullen alles doen wat een respectabele Java-ontwikkelaar doet bij het maken van een klasse.
public class User {
private String name;
private String password;
public User() {
}
public User(String name, String password) {
this.name = name;
this.password = password;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
@Override
public String toString() {
return "User{" +
"name='" + name + '\'' +
", password='" + password + '\'' +
'}';
}
@Override
public boolean equals(Object o) {
if (this == o) return true;
if (o == null || getClass() != o.getClass()) return false;
User user = (User) o;
if (name != null ? !name.equals(user.name) : user.name != null) return false;
return password != null ? password.equals(user.password) : user.password == null;
}
@Override
public int hashCode() {
int result = name != null ? name.hashCode() : 0;
result = 31 * result + (password != null ? password.hashCode() : 0);
return result;
}
}
Nu kunnen we beginnen met het maken van een lijst met gebruikers. We voegen er gebruikers aan toe en halen er gebruikers uit om ze weer te geven. We hebben echter één probleem. We maken onze servletobjecten niet. Tomcat doet dit voor ons. De methoden die we daarin overschrijven, zijn al voor ons gedefinieerd en we kunnen geen parameters instellen. Hoe creëren we dan een gedeelde lijst die zichtbaar zal zijn in onze beide servlets? Als we gewoon een lijstobject maken in elke servlet, dan voegen we gebruikers toe aan de ene lijst, maar tonen we gebruikers van een andere lijst in de ListServlet. We hebben dus een object nodig dat door beide servlets wordt gedeeld. Over het algemeen hebben we een object nodig dat wordt gedeeld door alle klassen in ons programma: één object voor het hele programma. Ik hoop dat je iets hebt gehoord over ontwerppatronen. Voor sommige mensen is dit misschien de eerste echte behoefte aan het Singleton- patroon in hun programma. Je zou eens gek kunnen doen en wat zoete Singleton uithalen met dubbele controles en synchronisatie (ja, onze applicatie is multithreaded, aangezien Tomcat-servlets op afzonderlijke threads draaien). Maar ik ga de techniek van vroege initialisatie gebruiken, omdat die volledig geschikt is voor onze doeleinden hier.
Een model maken
Maak een klasse (en implementeer het Singleton- patroon) in het modelpakket en noem het iets ongewoons. Bijvoorbeeld Model . We maken een privélijst met gebruikers in onze klas en implementeren twee methoden: een om een gebruiker toe te voegen en een andere om een lijst met strings (gebruikersnamen) te retourneren. Aangezien ons gebruikersobject bestaat uit een gebruikersnaam en wachtwoord en we geen gebruikerswachtwoorden willen onthullen, hebben we alleen een lijst met namen.
public class Model {
private static Model instance = new Model();
private List<User> model;
public static Model getInstance() {
return instance;
}
private Model() {
model = new ArrayList<>();
}
public void add(User user) {
model.add(user);
}
public List<String> list() {
return model.stream()
.map(User::getName)
.collect(Collectors.toList());
}
}
Een beetje over MVC
Aangezien je al hebt gehoord over singleton , heb je waarschijnlijk wel eens gehoord van een ander ontwerppatroon model-view-controller (MVC). Het doel is om bedrijfslogica te scheiden van de weergave. Dat wil zeggen, om de code die bepaalt wat te doen te scheiden van de code die bepaalt hoe dingen moeten worden weergegeven. De weergave is verantwoordelijk voor de manier waarop gegevens worden gepresenteerd. In ons geval zijn de weergaven onze JSP-pagina's . Dat is precies waarom ik ze in een map met de naam views heb geplaatst . Het model is de data waarmee het programma daadwerkelijk werkt. In ons geval zijn dit de gebruikers (lijst van gebruikers). En controllers zijn de schakel daartussen. Ze halen gegevens uit het model en geven deze door aan de weergaven (of halen wat gegevens uit Tomcat, verwerk het en geef het door aan het model). U definieert uw bedrijfslogica (wat het programma zou moeten doen) erin, niet in het model of de weergave. Zo handelt elk onderdeel zijn eigen zaken af:
het model slaat gegevens op;
weergaven geven prachtige weergaven van de gegevens weer;
verwerkingsverantwoordelijken zorgen voor gegevensverwerking.
Hierdoor kan het programma vrij eenvoudig en onderhoudbaar zijn, in plaats van een monsterlijke hoop van alle code in één klasse. MVC is niet alleen geschikt voor webprogrammering, maar wordt vooral op dit gebied (bijna altijd) vaak gebruikt. In ons geval zullen de servlets fungeren als controllers. Dit is een zeer oppervlakkige en korte beschrijving van het patroon, maar MVC is niet het hoofdonderwerp van dit artikel. Als iemand meer wil weten, Google is je vriend! Maak een formulier om een gebruiker toe te voegen. Voeg het formulier toe aan add.jsp . Het moet bestaan uit twee tekstinvoervelden (een gewoon, de andere - een wachtwoordveld) en een knop om de gegevens naar de server te sturen.
Hier heeft het formulier een methodeattribuut met de waarde post . Dit geeft aan dat de gegevens van dit formulier als een POST-verzoek naar de server gaan . Het action- attribuut is niet gespecificeerd, wat betekent dat het verzoek naar hetzelfde adres wordt verzonden als van waaruit we naar deze pagina zijn gekomen ( /add ). Dus na ontvangst van een GET-verzoek retourneert onze servlet gebonden aan dit adres de JSP met het add-user-formulier. En als het een POST-verzoek ontvangt , weten we dat het formulier hier zijn gegevens heeft verzonden (die we extraheren uit het verzoekobject in dedoPost()methode, proces en doorgeven aan het model om op te slaan). Het is vermeldenswaard dat invoervelden een parameter hebben met de naam naam (voor gebruikersnamen of pass voor wachtwoorden). Dit is een heel belangrijk punt. Dus om deze gegevens (de gebruikersnaam en het wachtwoord die worden ingevoerd) van het verzoek (binnen de servlet) te ontvangen, gebruiken we deze naam- en wachtwoordvelden . Maar daarover later meer. Mijn knop voor het verzenden van gegevens is weer gemaakt als een knop , niet als een uitvoerveld zoals gebruikelijk is. Ik weet niet hoe wijdverspreid deze aanpak is, maar het werkt voor mij (Chrome-browser).
Servlet-afhandeling van POST-verzoeken
Laten we terugkeren naar de AddServlet . Ik herinner u eraan dat om onze servlet GET-verzoeken te laten "vangen" , we de doGet()methode in de HttpServlet- klasse hebben overschreven. Om onze servlet te leren om ook POST-verzoeken op te vangen , moeten we de methode ook overschrijven doPost(). Tomcat geeft het soortgelijke verzoek- en antwoordobjecten door waarmee we zullen werken. Pak om te beginnen de naam van het verzoek uit en geef de parameters door die door het formulier zijn verzonden (als u verschillende namen in het formulier hebt opgegeven, gebruikt u die namen). Maak daarna een gebruikersobject met de ontvangen gegevens. Vervolgens krijgen we het modelobject en voegen we de gemaakte gebruiker toe aan het model.
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String name = req.getParameter("name");
String password = req.getParameter("pass");
User user = new User(name, password);
Model model = Model.getInstance();
model.add(user);
}
Gegevens doorgeven aan de weergave
Laten we verder gaan met de ListServlet . De doGet()methode is al geïmplementeerd. Het draagt eenvoudigweg de controle over aan de weergave ( list.jsp ). Als je dit nog niet hebt, maak het dan aan naar analogie met de methode in de AddServlet . Nu zou het leuk zijn om de lijst met gebruikersnamen van het model te krijgen en deze door te geven aan de weergave, die ze zal ontvangen en mooi zal weergeven. Om dit te doen, gebruiken we opnieuw het verzoekobject dat we van Tomcat hebben ontvangen . We kunnen een attribuut aan dit object toevoegen en het een soort naam geven. We kunnen zelfs het object dat we willen doorgeven aan de weergave toevoegen. Omdat we bij het overdragen van de besturing van de servlet naar de view dezelfde verzoek- en antwoordobjecten doorgeven die de servlet heeft ontvangen, kunnen we onze lijst met namen aan het verzoekobject toevoegen en vervolgens onze lijst met gebruikersnamen uit het verzoek halen voorwerp in het zicht. We zijn klaar met de ListServlet- klasse, dus ik zal hier de code van de hele klasse presenteren:
Het is tijd om naar list.jsp te kijken . Het wordt alleen uitgevoerd wanneer ListServlet de controle eraan overdraagt. Bovendien hebben we de lijst met gebruikersnamen van het model al in de servlet voorbereid en deze hier in het verzoekobject doorgegeven. Aangezien we de lijst met namen hebben, kunnen we deze herhalen met een forlus en elke naam weergeven. Zoals ik al eerder zei, kunnen JSP-bestanden Java-code uitvoeren (wat ze anders maakt dan statische HTML-pagina's). Om wat code uit te voeren, hoeven we alleen maar de volgende constructie op de juiste plaats te plaatsen:
<!-- html code -->
<%
// Java code
%>
<!-- html code -->
Binnen dit construct krijgen we toegang tot verschillende variabelen:
request — ons request-object, dat we hebben overgenomen van de servlet, waar het simpelweg req heette ;
respons — het responsobject ( resp genoemd in de servlet);
out — een JspWriter- object (dat een gewone Writer erft ), dat we kunnen gebruiken om iets rechtstreeks in de HTML-pagina zelf te "schrijven". De verklaring out.println("Hello, World!") lijkt sterk op System.out.println("Hello, World!") , maar verwar ze niet!
out.println() "schrijft" naar een HTML-pagina , terwijl System.out.println naar de uitvoerstroom van het systeem schrijft . Als u System.out.println() aanroept binnen een JSP- sectie met Java-code , ziet u de resultaten in de Tomcat- console, maar niet op de pagina.
U kunt hier zoeken naar andere beschikbare objecten binnen een JSP . We kunnen het request- object gebruiken om de lijst met namen van de servlet te krijgen (we hebben het overeenkomstige attribuut aan dit object gekoppeld), en we kunnen het out- object gebruiken om deze namen weer te geven. Laten we ze weergeven (voorlopig als een eenvoudige HTML-lijst):
<ul>
<%
List<String> names = (List<String>) request.getAttribute("userNames");
if (names != null && !names.isEmpty()) {
for (String s : names) {
out.println("<li>" + s + "</li>");
}
}
%>
</ul>
Als we de lijst alleen moeten weergeven als er gebruikers zijn, en anders een waarschuwing weergeven dat er nog geen gebruikers zijn, dan kunnen we deze sectie een beetje herschrijven:
<%
List<String> names = (List<String>) request.getAttribute("userNames");
if (names != null && !names.isEmpty()) {
out.println("<ui>");
for (String s : names) {
out.println("<li>" + s + "</li>");
}
out.println("</ui>");
} else out.println("<p>There are no users yet!</p>");
%>
Nu we weten hoe we gegevens van servlets naar weergaven moeten doorgeven, kunnen we onze AddServlet verbeteren zodat deze een melding weergeeft over de succesvolle toevoeging van een gebruiker. Om dit te doen, doPost()kunnen we in de methode, na het toevoegen van een nieuwe gebruiker aan het model, deze gebruikersnaam toevoegen aan de attributen van het req- object en de controle teruggeven aan een weergave ( add.jsp ). En nu voegen we er een sectie met Java-code aan toe, waar we zullen controleren of het verzoek een dergelijk attribuut heeft, en als dat het geval is, dan zullen we een bericht weergeven dat de gebruiker succesvol is toegevoegd. Na deze wijzigingen ziet de volledige code van AddServlet er ongeveer zo uit:
package app.servlets;
import app.entities.User;
import app.model.Model;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class AddServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
RequestDispatcher requestDispatcher = req.getRequestDispatcher("views/add.jsp");
requestDispatcher.forward(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String name = req.getParameter("name");
String password = req.getParameter("pass");
User user = new User(name, password);
Model model = Model.getInstance();
model.add(user);
req.setAttribute("userName", name);
doGet(req, resp);
}
}
Hier maken we aan het einde van de doPost()methode een attribuut met de naam van de gebruiker die aan het model is toegevoegd en roepen we vervolgens de doGet()methode aan, waaraan we het huidige verzoek en antwoord doorgeven. De doGet()methode draagt nu de besturing over aan de weergave, die ook het verzoekobject ontvangt met de naam van de toegevoegde gebruiker als attribuut. Wat ons nog moet doen, is add.jsp repareren zodat het de melding weergeeft als een dergelijk attribuut niet bestaat. Hier is de definitieve versie van add.jsp :
een div-container voor inhoud, waarin wordt gecontroleerd of er een attribuut met een gebruikersnaam bestaat;
een div met het add-user formulier;
en onderaan een voettekst met een knop om terug te keren naar de startpagina.
Dit lijkt misschien te veel divs, maar we zullen ze later gebruiken wanneer we stijlen toevoegen. Hier is de definitieve versie van list.jsp :
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Users</title>
</head>
<body>
<div>
<h1>Super app!</h1>
</div>
<div>
<div>
<div>
<h2>Users</h2>
</div>
<%
List<String> names = (List<String>) request.getAttribute("userNames");
if (names != null && !names.isEmpty()) {
out.println("<ui>");
for (String s : names) {
out.println("<li>" + s + "</li>");
}
out.println("</ui>");
} else out.println("<p>There are no users yet!</p>");
%>
</div>
</div>
<div>
<button onclick="location.href='/'">Back to main</button>
</div>
</body>
</html>
We hebben dus een volledig werkende webapplicatie die gebruikers kan opslaan en toevoegen, en ook een lijst met hun namen kan weergeven. Nu moeten we het alleen nog mooi maken... :)
Stijlen toevoegen. We gebruiken het W3.CSS-framework
Op dit moment werkt onze applicatie, maar het ziet er absoluut schandalig uit. Laten we dus een achtergrond toevoegen, de tekst en knoppen kleuren, stijl toevoegen aan de lijsten, elementen uitlijnen, inspringingen toevoegen, enzovoort. Het handmatig schrijven van stijlen kan veel tijd kosten en onze zenuwen belasten. Dus stel ik voor om het W3.CSS- framework te gebruiken. Het heeft al kant-en-klare klassen met stijlen. We hoeven alleen de CSS-klassen die we willen gebruiken op de juiste plaatsen in te delen. Om ze aan onze pagina's toe te voegen, verbinden we eerst het stijlbestand. Er zijn twee manieren om dit te doen:
ga door onze pagina's en plaats de volgende directe link naar het stijlbestand in het hoofdgedeelte
Deze optie is geschikt als u een permanente internetverbinding heeft. Wanneer u uw pagina's op de lokale server opent, worden de stijlen van internet gehaald.
Maar als u alle stijlen lokaal wilt hebben en niet afhankelijk wilt zijn van een internetverbinding, download dan het stijlbestand en plaats het ergens in de webmap (bijv. web/styles/w3.css ). Ga vervolgens door al onze pagina's ( index.html, add.jsp, list.jsp ) en voeg de volgende link toe aan het stijlbestand in het hoofdgedeelte :
<link rel="stylesheet" href="styles/w3.css">
Ga daarna gewoon door de tags en voeg de stijlen toe die je leuk vindt. Ik zal hier niet in detail op ingaan. In plaats daarvan zal ik kant-en-klare versies van drie van mijn bestanden leveren met klassen in rasterstijl.
En dat is het. :) Als je nog vragen of opmerkingen hebt, of als iets niet lukt, laat dan een reactie achter. En ik zal een paar screenshots bijvoegen van hoe het allemaal is geworden.
En tot slot , als je met dit project wilt oefenen, kun je het volgende proberen:
maak een servlet en JSP om een gebruiker te verwijderen en voeg nog een paar toe om een bestaande gebruiker te bewerken. Het resultaat is een echte CRUD-webapplicatie die is gebouwd met behulp van servlets. ;)
vervang de lijst door een database, zodat de toegevoegde gebruikers niet verdwijnen nadat de server opnieuw is opgestart. :)
GO TO FULL VERSION