JavaRush /وبلاگ جاوا /Random-FA /ایجاد یک برنامه وب ساده با استفاده از servlets و jsp (قسم...

مرحله

Киев

28 February 2021
39 views
0 comments

ایجاد یک برنامه وب ساده با استفاده از servlets و jsp (قسمت 2)

من به شرح روند ایجاد یک برنامه وب با استفاده از servlets، jsp، Maven و Tomcat ادامه می دهم. در صورت لزوم شروع مقاله

ما موجودیت ایجاد می کنیم.

بیایید یک کلاس User در بسته entities ایجاد کنیم که در آن دو متغیر رشته خصوصی نام و رمز عبور ایجاد می کنیم. بیایید سازنده (پیش‌فرض و یکی که هر دو مقدار را می‌پذیرد)، getters/setters، متد toString() را برای هر موردی نادیده می‌گیریم، و همچنین متدهای equals() و hashCode() را ایجاد کنیم.

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; } }

اکنون می توانیم شروع به ایجاد لیستی از کاربران کنیم، جایی که کاربران خود را اضافه کرده و از آنجا آنها را برای نمایش می بریم. اما یک مشکل وجود دارد. ما اشیاء servlet خود را ایجاد نمی کنیم، تامکت آنها را برای ما ایجاد می کند. متدهایی که در آنها رد می کنیم نیز از قبل برای ما تعریف شده اند و نمی توانیم پارامتری اضافه کنیم. پس چگونه می توانیم یک لیست مشترک ایجاد کنیم که در هر دو سرور ما قابل مشاهده باشد؟ اگر به سادگی شیء لیست خود را در هر سرولت ایجاد کنیم، معلوم می شود که کاربران را به یک لیست اضافه می کنیم، اما نمایش لیستی از کاربرانی که از سرورلت ListServlet استفاده می کنند کاملاً متفاوت خواهد بود. به نظر می رسد که ما به یک شی نیاز داریم که برای هر دو سرور مشترک باشد. به طور کلی، ما به یک شی نیاز داریم که برای همه کلاس های برنامه ما مشترک باشد. تنها شی برای کل برنامه. امیدوارم در مورد الگوهای طراحی چیزی شنیده باشید. و شاید برای برخی این اولین نیاز واقعی به استفاده از قالب Singleton در برنامه خود باشد. می‌توانید خلاق باشید و با چک‌های دوگانه و همگام‌سازی، یک تک‌تنه جالب بسازید (بله، ما یک برنامه چند رشته‌ای داریم، زیرا تامکت سرولت‌ها را در رشته‌های مختلف اجرا می‌کند)، اما من از گزینه با مقداردهی اولیه استفاده خواهم کرد، زیرا در این مورد کاملا مناسب

ایجاد یک مدل.

سپس یک کلاس ایجاد می کنیم (و قالب singleton را در آن پیاده سازی می کنیم) در بسته مدل، و همچنین آن را کاملاً رنگارنگ Model می نامیم. بیایید یک شی لیست کاربر خصوصی در آن ایجاد کنیم، و دو روش ایجاد کنیم: یکی برای اینکه بتوانید یک کاربر اضافه کنید، و دوم - اجازه دهید به سادگی یک لیست از رشته ها (نام کاربری) را برگرداند. از آنجایی که شی کاربر ما از یک نام و رمز عبور تشکیل شده است، ما نمی‌خواهیم رمزهای عبور کاربر را "افشا" کنیم، بنابراین فقط فهرستی از نام آنها را برمی‌گردانیم.

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()); } }

کمی در مورد mvc

از آنجایی که شما در مورد singleton شنیده اید، به این معنی است که احتمالاً در مورد الگوی طراحی دیگری شنیده اید - MVC (model-view-controller، یا به روسی model-view-controller، یا دقیقاً مانند انگلیسی model-view-controller). ماهیت آن جدا کردن منطق تجاری از ارائه است. یعنی کدی را که تعیین می کند چه کاری انجام دهید از کدی که نحوه نمایش را تعیین می کند جدا کنید . View (نما یا فقط نماها) مسئول شکلی است که برخی از داده ها در آن ارائه می شوند. در مورد ما، نماها صفحات JSP ما هستند. به همین دلیل آنها را در پوشه ای به نام views قرار دادم. مدل داده های واقعی است که برنامه با آن کار می کند. در مورد ما، اینها کاربران هستند (لیست کاربران). خوب، کنترلرها حلقه اتصال بین آنها هستند. آنها داده ها را از مدل می گیرند و به view ها منتقل می کنند یا مقداری داده از تامکت دریافت می کنند، آن را پردازش می کنند و به مدل منتقل می کنند. منطق کسب و کار (یعنی چه باید کرد ) باید در آنها توضیح داده شود، نه در مدل یا نما. بنابراین، هر کس کار خود را انجام می دهد:

