JavaRush /Java Blog /Random-KO /서블릿과 jsp를 사용하여 간단한 웹 애플리케이션 만들기(2부)
Стас Пасинков
레벨 26
Киев

서블릿과 jsp를 사용하여 간단한 웹 애플리케이션 만들기(2부)

Random-KO 그룹에 게시되었습니다
서블릿과 jsp를 사용하여 간단한 웹 애플리케이션 만들기(1부) 기사를 이해하는 데 필요한 지식 수준: 이미 Java Core를 어느 정도 이해했으며 JavaEE 기술과 웹 프로그래밍을 살펴보고 싶습니다. 현재 기사와 가까운 주제를 다루는 Java 컬렉션 퀘스트를 연구하고 있다면 가장 적합합니다.
서블릿과 jsp를 사용하여 간단한 웹 애플리케이션 만들기(2부) - 1

엔터티 만들기

엔터티 패키지 에는 User 클래스를 생성 하고 여기에는 두 개의 개인 문자열 변수 namepassword 가 있습니다 . 생성자(기본값과 두 값을 모두 허용하는 생성자), getter/setter를 만들고, 만일의 경우에 대비하여 toString() 메서드 와 equals()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 서블릿 을 사용하는 사용자 목록을 다른 목록에 표시하게 됩니다 . 두 서블릿 모두에 공통적인 객체가 필요하다는 것이 밝혀졌습니다. 일반적으로 말하면, 프로그램의 모든 클래스에 공통되는 객체가 필요합니다. 전체 프로그램에 대한 유일한 개체입니다. 디자인 패턴에 대해 들어보셨기를 바랍니다. 그리고 아마도 어떤 사람들에게는 이것이 그들의 프로그램에서 싱글턴 패턴을 사용해야 하는 첫 번째 실제 필요성일 것입니다. 이중 확인과 동기화를 통해 왜곡된 멋진 싱글톤을 생성할 수 있습니다 (예, Tomcat은 다른 스레드에서 서블릿을 실행하므로 다중 스레드 애플리케이션이 있습니다). 그러나 여기서는 매우 적합하므로 초기 초기화 옵션을 사용하겠습니다. 충분하고 그것은 우리의 목적에 적합합니다.

모델 만들기

모델 패키지에 클래스를 생성하고(그리고 그 안에 싱글턴 패턴을 구현함 ) 이를 특이한 이름으로 지정해 보겠습니다. Model 이라고 가정해 보겠습니다 . 클래스에 개인 사용자 목록 개체를 만들고 두 가지 메서드를 구현해 보겠습니다. 하나는 사용자를 추가할 수 있는 메서드이고 다른 하나는 문자열(사용자 이름) 목록을 반환하는 메서드입니다. 사용자 개체는 이름과 비밀번호로 구성되어 있고 사용자 비밀번호를 "공개"하고 싶지 않으므로 이름 목록만 갖게 됩니다.
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에 대해 조금

싱글톤 에 대해 들어봤으니 아마도 또 다른 디자인 패턴인 MVC (모델-뷰-컨트롤러, 러시아어 모델-뷰-컨트롤러 또는 영어 모델-뷰-컨트롤러와 유사) 에 대해 들어보셨을 것입니다 . 그 본질은 비즈니스 로직을 프리젠테이션과 분리하는 것입니다. 즉, 무엇을 할지 결정하는 코드와 표시 방법을 결정하는 코드를 분리하세요. 보기 (보기 또는 간단히 보기)는 일부 데이터가 표시되는 형식을 담당합니다. 우리의 경우 뷰는 JSP 페이지입니다. 그래서 views 라는 폴더에 넣었습니다 . 모델은 프로그램이 작동하는 실제 데이터입니다. 우리의 경우 이들은 사용자(사용자 목록)입니다. 글쎄, 컨트롤러는 그들 사이의 연결 링크입니다. 모델에서 데이터를 가져와 뷰에 전달합니다(또는 Tomcat에서 일부 데이터를 받아 처리한 후 모델에 전달합니다). 비즈니스 로직(프로그램이 정확히 무엇을 해야 하는지)은 모델이나 뷰가 아닌 여기에 설명되어야 합니다. 따라서 모든 사람은 자신의 일을 합니다.
  • 모델은 데이터를 저장합니다.
  • 뷰는 데이터를 아름답게 표현합니다.
  • 컨트롤러는 데이터 처리를 처리합니다.
