JavaRush /Blog Java /Random-VI /Tạo một ứng dụng web đơn giản sử dụng servlets và jsp (ph...

Mức độ

Киев

28 February 2021
46 views
0 comments

Tạo một ứng dụng web đơn giản sử dụng servlets và jsp (phần 2)

Tạo một ứng dụng web đơn giản sử dụng servlets và jsp (phần 1) Trình độ kiến thức cần có để hiểu bài viết: bạn đã hiểu ít nhiều về Java Core và muốn tìm hiểu các công nghệ JavaEE và lập trình web. Sẽ hợp lý nhất nếu bạn hiện đang nghiên cứu nhiệm vụ Bộ sưu tập Java, bao gồm các chủ đề gần với bài viết.

Tạo thực thể

Trong gói thực thể , chúng ta sẽ tạo một lớp Người dùng và trong đó sẽ có hai biến chuỗi riêng tên và mật khẩu . Hãy tạo các hàm tạo (mặc định và một hàm sẽ chấp nhận cả hai giá trị), getters/setters, ghi đè phương thức toString() để đề phòng, cũng như các phương thức Equals() và hashCode() . Nghĩa là, chúng tôi sẽ làm mọi thứ mà một nhà phát triển Java giỏi làm khi tạo một lớp.

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

Bây giờ chúng ta có thể bắt đầu tạo danh sách người dùng. Chúng tôi sẽ thêm người dùng vào đó và chúng tôi sẽ đưa họ đi hiển thị từ đâu. Tuy nhiên, có một vấn đề. Chúng tôi không tạo các đối tượng servlet của mình, Tomcat sẽ làm điều đó cho chúng tôi . Các phương thức mà chúng tôi ghi đè trong đó cũng đã được xác định cho chúng tôi và chúng tôi không thể thêm tham số. Làm cách nào chúng tôi có thể tạo một danh sách chia sẻ hiển thị cho cả hai máy chủ của chúng tôi? Nếu chúng ta chỉ đơn giản tạo đối tượng danh sách của riêng mình trong mỗi servlet, thì chúng ta sẽ thêm người dùng vào một danh sách và hiển thị danh sách người dùng sử dụng servlet ListServlet cho một danh sách khác. Hóa ra là chúng ta cần một đối tượng chung cho cả hai servlet. Nói chung, chúng ta cần một đối tượng chung cho tất cả các lớp trong chương trình của chúng ta; đối tượng duy nhất cho toàn bộ chương trình. Tôi hy vọng bạn đã nghe điều gì đó về các mẫu thiết kế. Và có lẽ đối với một số người, đây là nhu cầu thực sự đầu tiên cần sử dụng mẫu Singleton trong chương trình của họ. Bạn có thể biến thái và tạo một số Singleton thú vị bằng cách kiểm tra và đồng bộ hóa hai lần (vâng, chúng tôi có ứng dụng đa luồng, vì Tomcat chạy các servlet trong các luồng khác nhau), nhưng tôi sẽ sử dụng tùy chọn khởi tạo sớm, vì nó khá phù hợp ở đây đủ và nó phù hợp với mục đích của chúng tôi.

Tạo mô hình

Hãy tạo một lớp (và triển khai mẫu Singleton trong đó ) trong gói mô hình và gọi nó là một cái gì đó bất thường. Giả sử Model . Hãy tạo một đối tượng danh sách người dùng riêng tư trong lớp của chúng ta và triển khai hai phương thức: một để chúng ta có thể thêm người dùng và phương thức thứ hai để trả về danh sách các chuỗi (tên người dùng). Vì đối tượng người dùng của chúng tôi bao gồm tên và mật khẩu và chúng tôi không muốn “tiết lộ” mật khẩu người dùng nên chúng tôi sẽ chỉ có danh sách tên.

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

Một chút về mvc

Vì bạn đã nghe nói về singleton , nên bạn có thể đã nghe nói về một mẫu thiết kế khác - MVC (model-view-controller, trong model-view-controller của Nga hoặc giống như trong model-view-controller của tiếng Anh). Bản chất của nó là tách logic nghiệp vụ khỏi cách trình bày. Tức là tách mã xác định việc cần làm khỏi mã xác định cách hiển thị. Chế độ xem (xem hoặc đơn giản là chế độ xem) chịu trách nhiệm về hình thức trình bày một số dữ liệu. Trong trường hợp của chúng tôi, lượt xem là các trang JSP của chúng tôi. Đó là lý do tại sao tôi đặt chúng vào một thư mục có tên lượt xem . Mô hình là dữ liệu thực tế mà chương trình hoạt động. Trong trường hợp của chúng tôi, đây là những người dùng (danh sách người dùng). Vâng, bộ điều khiển là sợi dây kết nối giữa chúng. Họ lấy dữ liệu từ mô hình và chuyển nó đến các khung nhìn (hoặc nhận một số dữ liệu từ Tomcat, xử lý và chuyển nó sang mô hình). Logic nghiệp vụ (chính xác những gì chương trình nên làm) cần được mô tả trong chúng chứ không phải trong mô hình hoặc trong khung nhìn. Vì vậy, mọi người đều làm việc riêng của mình:

mô hình lưu trữ dữ liệu;
các khung nhìn vẽ ra một cách trình bày đẹp mắt về dữ liệu;
bộ điều khiển xử lý việc xử lý dữ liệu.

Điều này cho phép chương trình khá đơn giản và dễ bảo trì, thay vì chứa một lượng lớn mã trong một lớp. MVC không chỉ phù hợp với lập trình web mà còn trong lĩnh vực này, nó đặc biệt được tìm thấy thường xuyên (hầu như luôn luôn). Trong trường hợp của chúng tôi, servlet sẽ đóng vai trò là bộ điều khiển. Đây là một mô tả rất hời hợt và ngắn gọn về mẫu, nhưng MVC không phải là chủ đề chính của bài viết này. Ai muốn biết thêm - Google sẽ giải cứu! Tạo một biểu mẫu để thêm người dùng Hãy thêm vào tệp add.jsp một biểu mẫu bao gồm hai trường nhập văn bản (một trường thông thường, trường còn lại là mật khẩu) và một nút để gửi dữ liệu đến máy chủ.

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

Ở đây biểu mẫu có thuộc tính phương thức với giá trị post . Điều này có nghĩa là dữ liệu từ biểu mẫu này sẽ được gửi đến máy chủ dưới dạng yêu cầu POST. Thuộc tính hành động không được chỉ định, có nghĩa là yêu cầu sẽ được gửi đến cùng địa chỉ nơi chúng tôi đã truy cập trang này ( /add ). Do đó, servlet của chúng tôi, được liên kết với địa chỉ này, khi nhận được yêu cầu GET, sẽ trả về jsp này cùng với biểu mẫu để thêm người dùng và nếu nó nhận được yêu cầu POST, điều đó có nghĩa là biểu mẫu đã gửi dữ liệu của nó đến đó (chúng tôi sẽ lấy từ đối tượng yêu cầu trong phương thức doPost() Điều đáng chú ý là các trường đầu vào có tham số tên (đối với trường có tên, nó có tên giá trị và đối với trường có mật khẩu, nó có giá trị pass ). Đây là một điểm khá quan trọng. Vì để có được dữ liệu này (tên và mật khẩu sẽ được nhập) từ yêu cầu (đã có trong servlet), chúng tôi sẽ sử dụng chính xác tên này và chuyển . Nhưng nhiều hơn về điều này sau. Bản thân nút gửi dữ liệu lại được tạo ở dạng nút chứ không phải dưới dạng trường đầu ra như thông lệ. Tôi không biết tùy chọn này phổ biến đến mức nào nhưng nó phù hợp với tôi (trình duyệt Chrome).

Xử lý yêu cầu POST bằng servlet

Hãy quay lại servlet AddServlet . Để tôi nhắc bạn: để servlet của chúng ta có thể “bắt” các yêu cầu GET, chúng ta đã ghi đè phương thức doGet() từ lớp HttpServlet . Để hướng dẫn servlet của chúng ta bắt các yêu cầu POST, chúng ta cũng cần ghi đè phương thức doPost() . Nó nhận được các đối tượng yêu cầu và phản hồi tương tự từ Tomcat mà chúng ta sẽ làm việc cùng. Đầu tiên, hãy trích xuất từ yêu cầu tên và truyền các tham số mà biểu mẫu đã gửi (nếu bạn đặt tên khác cho chúng trong biểu mẫu thì đó là tên bạn viết). Sau này, chúng tôi sẽ tạo đối tượng người dùng bằng cách sử dụng dữ liệu nhận được. Sau đó chúng ta sẽ lấy đối tượng mô hình và thêm người dùng đã tạo vào mô hình.

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

Truyền dữ liệu để xem

Hãy chuyển sang servlet ListServlet . Phương thức doGet() đã được triển khai ở đây , phương thức này chỉ đơn giản chuyển quyền điều khiển sang chế độ xem list.jsp . Nếu bạn chưa có cái này, hãy thực hiện bằng cách tương tự với phương thức tương tự từ servlet AddServlet . Bây giờ, thật tuyệt nếu lấy danh sách tên người dùng từ mô hình và chuyển chúng đến chế độ xem, chế độ xem này sẽ nhận và hiển thị chúng một cách đẹp mắt. Để làm điều này, chúng ta sẽ lại sử dụng đối tượng yêu cầu mà chúng ta đã nhận được từ Tomcat . Chúng ta có thể thêm một thuộc tính cho đối tượng này, đặt cho nó một số tên và trên thực tế, chính đối tượng mà chúng ta muốn chuyển sang view . Do thực tế là khi chuyển quá trình thực thi từ một servlet sang một khung nhìn, chúng ta chuyển đến đó cùng một đối tượng yêu cầu và phản hồi mà chính servlet đó đã nhận được, sau đó bằng cách thêm danh sách tên của chúng ta vào đối tượng yêu cầu, chúng ta có thể từ yêu cầu này đối tượng trong dạng xem tạo danh sách tên người dùng của chúng tôi và nhận. Chúng ta đã hoàn thành lớp ListServlet , vì vậy đây là mã cho toàn bộ lớp:

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

Thực thi mã java trong tệp jsp

Đã đến lúc bắt đầu làm việc với file list.jsp . Nó sẽ chỉ thực thi khi ListServlet vượt qua quá trình thực thi tại đây. Ngoài ra, trong servlet đó, chúng tôi đã chuẩn bị sẵn danh sách tên người dùng từ mô hình và chuyển nó vào đây trong đối tượng yêu cầu. Vì chúng ta có một danh sách các tên nên chúng ta có thể duyệt qua nó và in ra từng tên. Như tôi đã nói, các tệp jsp có thể thực thi mã java (đó là điều khiến chúng khác với các trang html tĩnh). Để thực thi một số mã, việc đặt cấu trúc sau vào vị trí chúng ta cần là đủ:

<!-- html code -->
<%
    // java code
%>
<!-- html code -->

Bên trong cấu trúc này, chúng ta có quyền truy cập vào một số biến:

request là đối tượng yêu cầu của chúng tôi, được chúng tôi truyền từ servlet, nơi nó được gọi đơn giản là req ;
responce - đối tượng phản hồi, được gọi là resp trong servlet ;
out là một đối tượng thuộc loại JspWriter (được kế thừa từ Writer thông thường ), với sự trợ giúp của nó, chúng ta có thể “viết” nội dung nào đó trực tiếp vào chính trang html. Mục nhập out.println("Xin chào thế giới!") rất giống với mục nhập System.out.println("Xin chào thế giới!") , nhưng đừng nhầm lẫn giữa hai mục này!
out.println() “ghi” vào trang html và System.out.println ghi vào đầu ra hệ thống. Nếu bạn gọi phương thức jsp System.out.println() bên trong phần có mã Java , bạn sẽ thấy kết quả trong bảng điều khiển Tomcat chứ không phải trên trang.

Bạn có thể tìm kiếm các đối tượng có sẵn khác bên trong jsp tại đây . Bằng cách sử dụng đối tượng yêu cầu , chúng ta có thể lấy danh sách các tên được truyền từ servlet (chúng ta đã đính kèm thuộc tính tương ứng vào đối tượng này) và bằng cách sử dụng đối tượng out , chúng ta có thể hiển thị các tên này. Hãy thực hiện việc này (hiện tại chỉ ở dạng danh sách html):

<ul>
    <%
        List<String> names = (List<String>) request.getAttribute("userNames");

        if (names != null && !names.isEmpty()) {
            for (String s : names) {
                out.println("<li>" + s + "</li>");
            }
        }
    %>
</ul>

Nếu bạn chỉ cần hiển thị danh sách nếu có người dùng và nếu không thì hiển thị cảnh báo rằng chưa có người dùng, chúng ta có thể viết lại phần này một chút:

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

Bây giờ chúng ta có thể chuyển dữ liệu từ servlet sang dạng xem, chúng ta có thể cải thiện một chút AddServlet của mình để thông báo được hiển thị khi người dùng được thêm thành công. Để thực hiện điều này, trong phương thức doPost() , sau khi thêm người dùng mới vào mô hình, chúng ta có thể thêm tên của người dùng này vào các thuộc tính của đối tượng req và chuyển quyền điều khiển trở lại chế độ xem add.jsp . Và trong đó đã tạo một phần có mã Java trong đó kiểm tra được thực hiện để xem liệu thuộc tính đó có trong yêu cầu hay không và nếu có thì xuất ra một thông báo cho biết người dùng đã được thêm thành công. Sau những thay đổi này, mã servlet AddServlet hoàn chỉnh sẽ trông giống như thế này:

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

Ở đây, ở cuối phương thức doPost() , chúng tôi đặt một thuộc tính có tên của người dùng được thêm vào mô hình, sau đó chúng tôi gọi phương thức doGet() để chuyển yêu cầu và phản hồi hiện tại. Và phương thức doGet() đã chuyển quyền điều khiển sang dạng xem, nơi nó gửi một đối tượng yêu cầu có tên của người dùng được thêm vào được đính kèm dưới dạng thuộc tính. Tất cả những gì còn lại là sửa add.jsp để nó hiển thị thông báo như vậy nếu có thuộc tính đó. Add.jsp cuối cùng là :

<%@ 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>

Phần thân của trang bao gồm:

div-a có tiêu đề;
div chứa nội dung, nó kiểm tra xem thuộc tính có tên người dùng có tồn tại hay không;
div với biểu mẫu để thêm người dùng;
và cuối cùng có phần chân trang có nút để quay lại trang chính.

Có vẻ như có quá nhiều div, nhưng chúng tôi sẽ sử dụng chúng sau khi thêm kiểu. List.jsp cuối cùng là:

<%@ 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>

Vì vậy, chúng tôi có một ứng dụng web hoạt động hoàn chỉnh có thể lưu trữ và thêm người dùng cũng như hiển thị danh sách tên của họ. Tất cả những gì còn lại là tô điểm cho nó... :)

Thêm phong cách. Chúng tôi sử dụng khung W3.CSS

Hiện tại, ứng dụng của chúng tôi đang hoạt động nhưng hoàn toàn điên rồ. Do đó, chúng tôi sẽ thêm nền, màu sắc của văn bản và các nút, danh sách kiểu, căn chỉnh, thêm thụt lề và những thứ tương tự. Nếu bạn viết kiểu thủ công, có thể mất rất nhiều thời gian và công sức. Vì vậy, tôi khuyên bạn nên sử dụng khung CSS W3.CSS. Nó đã có sẵn các lớp với các kiểu; tất cả những gì còn lại là đặt các lớp CSS mà chúng ta muốn áp dụng vào đúng chỗ. Để thêm chúng vào các trang của chúng tôi, trước tiên chúng tôi sẽ bao gồm một tệp có kiểu. Điều này có thể được thực hiện theo hai cách:

xem qua các trang của chúng tôi và trong phần đầu chèn một liên kết trực tiếp đến tệp có kiểu

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

Tùy chọn này phù hợp nếu bạn có kết nối Internet liên tục. Sau đó, khi bạn mở các trang của mình trên máy chủ cục bộ, các kiểu sẽ được lấy từ Internet.

Nếu bạn muốn có tất cả các kiểu cục bộ và không phụ thuộc vào kết nối Internet, hãy tải xuống tệp có kiểu và đặt nó ở đâu đó bên trong thư mục web (ví dụ: web/styles/w3.css ), sau đó xem qua tất cả các kiểu của chúng tôi. các trang ( index.html, add.jsp, list.jsp ) và nhập liên kết đến tệp này với các kiểu bên trong phần đầu

<link rel="stylesheet" href="styles/w3.css">

Sau đó, chỉ cần xem qua các thẻ và thêm các kiểu mà bạn thích. Tôi sẽ không đi sâu vào vấn đề này một cách chi tiết mà sẽ ngay lập tức đưa ra các phiên bản làm sẵn của ba tệp của tôi với các lớp kiểu được sắp xếp.

chỉ mục.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>

thêm.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>

danh sách.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>

Chỉ vậy thôi :) Nếu bạn vẫn còn thắc mắc hoặc có bất kỳ nhận xét nào, hoặc ngược lại, có gì đó không ổn - hãy để lại nhận xét. CẬP NHẬT: nếu bạn gặp vấn đề với lỗi 404 khi nhấp vào nút, mặc dù mọi thứ đã được thực hiện chính xác, có lẽ bạn nên sửa cấu hình triển khai trong ý tưởng. Để thực hiện việc này, bạn cần đi tới Chỉnh sửa cấu hình (ở trên cùng gần nút bắt đầu), chuyển đến tab Triển khai ở bên phải cửa sổ và đảm bảo rằng trong ngữ cảnh Ứng dụng, nó được chỉ định đơn giản / Chà, tôi' Tôi sẽ đính kèm một vài ảnh chụp màn hình về kết quả của tất cả những điều này.

Tạo một ứng dụng web đơn giản sử dụng servlets và jsp (phần 2) - 2

Tạo một ứng dụng web đơn giản sử dụng servlets và jsp (phần 2) - 3

Tạo một ứng dụng web đơn giản sử dụng servlets và jsp (phần 2) - 4

Và cuối cùng , nếu bạn muốn thực hành với dự án này, bạn có thể thử:

tạo một servlet và jsp để xóa một người dùng và một vài thứ khác để thay đổi/chỉnh sửa người dùng hiện có. Bạn sẽ nhận được một ứng dụng web CrUD thực sự :) trên servlets));
thay thế danh sách (Danh sách) bằng cách làm việc với cơ sở dữ liệu để người dùng đã thêm không biến mất sau khi khởi động lại máy chủ :)

Chúc may mắn!

Còn gì để đọc:

Tạo một dự án web đơn giản trong IntelliJ Idea Enterprise. Từng bước, với hình ảnh

Cuộc trò chuyện của tôi

Bình luận

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION