JavaRush /Java Blog /Random-TL /Paglikha ng isang simpleng web application gamit ang mga ...
fatfaggy
Antas
Киев

Paglikha ng isang simpleng web application gamit ang mga servlet at jsp (bahagi 2)

Nai-publish sa grupo
Patuloy kong inilalarawan ang proseso ng paglikha ng isang web application gamit ang mga servlet, jsp, Maven at Tomcat. Simula ng artikulo , kung kinakailangan.
Lumilikha kami ng mga entity.
Gumawa tayo ng klase ng User sa package ng mga entity, kung saan gagawa tayo ng dalawang pribadong string variable na pangalan at password. Gumawa tayo ng mga constructor (default at isa na tatanggap ng parehong value), getter/setters, i-override ang toString() method kung sakali, pati na rin ang equals() at hashCode() na mga pamamaraan. 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 kaming magsimulang gumawa ng listahan ng mga user, kung saan namin idaragdag ang aming mga user, at mula sa kung saan namin sila dadalhin para ipakita. Pero may problema. Hindi kami gumagawa ng aming mga servlet object; Nilikha sila ng Tomcat para sa amin. Ang mga pamamaraan na na-override namin sa mga ito ay tinukoy na rin para sa amin at hindi kami makakapagdagdag ng parameter. Paano tayo makakagawa ng isang karaniwang listahan na makikita sa pareho ng ating mga servlet? Kung gagawa lang kami ng sarili naming list object sa bawat servlet, lalabas na kami ay magdaragdag ng mga user sa isang listahan, ngunit ang pagpapakita ng listahan ng mga user gamit ang ListServlet servlet ay magiging ganap na naiiba. Lumalabas na kailangan namin ng isang bagay na magiging karaniwan sa parehong mga servlet. Sa pangkalahatan, kailangan namin ng isang bagay na magiging karaniwan sa lahat ng klase sa aming programa; ang tanging bagay para sa buong programa. Sana ay may narinig ka tungkol sa mga pattern ng disenyo. At marahil para sa ilan ito ang unang tunay na pangangailangan na gamitin ang template ng Singleton sa kanilang programa. Maaari kang maging malikhain at gumawa ng ilang mga cool na singleton, na may mga dobleng pagsusuri at pag-synchronize (oo, mayroon kaming isang multi-threaded na application, dahil ang Tomcat ay nagpapatakbo ng mga servlet sa iba't ibang mga thread), ngunit gagamitin ko ang opsyon na may maagang pagsisimula, dahil sa kasong ito ito medyo angkop.
Paglikha ng isang modelo.
Pagkatapos ay gagawa kami ng klase (at ipapatupad ang singleton template dito) sa package ng modelo, at tatawagin din namin itong medyo makulay na Model. Gumawa tayo ng isang pribadong user list object sa loob nito, at gumawa ng dalawang pamamaraan: isa para makapagdagdag ka ng user, at ang pangalawa - hayaan itong magbalik lamang ng isang listahan ng mga string (mga user name). Dahil ang aming object ng user ay binubuo ng isang pangalan at password, hindi namin nais na "ibunyag" ang mga password ng user, kaya magbabalik lamang kami ng isang listahan ng kanilang mga pangalan. public class Model { private static Model instance = new Model(); private List model; public static Model getInstance() { return instance; } private Model() { model = new ArrayList<>(); } public void add(User user) { model.add(user); } public List list() { return model.stream() .map(User::getName) .collect(Collectors.toList()); } }
Medyo tungkol sa mvc.
Dahil narinig mo ang tungkol sa singleton, nangangahulugan ito na malamang na narinig mo na ang tungkol sa isa pang pattern ng disenyo - MVC (model-view-controller, o sa Russian model-view-controller, o tulad ng sa English na model-view-controller). Ang kakanyahan nito ay ang paghiwalayin ang lohika ng negosyo mula sa pagtatanghal. Ibig sabihin, paghiwalayin ang code na tumutukoy kung ano ang gagawin mula sa code na tumutukoy kung paano ipapakita ang . Ang View (view o view lang) ay responsable para sa form kung saan ipinakita ang ilang data. Sa aming kaso, ang mga view ay ang aming mga pahina ng JSP. Kaya naman inilagay ko sila sa isang folder na tinatawag na views. Ang modelo ay ang aktwal na data kung saan gumagana ang programa. Sa aming kaso, ito ay mga user (listahan ng mga user). Well, ang mga controllers ay ang connecting link sa pagitan nila. Kinukuha nila ang data mula sa modelo at inililipat ito sa mga view, o nakatanggap sila ng ilang data mula sa Tomcat, pinoproseso ito at inilipat ito sa modelo. Ang lohika ng negosyo (iyon ay, kung ano ang gagawin ) ay dapat na inilarawan sa kanila, at hindi sa modelo o sa view. Kaya, ang bawat isa ay gumagawa ng kanilang sariling bagay:
  • ang modelo ay nag-iimbak ng data
  • Ang mga view ay gumuhit ng magandang representasyon ng data
  • ang mga controllers ay nagpoproseso ng data
Ito ay nagpapahintulot sa kanilang lahat na maging medyo simple at mapanatili. At hindi isang napakalaking dump ng lahat ng code sa isang klase. Ang MVC ay hindi lamang angkop para sa web programming, ngunit ito ay karaniwan pa rin (kung hindi palaging) sa lugar na ito. Sa aming kaso, ang mga servlet ay magsisilbing mga controller. Oo, ito ay isang napakababaw at kahit na magaspang na paglalarawan ng pattern na ito, ngunit ang artikulong ito ay hindi tungkol sa mga pattern ng disenyo, ngunit tungkol sa kung paano gumawa ng isang simpleng web application :) Sino ang gustong malaman ang higit pa - Alam ng Google ang lahat ! :) Balik tayo sa ating mga pananaw.
Lumikha ng isang form para sa pagdaragdag ng isang user.
Magdagdag tayo ng form sa add.jsp file, na binubuo ng dalawang text input (isang regular, ang isa ay uri ng password) at isang button para sa pagpapadala ng data sa server. Narito ang form ay may katangian ng pamamaraan na may value post. Nangangahulugan ito na ang data mula sa form na ito ay ipapadala sa server sa anyo ng isang kahilingan sa POST. Ang katangian ng pagkilos ay hindi tinukoy, na nangangahulugang ang kahilingang ito ay mapupunta sa parehong address kung saan kami nagpunta sa pahinang ito (/add). Kaya, ang aming servlet, na nakatali sa address na ito, sa pagtanggap ng kahilingan sa GET, ay ibinabalik ang jsp na ito kasama ang form para sa pagdaragdag ng mga user, at kung nakatanggap ito ng kahilingan sa POST, ipinadala ng form na ito ang data nito doon (na kukunin namin mula sa ang request object sa doPost() method , iproseso ito at ilipat ito sa modelo para sa pag-save). Ito ay nagkakahalaga na tandaan na ang mga input ay may isang parameter ng pangalan dito (para sa isang patlang na may isang pangalan ito ay may pangalan ng halaga, at para sa isang patlang na may isang password mayroon itong pass ng halaga). Ito ay isang medyo mahalagang punto. Dahil upang makuha ang data na ito (pangalan at password na ilalagay) mula sa kahilingan (nasa loob na ng servlet), gagamitin namin ang eksaktong mga pangalan at pass na ito. Ngunit higit pa sa na mamaya. Ang pindutan para sa pagpapadala ng data mismo ay muling ginawa sa anyo ng isang pindutan, at hindi isang pag-input, gaya ng karaniwang kaugalian. Hindi ko alam kung gaano unibersal ang opsyong ito, ngunit gumagana ito para sa akin sa Chrome :)
Pagproseso ng kahilingan sa POST gamit ang isang servlet.
Bumalik tayo sa AddServlet servlet. Alam na namin na para magawa ng aming servlet na "mahuli" ang mga kahilingan sa GET, i-override namin ang paraan ng doGet() mula sa klase ng HttpServlet. Upang turuan ang aming servlet na mahuli din ang mga kahilingan sa POST, i-override din namin ang doPost() na pamamaraan. Nakatanggap ito ng katulad na kahilingan at mga bagay sa pagtugon mula sa Tomcat, na gagawin namin. Una, kunin natin mula sa kahilingan ang pangalan at ipasa ang mga parameter na ipinadala ng form (kung iba ang pangalan mo sa kanila sa form, iyon ang mga pangalang isusulat mo). Pagkatapos ay gagawa kami ng aming object ng user gamit ang natanggap na data. Pagkatapos ay makukuha natin 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); }
Paglilipat ng data sa view.
Ngayon ay lumipat tayo sa ListServlet servlet. Naipatupad na namin ang paraan ng doGet(), na naglilipat lamang ng kontrol sa view ng list.jsp. Kung wala ka pa nito, gawin ito sa pamamagitan ng pagkakatulad sa parehong paraan mula sa AddServlet servlet. Ngayon ay mainam na makakuha ng isang listahan ng mga username mula sa modelo at ipasa ang mga ito sa view, na tatanggap sa kanila doon at maipapakita ang mga ito nang maganda. Upang gawin ito, muli naming gagamitin ang object ng kahilingan na natanggap namin mula sa Tomcat. Maaari kaming magdagdag ng isang katangian sa bagay na ito, binibigyan ito ng ilang pangalan at, sa katunayan, ang mismong bagay na gusto naming ilipat sa view. Dahil sa katotohanan na kapag inililipat ang proseso ng pagpapatupad mula sa isang servlet patungo sa isang view, ipinapasa namin doon ang parehong kahilingan at mga object ng tugon na natanggap mismo ng servlet, pagkatapos ay sa pamamagitan ng pagdaragdag ng aming listahan ng mga pangalan sa object ng kahilingan, maaari naming mula sa kahilingang ito object sa view lumikha ng aming listahan ng mga user name at kumuha. Tapos na kami sa klase ng ListServlet, kaya narito ang code para sa buong klase. package app.servlets; 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; import java.util.List; public class ListServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { Model model = Model.getInstance(); List names = model.list(); req.setAttribute("userNames", names); RequestDispatcher requestDispatcher = req.getRequestDispatcher("views/list.jsp"); requestDispatcher.forward(req, resp); } }
Pagpapatupad ng java code sa mga jsp file.
Ngayon ay lumipat tayo sa list.jsp file. Ang file na ito ay isasagawa lamang kapag ang ListServlet ay pumasa sa proseso ng pagpapatupad dito. Bilang karagdagan, sa servlet na iyon ay naghanda na kami ng listahan ng mga user name mula sa modelo at ipinasa ito dito sa object ng kahilingan. Dahil sa listahan ng mga pangalan, maaari tayong magpatakbo ng for loop sa pamamagitan nito at i-print ang bawat pangalan. Tulad ng nasabi ko na, ang mga jsp file ay maaaring magsagawa ng java code (sa prinsipyo, ito ang nagpapaiba sa kanila sa mga static na html na pahina). Upang maisakatuparan ang ilang code, sapat na upang maglagay ng konstruksiyon sa lugar na kailangan namin. <% // java code %> Sa loob ng naturang konstruksiyon, nakakakuha kami ng access sa ilang mga variable: kahilingan - ang aming object ng kahilingan, na ipinasa namin mula sa servlet, kung saan ito ay tinawag na tugon ng req - ang object ng tugon, sa Ang servlet ay tinawag na resp out - isang bagay ng uri ng JspWriter (minana mula sa karaniwang Manunulat), sa tulong kung saan maaari tayong "magsulat" ng isang bagay nang direkta sa mismong pahina ng html. Ang Out.println("Hello world!") ay halos kapareho sa System.out.println("Hello world!"), ngunit huwag silang lituhin! out.println() "nagsusulat" sa html page, at System.out.println - sa output ng system. Kung tatawagan mo ang System.out.println() na pamamaraan sa loob ng seksyon na may jsp code, makikita mo ang mga resulta sa Tomcat console, at hindi sa page, ayon sa gusto mo :) Maaari kang maghanap ng iba pang magagamit na mga bagay sa loob ng jsp dito . Gamit ang object ng kahilingan maaari naming makuha ang listahan ng mga pangalan na naipasa mula sa servlet (na-attach namin ang kaukulang katangian sa object na ito), at gamit ang out object maaari naming ipakita ang mga pangalan na ito. Gawin natin ito sa ngayon sa simpleng anyo ng isang listahan ng html: Kung gusto nating ipakita lamang ang listahan kapag may mga gumagamit, at kung hindi man ay magpakita ng babala na wala pang mga gumagamit, maaari nating muling isulat ang seksyong ito nang kaunti: Ngayon na tayo alam kung paano maglipat ng data mula sa mga servlet patungo sa mga view - maaari naming pagbutihin ang aming AddServlet nang kaunti upang may maipakitang notification tungkol sa matagumpay na pagdaragdag ng isang user. Upang gawin ito, sa doPost() na pamamaraan, pagkatapos magdagdag ng bagong user sa modelo, maaari naming idagdag ang pangalan ng user na ito sa mga katangian ng req object at ipasa ang kontrol pabalik sa add.jsp view. At sa loob nito ay gumawa na ng isang seksyon na may Java code, kung saan maaari mong suriin kung ang naturang katangian ay nasa kahilingan, at kung gayon, pagkatapos ay magpakita ng isang mensahe na ang user ay matagumpay na naidagdag. Pagkatapos ng mga pagbabagong ito, ang kumpletong code ng AddServlet servlet ay magmumukhang ganito: Dito, sa dulo ng doPost() method, nagtakda kami ng attribute na may pangalan ng user na idinagdag sa modelo, at pagkatapos ay tawagan ang doGet( ) na paraan, kung saan ipinapasa namin ang kasalukuyang kahilingan at tugon. At ang paraan ng doGet() ay naglilipat na ng kontrol sa view, kung saan nagpapadala ito ng object ng kahilingan na may nakalakip na pangalan ng idinagdag na user bilang attribute. Nananatili itong iwasto ang add.jsp mismo upang maipakita nito ang naturang notification kung mayroong ganoong katangian. Panghuling add.jsp
    <% List names = (List ) request.getAttribute("userNames"); if (names != null && !names.isEmpty()) { for (String s : names) { out.println("
  • " + s + "
  • "); } } %>
<% List names = (List ) request.getAttribute("userNames"); if (names != null && !names.isEmpty()) { out.println(" "); for (String s : names) { out.println("
  • " + s + "
  • "); } out.println("
    "); } else out.println("

    There are no users yet!

    "); %>
    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); } } <%@ page contentType="text/html;charset=UTF-8" language="java" %> Add new user

    Super app!

    <% if (request.getAttribute("userName") != null) { out.println("

    User '" + request.getAttribute("userName") + "' added!

    "); } %>

    Add user

    Ang katawan ng pahina ay binubuo ng isang div na may isang header, na sinusundan ng isang div na lalagyan para sa nilalaman, sinusuri kung ang isang katangian na may username ay umiiral dito, pagkatapos ay isang div na may isang form para sa pagdaragdag ng mga user, at sa dulo ay isang footer na may isang pindutan upang bumalik sa pangunahing pahina. Maaaring mukhang napakaraming div, ngunit gagamitin namin ang mga ito sa ibang pagkakataon kapag nagdagdag kami ng mga istilo :) Well, ang panghuling bersyon ay list.jsp. Kaya , mayroon kaming ganap na gumaganang web application na maaaring mag-imbak at magdagdag ng mga user, pati na rin bilang nagpapakita ng isang listahan ng kanilang mga pangalan. Ang natitira na lang ay pagandahin ito... :) <%@ page import="java.util.List" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> Users

    Super app!

    Users

    <% List names = (List ) request.getAttribute("userNames"); if (names != null && !names.isEmpty()) { out.println(" "); for (String s : names) { out.println("
  • " + s + "
  • "); } out.println("
    "); } else out.println("

    There are no users yet!

    "); %>
    Pagdaragdag ng mga istilo. Ginagamit namin ang W3.CSS framework.
    Sa ngayon, gumagana ang aming application, ngunit talagang nakakabaliw :) Kailangan naming magdagdag ng background, mga kulay para sa teksto at mga pindutan, i-istilo ang mga listahan, gawin ang pagkakahanay, magdagdag ng mga indent, sa pangkalahatan ng maraming bagay. Kung manu-mano kang sumulat ng mga istilo, maaaring tumagal ito ng maraming oras at nerbiyos. Samakatuwid, iminumungkahi ko ang paggamit ng CSS framework W3.CSS . Mayroon na itong mga nakahandang klase na may mga istilo; ang natitira na lang ay ilagay sa mga tamang lugar ang mga klase ng CSS na gusto naming ilapat sa mga lugar na ito. Upang maidagdag ang mga ito sa aming mga pahina, kailangan muna naming magsama ng isang file na may mga istilo. Magagawa ito sa dalawang paraan: 1. dumaan sa aming mga pahina at sa head section maglagay ng direktang link sa file na may mga istilo. Ang pagpipiliang ito ay angkop kung mayroon kang patuloy na koneksyon sa Internet. Pagkatapos, kapag binuksan mo ang iyong mga pahina sa isang lokal na server, ang mga istilo ay kukunin mula sa Internet. 2. Kung gusto mong magkaroon ng lahat ng mga estilo nang lokal at hindi umaasa sa isang koneksyon sa Internet, maaari mong i-download lang ang file na may mga istilo at ilagay ito sa isang lugar sa loob ng web folder (halimbawa web/styles/w3.css), at pagkatapos dumaan sa lahat ng aming mga pahina (index.html, add.jsp, list.jsp) at maglagay ng link sa file na ito na may mga istilo sa loob ng head section. Pagkatapos nito, dumaan lang sa mga tag at i-tag ang mga ito ng mga estilo na gusto mo . Hindi ko ito tatalakayin nang detalyado, ngunit agad kong ibibigay ang aking mga handa na bersyon ng aking tatlong mga file na may nakaayos na mga klase ng istilo. index.html add.jsp list.jsp Iyon lang :) Kung mayroon ka pa ring anumang mga tanong o may anumang mga komento, o sa kabaligtaran, may hindi nagtagumpay - mag-iwan ng komento. Well, mag-attach ako ng ilang screenshot ng kung ano ang lumabas sa lahat ng ito. At sa wakas. Kung gusto mong magsanay sa proyektong ito, maaari mong subukan ang: Super app!

    Super app!

    <%@ page contentType="text/html;charset=UTF-8" language="java" %> Add new user

    Super app!

    <% if (request.getAttribute("userName") != null) { out.println("
    \n" + " ×\n" + "
    User '" + request.getAttribute("userName") + "' added!
    \n" + "
    "); } %>

    Add user

    <%@ page import="java.util.List" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> Users list

    Super app!

    Users

    <% List names = (List ) request.getAttribute("userNames"); if (names != null && !names.isEmpty()) { out.println("
      "); for (String s : names) { out.println("
    • " + s + "
    • "); } out.println("
    "); } else out.println("
    \n" + " ×\n" + "
    There are no users yet!
    \n" + "
    "); %>
    Home page ng application Magdagdag ng window ng user isang listahan ng mga gumagamit
    • gumawa ng isang servlet at jsp upang tanggalin ang isang user at ilang higit pa upang baguhin/i-edit ang isang umiiral na user. Makakakuha ka ng isang tunay na CrUD web application :) sa mga servlet))
    • palitan ang listahan (List ) upang gumana sa database upang hindi mawala ang mga idinagdag na user pagkatapos ma-restart ang server :)
    Good luck!
    Mga komento
    TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
    GO TO FULL VERSION