이를 통해 한 클래스의 모든 코드를 엄청나게 덤프하는 대신 프로그램이 매우 간단하고 유지 관리 가능해집니다. MVC 는 웹 프로그래밍에만 적합한 것이 아니라 이 분야에서 특히 자주(거의 항상) 발견됩니다. 우리의 경우 서블릿은 컨트롤러 역할을 합니다. 이는 패턴에 대한 매우 피상적이고 간략한 설명이지만 MVC 는 이 기사의 주요 주제가 아닙니다. 더 알고 싶은 분 - Google에서 도와드리겠습니다! 사용자 추가를 위한 폼 만들기 add.jsp 파일에 두 개의 텍스트 입력 필드(하나는 일반 필드, 다른 하나는 비밀번호)와 서버로 데이터를 보내기 위한 버튼으로 구성된 폼을 추가해 보겠습니다.
<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 인 method 속성이 있습니다 . 이는 이 양식의 데이터가 POST 요청 형식으로 서버에 전송된다는 의미입니다. action 속성이 지정되지 않았습니다. 이는 요청이 이 페이지로 이동했던 것과 동일한 주소( /add ) 로 전송된다는 것을 의미합니다 . 따라서 이 주소에 바인드된 우리 서블릿은 GET 요청을 받으면 사용자 추가를 위한 양식과 함께 이 jsp를 반환하고, POST 요청을 받으면 양식이 해당 데이터를 그곳으로 보냈다는 의미입니다(우리 는 doPost() 입력 필드에 name 매개변수가 있다는 점은 주목할 가치가 있습니다 (이름이 있는 필드의 경우 name 값이 있고, 비밀번호가 있는 필드의 경우 pass 값이 있음 ). 이것은 꽤 중요한 포인트입니다. 요청(이미 서블릿 내에 있음)에서 이 데이터(입력할 이름과 비밀번호)를 가져오기 위해 정확하게 이 이름을 사용 하고 . 그러나 이에 대해서는 나중에 더 자세히 설명합니다. 데이터 전송 버튼 자체 는 일반적으로 사용되는 출력 필드가 아닌 버튼 형태로 다시 만들어집니다 . 이 옵션이 얼마나 보편적인지는 모르겠지만 제게는 효과적이었습니다(Chrome 브라우저).

서블릿으로 POST 요청 처리

AddServlet 서블릿 으로 돌아가 보겠습니다 . 다시 한번 상기시켜 드리겠습니다. 우리 서블릿이 GET 요청을 "잡을" 수 있도록 하기 위해 HttpServlet 클래스 에서 doGet() 메서드를 재정의했습니다 . 서블릿이 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 에서 받은 요청 개체를 다시 사용합니다 . 우리는 이 객체에 속성을 추가하여 이름을 부여할 수 있으며 실제로는 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<String> names = model.list();
        req.setAttribute("userNames", names);

        RequestDispatcher requestDispatcher = req.getRequestDispatcher("views/list.jsp");
        requestDispatcher.forward(req, resp);
    }
}

jsp 파일에서 Java 코드 실행

이제 list.jsp 파일 작업을 시작할 시간이다 . ListServlet이 여기에서 실행 프로세스를 전달할 때만 실행됩니다 . 또한 해당 서블릿에서는 이미 모델의 사용자 이름 목록을 준비하여 여기 요청 개체에 전달했습니다. 이름 목록이 있으므로 이를 반복하여 각 이름을 인쇄할 수 있습니다 . 이미 말했듯이 jsp 파일은 Java 코드를 실행할 수 있습니다(이것이 정적 HTML 페이지와 다른 점입니다). 일부 코드를 실행하려면 필요한 위치에 다음 구성을 배치하는 것으로 충분합니다.
<!-- html code -->
<%
    // java code
%>
<!-- html code -->
이 구조 내에서 우리는 여러 변수에 접근할 수 있습니다:
  • request 는 우리가 서블릿에서 전달한 요청 객체로, 단순히 req 라고 불렸습니다 .
  • 응답 - 서블릿에서 resp 라고 불리는 응답 객체 ;
  • out 은 JspWriter 유형 의 객체 (일반적인 Writer 에서 상속됨 )이며 이를 사용하여 HTML 페이지 자체에 직접 무언가를 "쓸" 수 있습니다. out.println("Hello world!") 항목은 System.out.println("Hello world!") 항목 과 매우 유사 하지만 둘을 혼동하지 마세요!
    out.println()은 html 페이지에 "쓰고" System.out.println은 시스템 출력에 씁니다. Java 코드가 있는 섹션 내에서 jsp 메소드 System.out.println()을 호출하면 페이지가 아닌 Tomcat 콘솔 에 결과가 표시됩니다 .