مدل داده ها را ذخیره می کند
نماها نمایش زیبایی از داده ها را ترسیم می کنند
کنترل کننده ها داده ها را پردازش می کنند

این به همه آنها اجازه می دهد تا نسبتاً ساده و قابل نگهداری باشند. و نه تخلیه هیولایی از همه کدها در یک کلاس. MVC نه تنها برای برنامه نویسی تحت وب مناسب است، بلکه هنوز هم (اگر نه همیشه) در این زمینه بسیار رایج است. در مورد ما، servlet ها به عنوان کنترل کننده عمل خواهند کرد. بله، این یک توصیف بسیار سطحی و حتی خشن از این الگو است، اما این مقاله در مورد الگوهای طراحی نیست، بلکه در مورد نحوه ساخت یک برنامه وب ساده است :) چه کسی می خواهد بیشتر بداند - گوگل همه چیز را می داند ! :) برگردیم به دیدگاه هایمان.

یک فرم برای اضافه کردن کاربر ایجاد کنید.

بیایید یک فرم به فایل add.jsp اضافه کنیم که شامل دو ورودی متن (یکی معمولی، دیگری نوع رمز عبور) و دکمه ای برای ارسال داده ها به سرور است. در اینجا فرم دارای یک ویژگی متد با مقدار post است. یعنی داده های این فرم در قالب یک درخواست POST به سرور ارسال می شود. ویژگی action مشخص نشده است، یعنی این درخواست به همان آدرسی که ما به این صفحه رفتیم (/add) می رود. بنابراین، سرور ما که به این آدرس متصل است، با دریافت درخواست GET، این jsp را با فرم اضافه کردن کاربران برمی گرداند و اگر درخواست POST دریافت کرد، این فرم داده های خود را به آنجا ارسال کرده است (که ما از آن بازیابی می کنیم. شی درخواست در متد ()doPost، آن را پردازش کرده و برای ذخیره به مدل منتقل کنید. شایان ذکر است که ورودی‌ها در اینجا یک پارامتر نام دارند (برای یک فیلد با نام دارای نام مقدار و برای یک فیلد با رمز عبور دارای مقدار پاس است). این یک نکته بسیار مهم است. از آنجایی که برای دریافت این داده ها (نام و رمز عبوری که وارد می شود) از درخواست (از قبل در داخل سرورلت)، دقیقاً از این نام و پاس استفاده می کنیم. اما در ادامه بیشتر در مورد آن. دکمه ارسال داده ها خود دوباره به شکل یک دکمه ساخته می شود، و نه ورودی، همانطور که معمولاً مرسوم است. من نمی دانم این گزینه چقدر جهانی است، اما برای من در کروم کار می کند :)


  
   Name: 
 Password:

پردازش درخواست POST با servlet.

اجازه دهید به سرور AddServlet برگردیم. ما قبلاً می دانیم که برای اینکه سرولت ما بتواند درخواست های GET را بگیرد، متد doGet() را از کلاس HttpServlet لغو می کنیم. برای آموزش سرولت ما برای گرفتن درخواست‌های POST، متد ()doPost را نیز نادیده می‌گیریم. اشیاء درخواست و پاسخ مشابهی را از Tomcat دریافت می کند که ما با آنها کار خواهیم کرد. ابتدا، بیایید پارامترهای نام و پاسی که فرم ارسال کرده است را از درخواست استخراج کنیم (اگر آنها را در فرم به شکل دیگری نامگذاری کرده اید، پس این نام هایی هستند که می نویسید). سپس با استفاده از داده های دریافتی شی کاربر خود را ایجاد می کنیم. سپس شی مدل را دریافت کرده و کاربر ایجاد شده را به مدل اضافه می کنیم.

@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); }

انتقال داده ها به نمای.

