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（模型-視圖-控制器，俄語中的模型-視圖-控制器，或者就像英語中的模型-視圖-控制器）。其本質是將業務邏輯與表示分開。也就是說，將決定要做什麼的程式碼與決定如何顯示的程式碼分開。視圖（視圖或簡稱視圖）負責某些資料的呈現形式。在我們的例子中，視圖是我們的 JSP 頁面。這就是為什麼我將它們放在一個名為“views”的資料夾中。 模型是程式運行時使用的實際數據。在我們的例子中，這些是用戶（用戶列表）。那麼，控制器就是它們之間的連接紐帶。它們從模型中獲取數據並將其傳遞給視圖（或從 Tomcat 接收一些數據，對其進行處理並將其傳遞給模型）。業務邏輯（程式到底應該做什麼）需要在其中描述，而不是在模型或視圖中。於是，每個人都做自己的事： 
 
模型儲存資料；
 
視圖繪製了資料的漂亮表示；
 
控制器負責資料處理。
 這使得程式相當簡單且可維護，而不是一個類別中所有程式碼的巨大轉儲。 MVC不僅適用於 Web 編程，而且在這個領域中它的身影尤其頻繁（幾乎總是）。在我們的例子中，Servlet 將充當控制器。這是對該模式的非常膚淺和簡短的描述，但MVC不是本文的主要主題。誰想了解更多 - 谷歌來救援！建立用於新增使用者的表單 讓我們在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 )。因此，綁定到該位址的 servlet 在收到 GET 請求後，會傳回此 jsp 以及用於新增使用者的表單，如果它收到 POST 請求，則表示該表單已將其資料傳送到那裡（我們將從doPost() 值得注意的是，輸入字段有一個名稱參數（對於具有名稱的字段，它具有值 name ，對於具有密碼的字段，它具有值pass）。這是非常重要的一點。因為為了從請求（已經在 servlet 內部）獲取這些資料（將輸入的名稱和密碼），我們將準確使用這些名稱和pass。但稍後會詳細介紹。用於發送資料的按鈕本身再次以按鈕的形式製作，而不是像通常習慣那樣作為輸出欄位。我不知道這個選項有多通用，但它對我有用（Chrome 瀏覽器）。 
使用 servlet 處理 POST 請求
讓我們回到AddServlet servlet 。讓我提醒您：為了讓我們的 servlet 能夠「捕獲」GET 請求，我們重寫了HttpServlet類別中的doGet()方法。為了教導我們的 servlet 也捕捉 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 servlet 。這裡已經實作了doGet()方法，它只是將控制權轉移到list.jsp視圖。如果您還沒有，請使用AddServlet servlet 中的相同方法進行類別推。現在，最好從模型中獲取使用者名稱清單並將它們傳遞給視圖，視圖將接收它們並很好地顯示它們。為此，我們將再次使用從Tomcat收到的請求物件。我們可以為這個物件添加一個屬性，給它一些名稱，事實上，我們想要將其傳輸到view 的物件本身。由於以下事實：當將執行程序從 servlet 轉移到視圖時，我們將 servlet 本身接收到的相同請求和響應對象傳遞給那裡，然後透過將名稱列表新增至請求對象，我們就可以從該請求視圖中的物件創建我們的用戶名列表並獲取。我們已經完成了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經過這裡的執行流程時才會執行。此外，在該 servlet 中，我們已經從模型中準備了使用者名稱列表，並將其傳遞到請求物件中。由於我們有一個名稱列表，因此我們可以循環遍歷它並列印每個名稱。正如我已經說過的，jsp 檔案可以執行 java 程式碼（這就是它們與靜態 html 頁面的不同之處）。為了執行一些程式碼，將以下結構放在我們需要的地方就足夠了： 
<!-- html code -->
    // java code
<!-- html code -->
在這個構造中，我們可以存取幾個變數：
 
request是我們的請求對象，我們從 servlet 傳遞它，在這裡它被簡單地稱為req；
 
