การสร้างเว็บแอปพลิเคชันอย่างง่ายโดยใช้เซิร์ฟเล็ตและ jsp (ตอนที่ 1) ระดับความรู้ที่จำเป็นในการทำความเข้าใจบทความ:คุณมีความเข้าใจ Java Core ไม่มากก็น้อยอยู่แล้ว และต้องการดูเทคโนโลยี JavaEE และการเขียนโปรแกรมเว็บ จะเหมาะสมที่สุดหากคุณกำลังศึกษาภารกิจ Java Collections ซึ่งครอบคลุมหัวข้อที่ใกล้เคียงกับบทความ
![การสร้างเว็บแอปพลิเคชันอย่างง่ายโดยใช้เซิร์ฟเล็ตและ jsp (ตอนที่ 2) - 1]()
![Java-университет]()
![การสร้างเว็บแอปพลิเคชันอย่างง่ายโดยใช้ servlets และ jsp (ตอนที่ 2) - 2]()
![การสร้างเว็บแอปพลิเคชันอย่างง่ายโดยใช้ servlets และ jsp (ตอนที่ 2) - 3]()
![การสร้างเว็บแอปพลิเคชันอย่างง่ายโดยใช้ servlets และ jsp (ตอนที่ 2) - 4]()
และสุดท้าย หากคุณต้องการฝึกฝนกับโปรเจ็กต์นี้ คุณสามารถลอง:
การสร้างเอนทิตี
ใน แพ็คเกจ เอนทิตีเราจะสร้างคลาสUserและในนั้นจะมีตัวแปรสตริงส่วนตัวสองตัวชื่อและรหัสผ่าน มาสร้างคอนสตรัคเตอร์ (ค่าเริ่มต้นและอันที่จะยอมรับทั้งสองค่า), getters/setters, แทนที่เมธอด toString ()ในกรณี เช่นเดียวกับเมธอดเท่ากับ ()และhashCode () นั่นคือเราจะทำทุกอย่างที่นักพัฒนา Java ที่ดีทำเมื่อสร้างคลาส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;
}
}การสร้างแบบจำลอง
มาสร้างคลาส (และใช้ รูปแบบ Singleton ในนั้น ) ใน แพ็คเกจ โมเดลและเรียกมันว่าเป็นสิ่งที่ผิดปกติ สมมุติว่ารุ่น . มาสร้างอ็อบเจกต์รายการผู้ใช้ส่วนตัวในคลาสของเรา และใช้สองวิธี: วิธีหนึ่งเพื่อให้เราสามารถเพิ่มผู้ใช้ และวิธีที่สองเพื่อส่งคืนรายการสตริง (ชื่อผู้ใช้) เนื่องจากวัตถุผู้ใช้ของเราประกอบด้วยชื่อและรหัสผ่าน และเราไม่ต้องการ "เปิดเผย" รหัสผ่านผู้ใช้ เราจึงมีเพียงรายชื่อเท่านั้น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());
}
}เล็กน้อยเกี่ยวกับ mvc
เนื่องจากคุณเคยได้ยินเกี่ยวกับsingletonคุณคงเคยได้ยินเกี่ยวกับรูปแบบการออกแบบอื่น - MVC (model-view-controller ในภาษารัสเซีย model-view-controller หรือเหมือนกับในภาษาอังกฤษ model-view-controller) สิ่งสำคัญคือต้องแยกตรรกะทางธุรกิจออกจากการนำเสนอ นั่นคือแยกโค้ดที่กำหนดว่าต้องทำอย่างไรออกจากโค้ดที่กำหนดวิธีแสดง มุมมอง (มุมมองหรือเพียงแค่มุมมอง) มีหน้าที่รับผิดชอบในรูปแบบที่นำเสนอข้อมูลบางส่วน ในกรณีของเรา การดูคือหน้า JSP ของเรา นั่นเป็นเหตุผลที่ฉันใส่ ไว้ ในโฟลเดอร์ชื่อviews แบบจำลองคือข้อมูลจริงที่โปรแกรมทำงาน ในกรณีของเรา นี่คือผู้ใช้ (รายชื่อผู้ใช้) คอนโทรลเลอร์คือตัวเชื่อมระหว่างพวกมัน พวกเขานำข้อมูลจากโมเดลและส่งผ่านไปยังมุมมอง (หรือรับข้อมูลบางส่วนจาก Tomcat ประมวลผลและส่งผ่านไปยังโมเดล) ตรรกะทางธุรกิจ (สิ่งที่โปรแกรมควรทำ) จำเป็นต้องอธิบายไว้ในนั้น ไม่ใช่ในแบบจำลองหรือในมุมมอง ดังนั้นทุกคนจึงทำหน้าที่ของตัวเอง:
- โมเดลเก็บข้อมูล
- มุมมองดึงการนำเสนอข้อมูลที่สวยงาม
- ตัวควบคุมจัดการการประมวลผลข้อมูล
<form method="post">
<label>Name:
<input type="text" name="name"><br />
</label>
<label>Password:
<input type="password" name="pass"><br />
</label>
<button type="submit">Submit</button>
</form>กำลังประมวลผลคำขอ POST ด้วยเซิร์ฟเล็ต
กลับไปที่ เซิร์ฟเล็ต 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 ตอนนี้ คงจะดีถ้าได้รับรายการชื่อผู้ใช้จากโมเดลและส่งต่อไปยังมุมมอง ซึ่งจะรับและแสดงไว้อย่างสวยงาม เพื่อทำเช่น นี้เราจะใช้วัตถุคำขอที่เราได้รับจากTomcat อีกครั้ง เราสามารถเพิ่มแอตทริบิวต์ให้กับวัตถุนี้ โดยตั้งชื่อให้กับวัตถุนั้น และในความเป็นจริง ก็คือวัตถุนั้นเอง ซึ่งเราต้องการถ่ายโอนเพื่อดู เนื่องจากความจริงที่ว่าเมื่อถ่ายโอนกระบวนการดำเนินการจากเซิร์ฟเล็ตไปยังมุมมอง เราจะส่งคำขอและออบเจ็กต์การตอบสนองเดียวกันกับที่เซิร์ฟเล็ตนั้นได้รับ จากนั้นโดยการเพิ่มรายชื่อของเราไปยังออบเจ็กต์คำขอ เราก็สามารถทำได้จากคำขอนี้ วัตถุในมุมมองสร้างรายการชื่อผู้ใช้ของเราและรับ เราทำ คลาส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<String> names = model.list();
req.setAttribute("userNames", names);
RequestDispatcher requestDispatcher = req.getRequestDispatcher("views/list.jsp");
requestDispatcher.forward(req, resp);
}
}การรันโค้ด Java ในไฟล์ JSP
ได้เวลาเริ่มทำงานกับ ไฟล์ list.jspแล้ว มันจะดำเนินการเมื่อListServletผ่านกระบวนการดำเนินการที่นี่ เท่านั้น นอกจากนี้ ในเซิร์ฟเล็ตนั้น เราได้เตรียมรายชื่อผู้ใช้จากโมเดลแล้วส่งต่อไปที่นี่ในออบเจ็กต์คำขอ เนื่องจากเรามีรายชื่อ เราจึงสามารถวนซ้ำและพิมพ์แต่ละชื่อออกมาได้ ดังที่ฉันได้กล่าวไปแล้ว ไฟล์ jsp สามารถรันโค้ดจาวาได้ (ซึ่งทำให้ไฟล์เหล่านี้แตกต่างจากหน้า html แบบคงที่) เพื่อที่จะรันโค้ดบางอย่าง ก็เพียงพอที่จะวางโครงสร้างต่อไปนี้ในตำแหน่งที่เราต้องการ:<!-- html code -->
<%
// java code
%>
<!-- html code -->- requestคืออ็อบเจ็กต์คำขอของเรา ซึ่งเราส่งผ่านจากเซิร์ฟเล็ต ซึ่งเรียกง่ายๆ ว่าreq ;
- reponce - วัตถุตอบสนอง เรียกว่าresp ในเซิร์ฟเล็ต ;
-
outเป็นอ็อบเจ็กต์ ประเภท JspWriter (สืบทอดมาจากWriter ปกติ ) ด้วยความช่วยเหลือซึ่งเราสามารถ "เขียน" บางสิ่งลงในหน้า html ได้โดยตรง รายการout.println("Hello world!")คล้ายกับ รายการ System.out.println("Hello world!") มาก แต่อย่าสับสนทั้งสองรายการ!
out.println() “เขียน” ไปยังหน้า html และSystem.out.printlnเขียนไปยังเอาต์พุตของระบบ หากคุณเรียกใช้ เมธอด jsp System.out.println()ภายในส่วนด้วยโค้ด Java คุณจะเห็นผลลัพธ์ใน คอนโซล Tomcatไม่ใช่ในเพจ
<ul>
<%
List<String> names = (List<String>) request.getAttribute("userNames");
if (names != null && !names.isEmpty()) {
for (String s : names) {
out.println("<li>" + s + "</li>");
}
}
%>
</ul><%
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>");
%>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" %>
<html>
<head>
<title>Add new user</title>
</head>
<body>
<div>
<h1>Super app!</h1>
</div>
<div>
<%
if (request.getAttribute("userName") != null) {
out.println("<p>User '" + request.getAttribute("userName") + "' added!</p>");
}
%>
<div>
<div>
<h2>Add user</h2>
</div>
<form method="post">
<label>Name:
<input type="text" name="name"><br />
</label>
<label>Password:
<input type="password" name="pass"><br />
</label>
<button type="submit">Submit</button>
</form>
</div>
</div>
<div>
<button onclick="location.href='/'">Back to main</button>
</div>
</body>
</html>- div-a พร้อมส่วนหัว;
- div คอนเทนเนอร์สำหรับเนื้อหา จะตรวจสอบว่ามีแอตทริบิวต์ที่มีชื่อผู้ใช้อยู่หรือไม่
- div พร้อมแบบฟอร์มสำหรับเพิ่มผู้ใช้
- และส่วนท้ายมีส่วนท้ายพร้อมปุ่มเพื่อกลับไปยังหน้าหลัก
<%@ 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>การเพิ่มสไตล์ เราใช้กรอบงาน W3.CSS
ขณะนี้แอปพลิเคชันของเราใช้งานได้ แต่ก็บ้าไปแล้ว ดังนั้น เราจะเพิ่มพื้นหลัง สีของข้อความและปุ่ม รายการสไตล์ การจัดตำแหน่ง เพิ่มการเยื้อง และอื่นๆ หากคุณเขียนสไตล์ด้วยตนเอง อาจใช้เวลานานและกังวลมาก ดังนั้นฉันขอแนะนำให้ใช้เฟรมเวิร์ก W3.CSS CSS มีคลาสสำเร็จรูปพร้อมสไตล์อยู่แล้ว สิ่งที่เหลืออยู่คือการวางคลาส CSS ที่เราต้องการนำไปใช้ในตำแหน่งที่ถูกต้อง เพื่อที่จะเพิ่มมันลงในเพจของเรา ขั้นแรกเราจะรวมไฟล์ที่มีสไตล์ ซึ่งสามารถทำได้สองวิธี:-
ผ่านหน้าของเราและในส่วนหัวให้แทรกลิงก์โดยตรงไปยังไฟล์ที่มีสไตล์
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
ตัวเลือกนี้เหมาะหากคุณมีการเชื่อมต่ออินเทอร์เน็ตตลอดเวลา จากนั้น เมื่อคุณเปิดเพจของคุณบนเซิร์ฟเวอร์ภายในเครื่อง สไตล์ต่างๆ จะถูกดึงมาจากอินเทอร์เน็ต
-
หากคุณต้องการมีสไตล์ทั้งหมดภายในเครื่องและไม่ต้องอาศัยการเชื่อมต่ออินเทอร์เน็ต ให้ดาวน์โหลดไฟล์ที่มีสไตล์และวางไว้ที่ไหนสักแห่งในโฟลเดอร์เว็บ (เช่นweb/styles/w3.css ) จากนั้นทำตามขั้นตอนทั้งหมดของเรา หน้า ( index.html, add.jsp, list.jsp ) และป้อนลิงก์ไปยังไฟล์นี้พร้อมสไตล์ ภายในส่วน หัว
<link rel="stylesheet" href="styles/w3.css">
หลังจากนั้น เพียงอ่านแท็กต่างๆ และเพิ่มสไตล์ที่คุณชอบ ฉันจะไม่เน้นรายละเอียดนี้ แต่จะให้ไฟล์สามไฟล์เวอร์ชันสำเร็จรูปของฉันพร้อมคลาสสไตล์ที่จัดเรียงไว้ทันที
ดัชนี.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Super app!</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body class="w3-light-grey">
<div class="w3-container w3-blue-grey w3-opacity w3-right-align">
<h1>Super app!</h1>
</div>
<div class="w3-container w3-center">
<div class="w3-bar w3-padding-large w3-padding-24">
<button class="w3-btn w3-hover-light-blue w3-round-large" onclick="location.href='/list'">List users</button>
<button class="w3-btn w3-hover-green w3-round-large" onclick="location.href='/add'">Add user</button>
</div>
</div>
</body>
</html>เพิ่ม.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Add new user</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body class="w3-light-grey">
<div class="w3-container w3-blue-grey w3-opacity w3-right-align">
<h1>Super app!</h1>
</div>
<div class="w3-container w3-padding">
<%
if (request.getAttribute("userName") != null) {
out.println("<div class=\"w3-panel w3-green w3-display-container w3-card-4 w3-round\">\n" +
" <span onclick=\"this.parentElement.style.display='none'\"\n" +
" class=\"w3-button w3-margin-right w3-display-right w3-round-large w3-hover-green w3-border w3-border-green w3-hover-border-grey\">×</span>\n" +
" <h5>User '" + request.getAttribute("userName") + "' added!</h5>\n" +
"</div>");
}
%>
<div class="w3-card-4">
<div class="w3-container w3-center w3-green">
<h2>Add user</h2>
</div>
<form method="post" class="w3-selection w3-light-grey w3-padding">
<label>Name:
<input type="text" name="name" class="w3-input w3-animate-input w3-border w3-round-large" style="width: 30%"><br />
</label>
<label>Password:
<input type="password" name="pass" class="w3-input w3-animate-input w3-border w3-round-large" style="width: 30%"><br />
</label>
<button type="submit" class="w3-btn w3-green w3-round-large w3-margin-bottom">Submit</button>
</form>
</div>
</div>
<div class="w3-container w3-grey w3-opacity w3-right-align w3-padding">
<button class="w3-btn w3-round-large" onclick="location.href='/'">Back to main</button>
</div>
</body>
</html>รายการ.jsp
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Users list</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body class="w3-light-grey">
<div class="w3-container w3-blue-grey w3-opacity w3-right-align">
<h1>Super app!</h1>
</div>
<div class="w3-container w3-center w3-margin-bottom w3-padding">
<div class="w3-card-4">
<div class="w3-container w3-light-blue">
<h2>Users</h2>
</div>
<%
List<String> names = (List<String>) request.getAttribute("userNames");
if (names != null && !names.isEmpty()) {
out.println("<ul class=\"w3-ul\">");
for (String s : names) {
out.println("<li class=\"w3-hover-sand\">" + s + "</li>");
}
out.println("</ul>");
} else out.println("<div class=\"w3-panel w3-red w3-display-container w3-card-4 w3-round\">\n"
+
" <span onclick=\"this.parentElement.style.display='none'\"\n" +
" class=\"w3-button w3-margin-right w3-display-right w3-round-large w3-hover-red w3-border w3-border-red w3-hover-border-grey\">×</span>\n" +
" <h5>There are no users yet!</h5>\n" +
"</div>");
%>
</div>
</div>
<div class="w3-container w3-grey w3-opacity w3-right-align w3-padding">
<button class="w3-btn w3-round-large" onclick="location.href='/'">Back to main</button>
</div>
</body>
</html>
- สร้างเซิร์ฟเล็ตและ jsp เพื่อลบผู้ใช้ และอีกสองสามรายการเพื่อเปลี่ยน/แก้ไขผู้ใช้ที่มีอยู่ คุณจะได้รับเว็บแอปพลิเคชัน CrUD จริง :) บนเซิร์ฟเล็ต));
- แทนที่รายการ (รายการ) ด้วยการทำงานกับฐานข้อมูลเพื่อไม่ให้ผู้ใช้ที่เพิ่มหายไปหลังจากรีสตาร์ทเซิร์ฟเวอร์ :)
GO TO FULL VERSION