Paglikha ng isang simpleng web application gamit ang mga servlet at JSP (bahagi 1) Kaalaman na kinakailangan upang maunawaan ang artikulo: Higit pa o mas kaunti mo nang nalaman ang Java Core at gusto mong tingnan ang mga teknolohiya ng JavaEE at web programming. Ito ay magiging pinaka-makatuwiran para sa iyo na kasalukuyang nag-aaral ng Java Collections quest, na tumatalakay sa mga paksang malapit sa artikulo.
Paglikha ng mga entity
Sa entity package, gagawa kami ng Userklase na may dalawang pribadong string variable: pangalan at password . Lumikha ng mga konstruktor (default at isa na kumukuha ng parehong mga halaga) at getter/setters, at i-override ang toString()pamamaraan kung sakali, kasama ang equals()at hashCode()mga pamamaraan. Sa madaling salita, gagawin namin ang lahat ng ginagawa ng isang kagalang-galang na developer ng Java kapag gumagawa ng klase.
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;
}
}
Ngayon ay maaari na tayong magsimulang gumawa ng listahan ng mga user. Magdaragdag kami ng mga user dito, at kukuha kami ng mga user mula rito para ipakita ang mga ito. Gayunpaman, mayroon kaming isang problema. Hindi kami gumagawa ng aming mga servlet object. Ginagawa ito ng Tomcat para sa amin. Ang mga pamamaraan na na-override namin sa mga ito ay tinukoy na para sa amin, at hindi namin ma-parameter. Paano tayo lilikha ng isang nakabahaging listahan na makikita sa ating mga servlet? Kung gagawa lang kami ng list object sa bawat servlet, magdaragdag kami ng mga user sa isang listahan, ngunit magpapakita ng mga user mula sa isa pa sa ListServlet. Kaya kailangan namin ng isang bagay na ibinabahagi ng parehong mga servlet. Sa pangkalahatan, kailangan namin ng isang bagay na ibinabahagi ng lahat ng mga klase sa aming programa: isang bagay para sa buong programa. Sana ay may narinig ka tungkol sa mga pattern ng disenyo. Para sa ilang mga tao, maaaring ito ang unang tunay na pangangailangan para sa pattern ng Singleton sa kanilang programa. Maaari kang mag-wacko at mag-crank ng ilang matamis na Singleton na may double checks at synchronization (yep, ang aming application ay multithreaded, dahil ang mga Tomcat servlet ay tumatakbo sa magkahiwalay na mga thread). Ngunit gagamitin ko ang pamamaraan ng maagang pagsisimula, dahil ito ay ganap na sapat para sa aming mga layunin dito.
Paglikha ng isang modelo
Lumikha ng isang klase (at ipatupad ang pattern ng Singleton ) sa pakete ng modelo at tawagan itong hindi pangkaraniwan. Halimbawa, Modelo . Gagawa kami ng pribadong listahan ng mga user sa aming klase, at magpapatupad ng dalawang paraan: isa para magdagdag ng user, at isa pa para magbalik ng listahan ng mga string (mga username). Dahil ang aming user object ay binubuo ng isang username at password, at hindi namin gustong ibunyag ang mga password ng user, magkakaroon lang kami ng isang listahan ng mga pangalan.
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());
}
}
Medyo tungkol sa MVC
Dahil narinig mo na ang tungkol sa singleton , malamang na narinig mo na ang tungkol sa isa pang pattern ng disenyo na model-view-controller (MVC). Ang layunin nito ay paghiwalayin ang lohika ng negosyo mula sa pananaw. Iyon ay, upang paghiwalayin ang code na tumutukoy kung ano ang gagawin mula sa code na tumutukoy kung paano magpapakita ng mga bagay-bagay. Ang view ay responsable para sa kung paano ipinakita ang data. Sa aming kaso, ang mga view ay ang aming mga pahina ng JSP . Iyon mismo ang dahilan kung bakit ko inilagay ang mga ito sa isang folder na pinangalanang views . Ang modelo ay ang data na aktwal na gumagana sa programa. Sa aming kaso, ito ang mga gumagamit (listahan ng mga gumagamit). At ang mga controllers ay ang link sa pagitan nila. Kumuha sila ng data mula sa modelo at ipinapasa ito sa mga view (o kumuha ng ilang data mula sa Tomcat, iproseso ito, at ipasa ito sa modelo). Tinukoy mo ang lohika ng iyong negosyo (kung ano ang dapat gawin ng programa) sa kanila, hindi sa modelo o view. Kaya, ang bawat bahagi ay humahawak ng sarili nitong negosyo:
ang modelo ay nag-iimbak ng data;
ang mga view ay nagbibigay ng magagandang representasyon ng data;
pinangangasiwaan ng mga controllers ang pagproseso ng data.
Nagbibigay-daan ito sa programa na maging simple at mapanatili, sa halip na isang napakalaking tambak ng lahat ng code sa isang klase. Ang MVC ay hindi lamang angkop para sa web programming, ngunit madalas itong ginagamit sa lugar na ito (halos palagi). Sa aming kaso, ang mga servlet ay magsisilbing mga controller. Ito ay isang napakababaw at maikling paglalarawan ng pattern, ngunit ang MVC ay hindi ang pangunahing paksa ng artikulong ito. Kung may gustong matuto pa, kaibigan mo ang Google! Gumawa ng form para sa pagdaragdag ng user. Idagdag ang form na idadagdag.jsp . Dapat itong binubuo ng dalawang field ng text input (isang ordinaryo, ang isa — isang password field) at isang button para sa pagpapadala ng data sa server.
Dito ang form ay may katangian ng pamamaraan na may value post . Ito ay nagpapahiwatig na ang data mula sa form na ito ay mapupunta sa server bilang isang kahilingan sa POST . Ang katangian ng pagkilos ay hindi tinukoy, na nangangahulugan na ang kahilingan ay ipapadala sa parehong address kung saan kami nagmula sa pahinang ito ( /add ). Kaya, sa pagtanggap ng kahilingan sa GET , ibinabalik ng aming servlet na nakatali sa address na ito ang JSP kasama ang form ng add-user. At kung nakatanggap ito ng POST request , alam namin na ipinadala ng form ang data nito dito (na kinukuha namin mula sa request object sadoPost()paraan, proseso, at ipasa sa modelo para sa pag-save). Kapansin-pansin na ang mga input field ay may parameter na tinatawag na pangalan (para sa mga username, o pass para sa mga password). Ito ay isang napakahalagang punto. Kaya, para matanggap ang data na ito (ang username at password na ilalagay) mula sa kahilingan (sa loob ng servlet), gagamitin namin ang mga pangalan at pass field na ito. Ngunit higit pa sa na mamaya. Ang aking button para sa pagpapadala ng data ay muling ginawa bilang isang button , hindi bilang isang output field gaya ng nakaugalian. Hindi ko alam kung gaano kalawak ang paggamit ng diskarteng ito, ngunit ito ay gumagana para sa akin (Chrome browser).
Servlet na pangangasiwa ng mga kahilingan sa POST
Bumalik tayo sa AddServlet . Ipinaaalala ko sa iyo na upang payagan ang aming servlet na "mahuli" ang mga kahilingan sa GET , na-overrode namin ang doGet()pamamaraan sa klase ng HttpServlet . Upang turuan ang aming servlet na mahuli din ang mga kahilingan sa POST , dapat din nating i-override ang doPost()pamamaraan. Ipinapasa ito ng Tomcat ng katulad na kahilingan at mga bagay sa pagtugon na gagawin namin. Upang magsimula, kunin ang pangalan ng kahilingan at ipasa ang mga parameter na ipinadala ng form (kung tinukoy mo ang iba't ibang mga pangalan sa form, pagkatapos ay gamitin ang mga pangalang iyon). Pagkatapos nito, lumikha ng object ng user gamit ang natanggap na data. Pagkatapos ay makuha namin ang object ng modelo at idagdag ang nilikhang user sa modelo.
@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);
}
Pagpasa ng data sa view
Lumipat tayo sa ListServlet . Ang doGet()pamamaraan ay ipinatupad na. Naglilipat lang ito ng kontrol sa view ( list.jsp ). Kung wala ka pa nito, pagkatapos ay likhain ito sa pamamagitan ng pagkakatulad sa pamamaraan sa AddServlet . Ngayon ay magiging maganda upang makuha ang listahan ng mga username mula sa modelo at ipasa ang mga ito sa view, na tatanggap sa kanila at ipakita ang mga ito nang maganda. Upang gawin ito, muli naming gagamitin ang object ng kahilingan na natanggap namin mula sa Tomcat . Maaari tayong magdagdag ng isang katangian sa bagay na ito, na binibigyan ito ng ilang uri ng pangalan. Sa katunayan, maaari nating idagdag ang bagay na nais nating ipasa sa view. Dahil sa katotohanan na kapag naglilipat ng kontrol mula sa servlet patungo sa view, ipinapasa namin ang view sa parehong kahilingan at mga tugon na bagay na natanggap ng servlet, maaari naming idagdag ang aming listahan ng mga pangalan sa object ng kahilingan at pagkatapos ay makuha ang aming listahan ng mga username mula sa kahilingan bagay sa view. Tapos na kami sa klase ng ListServlet , kaya ipapakita ko dito ang code ng buong klase:
Oras na para tingnan ang list.jsp . Ito ay isasagawa lamang kapag inilipat ng ListServlet ang kontrol dito. Bilang karagdagan, inihanda na namin ang listahan ng mga username mula sa modelo sa servlet at ipinasa ito dito sa object ng kahilingan. Dahil mayroon kaming listahan ng mga pangalan, maaari naming ulitin ito gamit ang isang forloop at ipakita ang bawat pangalan. Tulad ng sinabi ko dati, ang mga JSP file ay maaaring magsagawa ng Java code (na siyang nagpapaiba sa kanila sa mga static na HTML na pahina). Upang magsagawa ng ilang code, ang kailangan lang nating gawin ay ilagay ang sumusunod na konstruksyon sa naaangkop na lugar:
<!-- html code -->
<%
// Java code
%>
<!-- html code -->
Sa loob ng construct na ito, nakakakuha kami ng access sa ilang variable:
kahilingan - ang aming kahilingan na bagay, na ipinasa namin mula sa servlet, kung saan ito ay simpleng tinatawag na req ;
tugon - ang object ng tugon (tinatawag na resp sa servlet);
out — isang object ng JspWriter (na nagmamana ng isang ordinaryong Manunulat ), na magagamit namin upang "magsulat" ng isang bagay nang direkta sa mismong pahina ng HTML . Ang pahayag na out.println("Hello, World!") ay halos kapareho sa System.out.println("Hello, World!") , ngunit huwag silang malito!
out.println() "nagsusulat" sa isang HTML page , habang ang System.out.println ay nagsusulat sa system output stream . Kung tatawagan mo ang System.out.println() sa loob ng isang seksyon ng JSP na may Java code , makikita mo ang mga resulta sa console ng Tomcat , ngunit hindi sa pahina.
Maaari kang maghanap ng iba pang mga bagay na magagamit sa loob ng isang JSP dito . Maaari naming gamitin ang object ng kahilingan upang maipasa ang listahan ng mga pangalan mula sa servlet (na-attach namin ang kaukulang katangian sa object na ito), at magagamit namin ang out object upang ipakita ang mga pangalang ito. Ipakita natin ang mga ito (sa ngayon, bilang isang simpleng listahan ng HTML):
<ul>
<%
List<String> names = (List<String>) request.getAttribute("userNames");
if (names != null && !names.isEmpty()) {
for (String s : names) {
out.println("<li>" + s + "</li>");
}
}
%>
</ul>
Kung kailangan lang naming ipakita ang listahan kung may mga user, at kung hindi man ay magpakita ng babala na wala pang mga user, maaari naming muling isulat ang seksyong ito nang kaunti:
<%
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>");
%>
Ngayong alam na namin kung paano magpasa ng data mula sa mga servlet patungo sa mga view, maaari naming pagbutihin ang aming AddServlet upang magpakita ito ng notification tungkol sa matagumpay na pagdaragdag ng isang user. Upang gawin ito, sa doPost()pamamaraan, pagkatapos magdagdag ng bagong user sa modelo, maaari naming idagdag ang username na ito sa mga katangian ng req object at ipasa ang kontrol pabalik sa isang view ( add.jsp ). At ngayon ay magdaragdag kami ng isang seksyon na may Java code dito, kung saan titingnan namin kung ang kahilingan ay may ganoong katangian, at kung mayroon ito — pagkatapos ay magpapakita kami ng mensahe na matagumpay na naidagdag ang user. Pagkatapos ng mga pagbabagong ito, magiging ganito ang hitsura ng buong code ng AddServlet :
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);
}
}
Dito, sa dulo ng doPost()pamamaraan ay lumikha kami ng isang katangian na may pangalan ng gumagamit na idinagdag sa modelo, at pagkatapos ay tinawag ang doGet()pamamaraan, kung saan ipinapasa namin ang kasalukuyang kahilingan at tugon. Ang doGet()pamamaraan ay naglilipat na ngayon ng kontrol sa view, na tumatanggap din ng object ng kahilingan na may pangalan ng idinagdag na user na naka-attach bilang isang katangian. Ang natitira pa nating gawin ay ayusin ang add.jsp upang maipakita nito ang notification kung walang ganoong katangian. Narito ang huling bersyon ng add.jsp :
Ang katawan ng pahina ay binubuo ng mga sumusunod:
isang div na may isang header;
isang div na lalagyan para sa nilalaman, na kinabibilangan ng pagsusuri kung mayroong isang katangian na may username;
isang div na may form ng add-user;
at sa ibaba, isang footer na may button para bumalik sa home page.
Ito ay maaaring mukhang napakaraming div, ngunit gagamitin namin ang mga ito sa ibang pagkakataon kapag nagdagdag kami ng mga istilo. Narito ang huling bersyon ng 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>
Kaya, mayroon kaming ganap na gumaganang web application na maaaring mag-save at magdagdag ng mga user, at magpakita rin ng listahan ng kanilang mga pangalan. Ngayon kailangan lang nating gawing maganda... :)
Pagdaragdag ng mga istilo. Gagamitin namin ang W3.CSS framework
Sa ngayon, gumagana ang aming application, ngunit mukhang talagang nakakatakot. Kaya, magdagdag tayo ng background, kulayan ang teksto at mga pindutan, magdagdag ng estilo sa mga listahan, ihanay ang mga elemento, magdagdag ng mga indent, at iba pa. Ang mga istilo ng pagsusulat nang manu-mano ay maaaring tumagal ng maraming oras at buwisan ang ating mga nerbiyos. Kaya ipinapanukala ko ang paggamit ng W3.CSS framework. Mayroon na itong ready-to-use na mga klase na may mga istilo. Kailangan lang nating ayusin ang mga klase ng CSS na gusto nating gamitin sa mga tamang lugar. Upang idagdag ang mga ito sa aming mga pahina, ikinonekta muna namin ang style file. Mayroong dalawang paraan upang gawin ito:
dumaan sa aming mga pahina at ipasok ang sumusunod na direktang link sa style file sa head section
Ang pagpipiliang ito ay angkop kung mayroon kang permanenteng koneksyon sa Internet. Kapag binuksan mo ang iyong mga pahina sa lokal na server, ang mga istilo ay kukunin mula sa Internet.
Ngunit kung gusto mong magkaroon ng lahat ng mga estilo nang lokal at hindi nakadepende sa isang koneksyon sa Internet, i-download ang style file at ilagay ito sa isang lugar sa loob ng web folder (hal. web/styles/w3.css ). Pagkatapos ay dumaan sa lahat ng aming mga pahina ( index.html, add.jsp, list.jsp ) at idagdag ang sumusunod na link sa style file sa loob ng head section:
<link rel="stylesheet" href="styles/w3.css">
Pagkatapos nito, dumaan lang sa mga tag at idagdag ang mga estilo na gusto mo. Hindi ko na ito tatalakayin nang detalyado. Sa halip, magbibigay lang ako ng ready-to-use na bersyon ng tatlo sa aking mga file na may mga klase sa istilong raster.
At ayun na nga. :) Kung mayroon ka pa ring mga katanungan o komento, o kung may hindi nagtagumpay, mangyaring mag-iwan ng komento. At mag-a-attach ako ng ilang mga screenshot kung paano nangyari ang lahat.
At panghuli , kung gusto mong magsanay sa proyektong ito, maaari mong subukan ang sumusunod:
gumawa ng isang servlet at JSP upang tanggalin ang isang user, at magdagdag ng isa pang pares upang i-edit ang isang umiiral na user. Ang resulta ay isang tunay na CRUD web application na binuo gamit ang mga servlet. ;)
palitan ang Listahan ng isang database, upang ang mga idinagdag na user ay hindi mawala pagkatapos ma-restart ang server. :)
GO TO FULL VERSION