responce - 回應對象，在 servlet 中稱為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對象，我們可以獲得從 servlet 傳遞的名稱列表（我們將相應的屬性附加到該對象），並且使用out對象，我們可以顯示這些名稱。讓我們這樣做（現在只是以 html 列表的形式）： 
        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>");
%>
 現在我們可以將資料從 servlet 傳遞到視圖，我們可以稍微改進AddServlet，以便在成功新增使用者時顯示通知。為此，在doPost()方法中，將新使用者新增至模型後，我們可以將該使用者的名稱新增至req物件的屬性中，並將控制權傳遞回add.jsp視圖。其中已經建立了一個包含 Java 程式碼的部分，其中檢查請求中是否存在這樣的屬性，如果存在，則輸出一則訊息，表示使用者已成功新增。經過這些變更後，完整的AddServlet servlet 程式碼將如下所示： 
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" %>
        <title>Add new user</title>
    </head>
            <h1>Super app!</h1>
        </div>
                if (request.getAttribute("userName") != null) {
                    out.println("<p>User '" + request.getAttribute("userName") + "' added!</p>");
                    <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>
            <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" %>
        <title>Users</title>
    </head>
            <h1>Super app!</h1>
        </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>
            <button onclick="location.href='/'">Back to main</button>
        </div>
    </body>




    

</html>
 因此，我們有一個完全運行的 Web 應用程序，可以儲存和添加用戶，以及顯示他們的姓名列表。剩下的就是修飾它......:) 
新增樣式。我們使用W3.CSS框架
目前我們的應用程式正在運行，但絕對瘋狂。因此，我們將新增背景、文字和按鈕的顏色、樣式清單、對齊、新增縮排等。如果您手動編寫樣式，可能會花費大量時間和精力。因此，我建議使用W3.CSS CSS框架。它已經有了帶有樣式的現成類別；剩下的就是將我們想要應用的 CSS 類別放置在正確的位置。為了將它們添加到我們的頁面中，首先我們將包含一個帶有樣式的文件。這可以透過兩種方式完成： 
  
瀏覽我們的頁面，並在頭部插入帶有樣式的文件的直接鏈接
  
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  
如果您有持續的互聯網連接，則此選項適合。然後，當您在本機伺服器上開啟頁面時，樣式將從 Internet 中提取。
  
如果您想在本地擁有所有樣式而不依賴 Internet 連接，請下載帶有樣式的檔案並將其放置在 web資料夾中的某個位置（例如web/styles/w3.css），然後瀏覽我們的所有樣式頁面（index.html、add.jsp、list.jsp）並輸入指向此文件的鏈接，並在head部分中使用樣式
  
<link rel="stylesheet" href="styles/w3.css">
  
之後，只需瀏覽標籤並添加您喜歡的樣式即可。我不會詳細討論這一點，但會立即提供我的三個文件的現成版本以及已安排的樣式類別。
索引.html
<!DOCTYPE html>
<html lang="en">
        <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" %>
        <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" %>
        <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 錯誤的問題，儘管一切都已正確完成，也許您應該更正 idea 中的部署配置。為此，您需要轉到“編輯配置”（位於頂部靠近“開始”按鈕的位置），轉到視窗右側的“部署”選項卡，並確保在“應用程式”上下文中簡單地指示它/嗯，我'我會附上幾張截圖來說明這一切的結果。 
最後 ，如果你想練習這個項目，你可以嘗試： 
 
製作一個 servlet 和 jsp 來刪除用戶，並製作幾個來更改/編輯現有用戶。您將獲得一個真正的 CrUD Web 應用程式 :) 在 servlet 上））；
 
將清單（List）替換為使用資料庫，以便新增的使用者在重新啟動伺服器後不會消失:)
祝你好運！ 
          JavaRush 是幫助您從零開始學習 Java 程式設計的線上課程。這個課程是讓初學者成為 Java 大師的完美途徑。內容有 1200+ 個任務，並為您即時驗證，還提供 Java 基礎理論中不可不知的內容。為了讓你在學習上取得成功，我們實作了一系列激勵性功能，像是小測驗、編碼專案，還有關於高效學習以及 Java 開發人員職涯的內容。