การสร้างเอนทิตี
ใน แพ็คเกจ เอนทิตีเราจะสร้างคลาส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;
}
}
ตอนนี้เราสามารถเริ่มสร้างรายชื่อผู้ใช้ได้แล้ว เราจะเพิ่มผู้ใช้เข้าไป และเราจะพาพวกเขาไปแสดงจากที่ใด อย่างไรก็ตามมีปัญหาหนึ่งประการ เราไม่ได้สร้างวัตถุเซิร์ฟเล็ตของเราTomcat ทำเพื่อ เรา วิธีการที่เราแทนที่นั้นได้ถูกกำหนดไว้สำหรับเราแล้วเช่นกัน และเราไม่สามารถเพิ่มพารามิเตอร์ได้ แล้วเราจะสร้างรายการที่ใช้ร่วมกันที่เซิร์ฟเล็ตของเราทั้งสองมองเห็นได้อย่างไร? หากเราสร้างรายการออบเจ็กต์ของเราเองในแต่ละเซิร์ฟเล็ต ปรากฎว่าเราจะเพิ่มผู้ใช้ลงในรายการหนึ่ง และแสดงรายชื่อผู้ใช้ที่ใช้เซิร์ฟเล็ตListServletไปยังอีกรายการหนึ่ง ปรากฎว่าเราต้องการวัตถุที่จะเหมือนกันกับเซิร์ฟเล็ตทั้งสอง โดยทั่วไปแล้ว เราต้องการอ็อบเจ็กต์ที่จะเหมือนกันกับทุกคลาสในโปรแกรมของเรา วัตถุเดียวสำหรับทั้งโปรแกรม ฉันหวังว่าคุณจะเคยได้ยินบางอย่างเกี่ยวกับรูปแบบการออกแบบ และบางที สำหรับบางคน นี่อาจเป็นความต้องการที่แท้จริงประการแรกในการใช้ รูปแบบ ซิงเกิลตันในโปรแกรมของพวกเขา คุณสามารถบิดเบือนและสร้างSingletonสุดเจ๋งได้ด้วยการตรวจสอบซ้ำและการซิงโครไนซ์ (ใช่ เรามีแอปพลิเคชันแบบมัลติเธรดเนื่องจาก Tomcat รันเซิร์ฟเล็ตในเธรดที่แตกต่างกัน) แต่ฉันจะใช้ตัวเลือกกับการเริ่มต้นตั้งแต่เนิ่นๆ เนื่องจากมันค่อนข้างเหมาะสมที่นี่ เพียงพอและเหมาะสมกับจุดประสงค์ของเรา
การสร้างแบบจำลอง
มาสร้างคลาส (และใช้ รูปแบบ 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 ไม่ได้ระบุ แอตทริบิวต์actionซึ่งหมายความว่าคำขอจะถูกส่งไปยังที่อยู่เดียวกับที่เราไปที่หน้านี้ ( /add ) ดังนั้น เซิร์ฟเล็ตของเราซึ่งเชื่อมโยงกับที่อยู่นี้ เมื่อได้รับคำขอ GET จะส่งคืน jsp นี้พร้อมกับแบบฟอร์มสำหรับการเพิ่มผู้ใช้ และหากได้รับการร้องขอ POST แสดงว่าแบบฟอร์มนั้นส่งข้อมูลไปที่นั่น (ซึ่งเราจะดึงมาจาก ขอวัตถุในเมธอด doPost() เป็นที่น่าสังเกตว่าฟิลด์อินพุตมี พารามิเตอร์ ชื่อ (สำหรับฟิลด์ที่มีชื่อจะมีชื่อค่าและสำหรับฟิลด์ที่มีรหัสผ่านจะมีค่าpass ) นี่เป็นจุดสำคัญทีเดียว เนื่องจากเพื่อรับข้อมูลนี้ (ชื่อและรหัสผ่านที่จะป้อน) จากคำขอ (อยู่ในเซิร์ฟเล็ตแล้ว) เราจะใช้ชื่อและรหัสผ่าน เหล่านี้ทุกประการ แต่จะเพิ่มเติมในภายหลัง ปุ่มสำหรับการส่งข้อมูลนั้นถูกสร้างขึ้นอีกครั้งในรูปแบบของปุ่มและไม่ใช่เป็นฟิลด์เอาต์พุตตามปกติ ฉันไม่รู้ว่าตัวเลือกนี้เป็นสากลแค่ไหน แต่ใช้งานได้สำหรับฉัน (เบราว์เซอร์ Chrome)
กำลังประมวลผลคำขอ 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>");
%>
ตอนนี้เราสามารถส่งข้อมูลจากเซิร์ฟเล็ตไปยังมุมมองได้แล้ว เราสามารถปรับปรุงAddServlet ของเราได้เล็กน้อย เพื่อให้การแจ้งเตือนปรากฏขึ้นเมื่อเพิ่มผู้ใช้สำเร็จ เมื่อต้องการทำเช่นนี้ ใน เมธอด doPost()หลังจากเพิ่มผู้ใช้ใหม่ให้กับโมเดลแล้ว เราก็สามารถเพิ่มชื่อของผู้ใช้รายนี้ให้กับแอตทริบิวต์ของออบเจ็กต์reqและส่งการควบคุมกลับไปยัง มุม มองadd.jsp และในนั้นได้สร้างส่วนที่มีโค้ด Java ซึ่งมีการตรวจสอบเพื่อดูว่าแอตทริบิวต์ดังกล่าวอยู่ในคำขอหรือไม่ และหากเป็นเช่นนั้น ให้แสดงข้อความระบุว่าเพิ่มผู้ใช้สำเร็จแล้ว หลังจากการเปลี่ยนแปลงเหล่านี้ โค้ดเซิร์ฟเล็ต 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);
}
}
ที่นี่ ในตอนท้ายของเมธอด doPost()เราตั้งค่าแอตทริบิวต์ด้วยชื่อของผู้ใช้ที่เพิ่มเข้าไปในโมเดล หลังจากนั้นเราจะเรียกเมธอดdoGet()ซึ่งเราจะส่งคำขอและการตอบกลับปัจจุบันไป และ เมธอด doGet()ได้ถ่ายโอนการควบคุมไปยังมุมมองแล้ว โดยจะส่งออบเจ็กต์คำขอพร้อมแนบชื่อของผู้ใช้ที่เพิ่มไว้เป็นแอตทริบิวต์ สิ่งที่เหลืออยู่คือการแก้ไขadd.jspเพื่อให้แสดงการแจ้งเตือนหากมีแอตทริบิวต์ดังกล่าวอยู่ add.jsp สุดท้ายคือ :
<%@ 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>
เพียงเท่านี้ :) หากคุณยังคงมีคำถามหรือมีความคิดเห็นใด ๆ หรือตรงกันข้าม มีบางอย่างไม่ได้ผล - แสดงความคิดเห็น UPD: หากคุณมีปัญหากับข้อผิดพลาด 404 เมื่อคลิกปุ่ม แม้ว่าทุกอย่างถูกต้องแล้ว บางทีคุณควรแก้ไขการกำหนดค่าการปรับใช้ตามแนวคิดนี้ ในการดำเนินการนี้ คุณต้องไปที่แก้ไขการกำหนดค่า (ที่ด้านบนใกล้กับปุ่มเริ่มต้น) ไปที่แท็บการปรับใช้ทางด้านขวาของหน้าต่างและตรวจสอบให้แน่ใจว่าในบริบทของแอปพลิเคชันนั้นระบุไว้อย่างง่าย ๆ / ฉัน จะแนบภาพหน้าจอสองสามภาพเกี่ยวกับสิ่งที่เกิดขึ้นทั้งหมดนี้



- สร้างเซิร์ฟเล็ตและ jsp เพื่อลบผู้ใช้ และอีกสองสามรายการเพื่อเปลี่ยน/แก้ไขผู้ใช้ที่มีอยู่ คุณจะได้รับเว็บแอปพลิเคชัน CrUD จริง :) บนเซิร์ฟเล็ต));
- แทนที่รายการ (รายการ) ด้วยการทำงานกับฐานข้อมูลเพื่อไม่ให้ผู้ใช้ที่เพิ่มหายไปหลังจากรีสตาร์ทเซิร์ฟเวอร์ :)
GO TO FULL VERSION