Mencipta aplikasi web mudah menggunakan servlet dan JSP (bahagian 1) Pengetahuan yang diperlukan untuk memahami artikel: Anda sudah lebih kurang memahami Java Core dan ingin melihat teknologi JavaEE dan pengaturcaraan web. Adalah paling masuk akal untuk anda sedang mengkaji pencarian Java Collections, yang memperkatakan topik yang hampir dengan artikel itu.
Mencipta entiti
Dalam pakej entiti , kami akan mencipta Userkelas yang mempunyai dua pembolehubah rentetan peribadi: nama dan kata laluan . Buat pembina (lalai dan satu yang mengambil kedua-dua nilai) dan getter/setter, dan gantikan toString()kaedah untuk berjaga-jaga, bersama-sama dengan kaedah equals()dan hashCode(). Dalam erti kata lain, kami akan melakukan semua yang dilakukan oleh pembangun Java yang dihormati semasa membuat kelas.
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;
}
}
Sekarang kita boleh mula membuat senarai pengguna. Kami akan menambahkan pengguna padanya dan membawa pengguna daripadanya untuk memaparkannya. Walau bagaimanapun, kami mempunyai satu masalah. Kami tidak mencipta objek servlet kami. Tomcat melakukan ini untuk kita. Kaedah yang kita timpa di dalamnya telah ditakrifkan untuk kita, dan kita tidak boleh parameter. Bagaimanakah kemudiannya kita membuat senarai kongsi yang akan kelihatan dalam kedua-dua servlet kita? Jika kita hanya mencipta objek senarai dalam setiap servlet, maka kita akan menambah pengguna ke satu senarai, tetapi memaparkan pengguna dari yang lain dalam ListServlet. Jadi kita memerlukan objek yang dikongsi oleh kedua-dua servlet. Secara umumnya, kami memerlukan objek yang dikongsi oleh semua kelas dalam program kami: satu objek untuk keseluruhan program. Saya harap anda pernah mendengar sesuatu tentang corak reka bentuk. Bagi sesetengah orang, ini mungkin keperluan sebenar pertama untuk corak Singleton dalam program mereka. Anda boleh pergi dan keluarkan beberapa Singleton yang manis dengan semakan dan penyegerakan berganda (ya, aplikasi kami berbilang benang, kerana servlet Tomcat dijalankan pada benang yang berasingan). Tetapi saya akan menggunakan teknik permulaan awal, kerana ia sepenuhnya mencukupi untuk tujuan kita di sini.
Mencipta model
Buat kelas (dan laksanakan corak Singleton ) dalam pakej model dan panggil ia sesuatu yang luar biasa. Contohnya, Model . Kami akan membuat senarai peribadi pengguna dalam kelas kami dan melaksanakan dua kaedah: satu untuk menambah pengguna dan satu lagi untuk mengembalikan senarai rentetan (nama pengguna). Memandangkan objek pengguna kami terdiri daripada nama pengguna dan kata laluan, dan kami tidak mahu mendedahkan kata laluan pengguna, kami hanya akan mempunyai senarai nama.
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());
}
}
Sedikit tentang MVC
Memandangkan anda telah pun mendengar tentang singleton , anda mungkin pernah mendengar tentang model-view-controller (MVC) corak reka bentuk yang lain. Tujuannya adalah untuk memisahkan logik perniagaan daripada pandangan. Iaitu, untuk memisahkan kod yang menentukan perkara yang perlu dilakukan daripada kod yang menentukan cara memaparkan barangan. Pandangan bertanggungjawab untuk cara data dibentangkan . Dalam kes kami, paparan adalah halaman JSP kami . Itulah sebabnya saya meletakkannya dalam folder bernama views . Model ialah data yang sebenarnya berfungsi dengan program. Dalam kes kami, ini ialah pengguna (senarai pengguna). Dan pengawal adalah penghubung antara mereka. Mereka mengambil data daripada model dan menyampaikannya kepada pandangan (atau mendapatkan beberapa data daripada Tomcat, memprosesnya dan menyerahkannya kepada model). Anda mentakrifkan logik perniagaan anda (apa yang perlu dilakukan oleh program) di dalamnya, bukan dalam model atau pandangan. Oleh itu, setiap bahagian mengendalikan perniagaannya sendiri:
model menyimpan data;
pandangan memberikan gambaran yang indah bagi data;
pengawal mengendalikan pemprosesan data.
Ini membolehkan program menjadi agak mudah dan boleh diselenggara, dan bukannya timbunan besar semua kod dalam satu kelas. MVC bukan sahaja sesuai untuk pengaturcaraan web, tetapi ia digunakan terutamanya dalam kawasan ini (hampir selalu). Dalam kes kami, servlet akan bertindak sebagai pengawal. Ini adalah penerangan yang sangat cetek dan ringkas tentang corak, tetapi MVC bukanlah topik utama artikel ini. Jika sesiapa ingin mengetahui lebih lanjut, Google ialah rakan anda! Buat borang untuk menambah pengguna. Tambahkan borang untuk add.jsp . Ia harus terdiri daripada dua medan input teks (satu biasa, satu lagi - medan kata laluan) dan butang untuk menghantar data ke pelayan.
Di sini borang mempunyai atribut kaedah dengan siaran nilai . Ini menunjukkan bahawa data daripada borang ini akan pergi ke pelayan sebagai permintaan POST . Atribut tindakan tidak dinyatakan, yang bermaksud permintaan akan dihantar ke alamat yang sama yang kami datang ke halaman ini dari ( /add ). Oleh itu, apabila menerima permintaan GET , servlet kami yang terikat pada alamat ini mengembalikan JSP dengan borang pengguna tambahan. Dan jika ia menerima permintaan POST , maka kami tahu borang menghantar datanya di sini (yang kami ekstrak daripada objek permintaan dalamdoPost()kaedah, proses dan hantar ke model untuk disimpan). Perlu diingat bahawa medan input mempunyai parameter yang dipanggil nama (untuk nama pengguna, atau pas untuk kata laluan). Ini adalah perkara yang sangat penting. Oleh itu, untuk menerima data ini (nama pengguna dan kata laluan yang akan dimasukkan) daripada permintaan (di dalam servlet), kami akan menggunakan medan nama dan laluan ini . Tetapi lebih lanjut mengenai itu kemudian. Butang saya untuk menghantar data sekali lagi dibuat sebagai butang , bukan sebagai medan output seperti biasa. Saya tidak tahu sejauh mana pendekatan ini digunakan secara meluas, tetapi ia berfungsi untuk saya (pelayar Chrome).
Servlet pengendalian permintaan POST
Mari kembali ke AddServlet . Saya mengingatkan anda bahawa untuk membenarkan servlet kami "menangkap" permintaan GET , kami mengatasi doGet()kaedah dalam kelas HttpServlet . Untuk mengajar servlet kami untuk menangkap permintaan POST , kami juga mesti mengatasi doPost()kaedah tersebut. Tomcat memberikannya permintaan dan objek respons yang serupa yang akan kami gunakan. Untuk memulakan, ekstrak nama permintaan dan lulus parameter yang dihantar oleh borang (jika anda menyatakan nama yang berbeza dalam borang, kemudian gunakan nama tersebut). Selepas itu, buat objek pengguna menggunakan data yang diterima. Kemudian kami mendapat objek model dan menambah pengguna yang dibuat pada 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);
}
Menghantar data ke paparan
Mari kita beralih ke ListServlet . Kaedah tersebut doGet()telah pun dilaksanakan. Ia hanya memindahkan kawalan ke paparan ( list.jsp ). Jika anda belum mempunyai ini lagi, buatnya dengan analogi dengan kaedah dalam AddServlet . Sekarang adalah baik untuk mendapatkan senarai nama pengguna daripada model dan menyerahkannya ke paparan, yang akan menerimanya dan memaparkannya dengan cantik. Untuk melakukan ini, kami sekali lagi akan menggunakan objek permintaan yang kami terima daripada Tomcat . Kita boleh menambah atribut pada objek ini, memberikannya beberapa jenis nama. Malah, kita boleh menambah objek yang ingin kita hantar ke paparan. Disebabkan fakta bahawa apabila memindahkan kawalan dari servlet ke paparan, kami menghantar paparan permintaan dan objek respons yang sama yang diterima oleh servlet, kami boleh menambah senarai nama kami ke objek permintaan dan kemudian mendapatkan senarai nama pengguna kami daripada permintaan objek dalam pandangan. Kami telah selesai dengan kelas ListServlet , jadi saya akan membentangkan kod keseluruhan kelas di sini:
Sudah tiba masanya untuk melihat list.jsp . Ia hanya akan dilaksanakan apabila ListServlet memindahkan kawalan kepadanya. Di samping itu, kami telah menyediakan senarai nama pengguna daripada model dalam servlet dan menyampaikannya di sini dalam objek permintaan. Memandangkan kami mempunyai senarai nama, kami boleh mengulanginya menggunakan forgelung dan memaparkan setiap nama. Seperti yang saya katakan sebelum ini, fail JSP boleh melaksanakan kod Java (yang menjadikannya berbeza daripada halaman HTML statik). Untuk melaksanakan beberapa kod, semua yang perlu kita lakukan ialah meletakkan binaan berikut di tempat yang sesuai:
<!-- html code -->
<%
// Java code
%>
<!-- html code -->
Dalam binaan ini, kami mendapat akses kepada beberapa pembolehubah:
permintaan - objek permintaan kami, yang kami lalui dari servlet, di mana ia hanya dipanggil req ;
respons - objek tindak balas (dipanggil resp dalam servlet);
out — objek JspWriter (yang mewarisi Writer biasa ), yang boleh kita gunakan untuk "menulis" sesuatu terus ke dalam halaman HTML itu sendiri. Pernyataan out.println("Hello, World!") sangat serupa dengan System.out.println("Hello, World!") , tetapi jangan mengelirukan mereka!
out.println() "menulis" ke halaman HTML , manakala System.out.println menulis ke aliran keluaran sistem . Jika anda memanggil System.out.println() dalam bahagian JSP dengan kod Java , anda akan melihat hasilnya dalam konsol Tomcat , tetapi tidak pada halaman.
Anda boleh mencari objek lain yang tersedia dalam JSP di sini . Kita boleh menggunakan objek permintaan untuk mendapatkan senarai nama yang diluluskan daripada servlet (kami melampirkan atribut yang sepadan dengan objek ini), dan kami dapat menggunakan objek keluar untuk memaparkan nama-nama ini. Mari kita paparkannya (buat masa ini, sebagai senarai HTML mudah):
<ul>
<%
List<String> names = (List<String>) request.getAttribute("userNames");
if (names != null && !names.isEmpty()) {
for (String s : names) {
out.println("<li>" + s + "</li>");
}
}
%>
</ul>
Jika kita perlu memaparkan senarai hanya jika terdapat pengguna, dan sebaliknya memaparkan amaran bahawa tiada pengguna lagi, maka kita boleh menulis semula bahagian ini sedikit:
<%
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>");
%>
Kini setelah kami tahu cara menghantar data daripada servlet kepada paparan, kami boleh menambah baik AddServlet kami supaya ia memaparkan pemberitahuan tentang penambahan pengguna yang berjaya. Untuk melakukan ini, dalam doPost()kaedah, selepas menambah pengguna baharu pada model, kita boleh menambah nama pengguna ini pada atribut objek req dan lulus kawalan kembali ke paparan ( add.jsp ). Dan sekarang kami akan menambah bahagian dengan kod Java padanya, di mana kami akan menyemak sama ada permintaan itu mempunyai atribut sedemikian, dan jika ia berlaku — maka kami akan memaparkan mesej bahawa pengguna telah berjaya ditambahkan. Selepas perubahan ini, kod penuh AddServlet akan kelihatan seperti ini:
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);
}
}
Di sini, pada penghujung kaedah doPost()kami mencipta atribut dengan nama pengguna yang telah ditambahkan pada model, dan kemudian memanggil kaedah doGet(), yang kami lulus permintaan dan respons semasa. Kaedah ini doGet()kini memindahkan kawalan ke paparan, yang juga menerima objek permintaan dengan nama pengguna tambahan dilampirkan sebagai atribut. Apa yang perlu kami lakukan ialah membetulkan add.jsp supaya ia memaparkan pemberitahuan jika tiada atribut sedemikian. Berikut ialah versi akhir add.jsp :
bekas div untuk kandungan, yang termasuk semakan sama ada atribut dengan nama pengguna wujud;
div dengan borang pengguna tambahan;
dan di bahagian bawah, pengaki dengan butang untuk kembali ke halaman utama.
Ini mungkin kelihatan seperti terlalu banyak div, tetapi kami akan menggunakannya kemudian apabila kami menambah gaya. Berikut ialah versi terakhir 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>
Oleh itu, kami mempunyai aplikasi web yang berfungsi sepenuhnya yang boleh menyimpan dan menambah pengguna, dan juga memaparkan senarai nama mereka. Sekarang kita hanya perlu menjadikannya cantik… :)
Menambah gaya. Kami akan menggunakan rangka kerja W3.CSS
Pada masa ini, aplikasi kami berfungsi, tetapi ia kelihatan sangat keterlaluan. Jadi, mari tambah latar belakang, warnakan teks dan butang, tambah gaya pada senarai, sejajarkan elemen, tambah inden dan sebagainya. Gaya penulisan secara manual boleh mengambil banyak masa dan membebankan saraf kita. Jadi saya cadangkan menggunakan rangka kerja W3.CSS . Ia sudah mempunyai kelas sedia untuk digunakan dengan gaya. Kami hanya perlu mengatur kelas CSS yang ingin kami gunakan di tempat yang betul. Untuk menambahkannya pada halaman kami, kami mula-mula menyambungkan fail gaya. Terdapat dua cara untuk melakukan ini:
pergi melalui halaman kami dan masukkan pautan terus berikut ke fail gaya di bahagian kepala
Pilihan ini sesuai jika anda mempunyai sambungan Internet kekal. Apabila anda membuka halaman anda pada pelayan tempatan, gaya akan ditarik dari Internet.
Tetapi jika anda ingin mempunyai semua gaya secara setempat dan tidak bergantung pada sambungan Internet, muat turun fail gaya dan letakkannya di suatu tempat di dalam folder web (cth web/styles/w3.css ). Kemudian pergi ke semua halaman kami ( index.html, add.jsp, list.jsp ) dan tambahkan pautan berikut ke fail gaya di dalam bahagian kepala :
<link rel="stylesheet" href="styles/w3.css">
Selepas itu, hanya pergi melalui tag dan tambah gaya yang anda suka. Saya tidak akan membincangkan perkara ini secara terperinci. Sebaliknya, saya hanya akan menyediakan versi sedia untuk digunakan bagi tiga fail saya dengan kelas gaya raster.
Dan itu sahaja. :) Jika anda masih mempunyai sebarang soalan atau komen, atau jika ada yang tidak berjaya, sila tinggalkan komen. Dan saya akan melampirkan beberapa tangkapan skrin bagaimana semuanya berlaku.
Dan akhirnya , jika anda ingin berlatih dengan projek ini, anda boleh mencuba perkara berikut:
buat servlet dan JSP untuk memadam pengguna, dan tambah pasangan lain untuk mengedit pengguna sedia ada. Hasilnya akan menjadi aplikasi web CRUD tulen yang dibina menggunakan servlet. ;)
gantikan Senarai dengan pangkalan data, supaya pengguna yang ditambahkan tidak hilang selepas pelayan dimulakan semula. :)
GO TO FULL VERSION