حالا بیایید به سرویس ListServlet برویم. ما قبلاً متد doGet() را پیاده سازی کرده ایم که به سادگی کنترل را به نمای list.jsp منتقل می کند. اگر هنوز این کار را ندارید، آن را با روش مشابهی از سرولت AddServlet انجام دهید. حال خوب است که لیستی از نام های کاربری را از مدل دریافت کرده و آنها را به view منتقل کنید، که آنها را در آنجا دریافت کرده و به خوبی نمایش می دهد. برای این کار دوباره از شی درخواستی که از تامکت دریافت کردیم استفاده می کنیم. ما می‌توانیم یک ویژگی به این شی اضافه کنیم و نامی به آن بدهیم و در واقع خود شی را که می‌خواهیم به view منتقل کنیم. با توجه به اینکه هنگام انتقال فرآیند اجرا از یک servlet به یک view، همان درخواست و اشیاء پاسخی را که خود سرورلت دریافت کرده است، به آنجا منتقل می کنیم، سپس با افزودن لیست نام های خود به شی درخواست، می توانیم از این درخواست استفاده کنیم. شی در view لیست نام کاربری ما را ایجاد کرده و دریافت کنید. کار ما با کلاس ListServlet تمام شده است، بنابراین کد کل کلاس در اینجا آمده است.

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); } }

اجرای کد جاوا در فایل های jsp.

حال به سراغ فایل list.jsp می رویم. این فایل فقط زمانی اجرا می شود که ListServlet فرآیند اجرا را در اینجا سپری کند. علاوه بر این، در آن servlet ما قبلاً لیستی از نام های کاربری را از مدل تهیه کرده ایم و آن را در اینجا در شی درخواست ارسال کرده ایم. با توجه به لیستی از نام ها، می توانیم یک حلقه for را از طریق آن اجرا کنیم و هر نام را چاپ کنیم. همانطور که قبلاً گفتم، فایل‌های jsp می‌توانند کد جاوا را اجرا کنند (در اصل، این چیزی است که آنها را از صفحات استاتیک html متفاوت می‌کند). برای اجرای مقداری کد کافی است که یک ساختار را در مکانی که نیاز داریم قرار دهیم.در <% // java code %> داخل چنین ساختی به چندین متغیر دسترسی داریم: request - شی درخواست ما که از servlet ارسال کردیم، جایی که به سادگی فراخوانی شد. پاسخ req - شی پاسخ، در servlet resp out نامیده می شد - یک شی از نوع JspWriter (به ارث رسیده از Writer معمولی) که با کمک آن می توانیم چیزی را مستقیماً در خود صفحه html "نوشتن" کنیم. Out.println ("سلام جهان!") بسیار شبیه System.out.println ("سلام جهان!") است، اما آنها را اشتباه نگیرید! out.println() در صفحه html و System.out.println در خروجی سیستم "نوشتن" می کند. اگر متد System.out.println() را در داخل بخش با کد jsp فراخوانی کنید، نتایج را در کنسول Tomcat خواهید دید، و نه در صفحه، همانطور که ممکن است بخواهید :) می توانید سایر اشیاء موجود را در داخل jsp جستجو کنید. اینجا . با استفاده از شی درخواست می توانیم لیست نام هایی را که از servlet ارسال شده است دریافت کنیم (ویژگی مربوطه را به این شی متصل کردیم) و با استفاده از شی out می توانیم این نام ها را نمایش دهیم. بیایید فعلاً این کار را به صورت یک لیست html انجام دهیم: اگر بخواهیم لیست را فقط در صورت وجود کاربر نمایش دهیم و در غیر این صورت هشداری مبنی بر اینکه هنوز کاربر وجود ندارد، می توانیم این بخش را کمی بازنویسی کنیم: حالا که ما نحوه انتقال داده ها از servlet ها به view ها را بدانید - می توانیم AddServlet خود را کمی بهبود دهیم تا یک اعلان در مورد اضافه شدن موفقیت آمیز یک کاربر نمایش داده شود. برای این کار در متد doPost() پس از افزودن یک کاربر جدید به مدل، می توانیم نام این کاربر را به ویژگی های شی req اضافه کنیم و کنترل را به نمای add.jsp برگردانیم. و در آن از قبل یک بخش با کد جاوا ایجاد کنید، که در آن می توانید بررسی کنید که آیا چنین ویژگی در درخواست وجود دارد یا خیر، و اگر چنین است، سپس پیامی را نشان دهید که کاربر با موفقیت اضافه شده است. پس از این تغییرات، کد کامل Servlet AddServlet چیزی شبیه به این خواهد شد: در اینجا، در انتهای متد doPost() یک ویژگی با نام کاربر اضافه شده به مدل تنظیم می کنیم و سپس doGet را فراخوانی می کنیم. ) متد، که درخواست و پاسخ فعلی را به آن ارسال می کنیم. و متد doGet() از قبل کنترل را به view منتقل می کند، جایی که یک شی درخواست را با نام کاربر اضافه شده به عنوان یک ویژگی می فرستد. باقی می ماند که خود add.jsp تصحیح شود تا در صورت وجود چنین ویژگی، چنین اعلانی را نمایش دهد. افزودن نهایی.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
    
    
     Name: 
 Password:

بدنه صفحه شامل یک div با هدر است که پس از آن یک div محفظه ای برای محتوا وجود دارد که در آن مشخص می شود که نام کاربری وجود دارد یا خیر، سپس یک div با فرمی برای افزودن کاربران و در انتها یک پاورقی با یک دکمه برای بازگشت به صفحه اصلی. ممکن است به نظر برسد که div های زیادی وجود دارد، اما بعداً وقتی استایل ها را اضافه می کنیم از آنها استفاده خواهیم کرد :) خب، نسخه نهایی list.jsp است. بنابراین ، ما یک برنامه وب کاملاً کارآمد داریم که می تواند کاربران را ذخیره و اضافه کند. به عنوان نمایش لیست نام آنها. تنها چیزی که باقی می ماند این است که آن را آراسته کنیم... :)

<%@ 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!"); %>

اضافه کردن سبک ها ما از چارچوب W3.CSS استفاده می کنیم.

در حال حاضر، برنامه ما کار می کند، اما کاملاً دیوانه کننده است :) ما باید یک پس زمینه، رنگ برای متن و دکمه ها، لیست ها را سبک سازی کنیم، تراز کردن، تورفتگی ها، به طور کلی چیزهای زیادی اضافه کنیم. اگر سبک ها را به صورت دستی بنویسید، می تواند زمان و اعصاب زیادی را بگیرد. بنابراین، پیشنهاد می کنم از چارچوب CSS W3.CSS استفاده کنید . از قبل کلاس‌های آماده با استایل‌ها دارد؛ تنها چیزی که باقی می‌ماند این است که کلاس‌های CSS را که می‌خواهیم در این مکان‌ها اعمال کنیم، در مکان‌های مناسب قرار دهیم. برای اینکه آنها را به صفحات خود اضافه کنیم، ابتدا باید یک فایل با سبک اضافه کنیم. این کار را می توان به دو صورت انجام داد: 1. صفحات ما را مرور کنید و در قسمت head یک لینک مستقیم به فایل با استایل ها وارد کنید،

این گزینه در صورتی که اتصال دائمی به اینترنت دارید مناسب است. سپس، هنگامی که صفحات خود را در یک سرور محلی باز می کنید، سبک ها از اینترنت خارج می شوند. 2. اگر می‌خواهید همه استایل‌ها را به صورت محلی داشته باشید و به اتصال اینترنت وابسته نباشید، می‌توانید به سادگی فایل را با استایل‌ها دانلود کنید و آن را در جایی داخل پوشه وب (مثلا web/styles/w3.css) قرار دهید و سپس تمام صفحات ما (index.html، add.jsp، list.jsp) را مرور کنید و یک لینک به این فایل با استایل های داخل قسمت head وارد کنید،

بعد از آن فقط تگ ها را مرور کنید و آنها را با استایل هایی که دوست دارید تگ کنید. . من در این مورد با جزئیات صحبت نخواهم کرد، اما بلافاصله نسخه های آماده سه فایل خود را با کلاس های سبک مرتب ارائه خواهم کرد. index.html add.jsp list.jsp همین :) اگر هنوز سؤالی دارید یا نظری دارید، یا برعکس، چیزی درست نمی شود - نظر بدهید. خوب، من چند اسکرین شات از آنچه که از همه اینها به دست آمد را پیوست خواهم کرد. و در نهایت. اگر می خواهید با این پروژه تمرین کنید، می توانید امتحان کنید:


  
  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
    
    
     Name: 
 Password:

<%@ 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" + "
      "); %>

یک servlet و jsp برای حذف یک کاربر و چند مورد دیگر برای تغییر/ویرایش یک کاربر موجود بسازید. شما یک برنامه وب واقعی CrUD را دریافت خواهید کرد :) در servlets))
جایگزین لیست (فهرست ) برای کار با پایگاه داده به طوری که کاربران اضافه شده پس از راه اندازی مجدد سرور ناپدید نشوند :)

موفق باشید!