여기에서 jsp 내에서 사용 가능한 다른 개체를 찾을 수 있습니다 . request 객체를 사용하면 서블릿에서 전달된 이름 목록을 얻을 수 있고(해당 속성을 이 객체에 연결함) out 객체를 사용하면 이러한 이름을 표시할 수 있습니다. 다음을 수행해 보겠습니다(지금은 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>
사용자가 있는 경우에만 목록을 표시해야 하고, 그렇지 않으면 아직 사용자가 없다는 경고를 표시해야 하는 경우 이 섹션을 약간 다시 작성할 수 있습니다.
<%
    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;
  • 마지막에는 메인 페이지로 돌아갈 수 있는 버튼이 있는 바닥글이 있습니다.
div가 너무 많아 보일 수도 있지만 나중에 스타일을 추가할 때 활용하겠습니다. 최종 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>
따라서 우리는 사용자를 저장 및 추가하고 이름 목록을 표시할 수 있는 완벽하게 작동하는 웹 애플리케이션을 갖게 되었습니다. 남은 건 장식하는 일뿐이에요... :)

스타일을 추가합니다. 우리는 W3.CSS 프레임워크를 사용합니다.

현재 우리 애플리케이션이 작동하고 있지만 정말 미친 짓입니다. 따라서 배경, 텍스트 및 버튼 색상, 스타일 목록, 정렬, 들여쓰기 추가 등을 추가하겠습니다. 스타일을 수동으로 작성하는 경우 많은 시간과 노력이 필요할 수 있습니다. 따라서 W3.CSS CSS 프레임워크를 사용하는 것이 좋습니다. 스타일이 포함된 기성 클래스가 이미 있으므로 남은 것은 적용하려는 CSS 클래스를 올바른 위치에 배치하는 것뿐입니다. 페이지에 추가하기 위해 먼저 스타일이 포함된 파일을 포함합니다. 이 작업은 두 가지 방법으로 수행할 수 있습니다.
  1. 페이지를 살펴보고 헤드 섹션에 스타일이 포함된 파일에 대한 직접 링크를 삽입하세요.

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

    이 옵션은 인터넷에 지속적으로 연결되어 있는 경우에 적합합니다. 그런 다음 로컬 서버에서 페이지를 열면 인터넷에서 스타일을 가져옵니다.


  2. 모든 스타일을 로컬에 두고 인터넷 연결에 의존하지 않으려면 스타일이 포함된 파일을 다운로드하여 웹 폴더 (예: web/styles/w3.css ) 내부 어딘가에 배치한 다음 모든 작업을 수행하세요. 페이지( index.html, add.jsp, list.jsp )를 입력하고 헤드 섹션 내부에 스타일이 포함된 이 파일에 대한 링크를 입력하세요.

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

    그런 다음 태그를 살펴보고 원하는 스타일을 추가하세요. 나는 이것에 대해 자세히 설명하지 않을 것이지만 준비된 스타일 클래스와 함께 세 가지 파일의 기성 버전을 즉시 제공할 것입니다.

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

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

list.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를 사용하여 간단한 웹 애플리케이션 만들기(2부) - 2
서블릿과 jsp를 사용하여 간단한 웹 애플리케이션 만들기(2부) - 3
서블릿과 jsp를 사용하여 간단한 웹 애플리케이션 만들기(2부) - 4
마지막으로 이 프로젝트를 연습하고 싶다면 다음을 시도해 보세요.
  • 사용자를 삭제하기 위한 서블릿과 jsp를 만들고 기존 사용자를 변경/편집하기 위해 몇 가지를 더 만듭니다. 실제 CrUD 웹 애플리케이션을 얻을 수 있습니다 :) 서블릿에서));
  • 서버 재시작 후 추가된 사용자가 사라지지 않도록 리스트(List)를 데이터베이스 작업으로 대체합니다 :)
행운을 빌어요!
코멘트
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION