1. 需求分析

2. 概要設計

2.1 技術選型

2.2 專案結構設計(為下文的模塊結構)

2.3 User類(JavaBean)設計

2.4 UserDao(單例模式)設計

2.5 用戶資訊串列設計

2.6 添加用戶設計

2.7 修改用戶設計

2.8 洗掉用戶設計

3. 開發階段

3.1 環境搭建

3.1.1創建專案

3.1.2 配置tomcat服務器

3.1.3 匯入需要的包

3.2 前端代碼

3.2.1將 Bootstrap 相關的 css，js 兩個檔案夾復制到 web 目錄下

3.2.2首頁 index.jsp

3.2.3添加 addUser.jsp

3.2.4修改 updateUser.jsp

3.3 后端代碼

3.3.1在 src 中創建 com.work.user 包，在其中創建以下類

3.3.2 User.java(上文)

3.3.3 UserDao.java(上文)

3.2.4 addServlet.java

3.2.5 updateServlet.java

3.2.6 removeSrevlet.java

3.3配置servlet

1. 需求分析

完成一個用戶資訊管理系統（基于 BS 架構），功能如下：
- 展示用戶資訊
- 添加用戶資訊
- 洗掉用戶資訊（可以洗掉選中用戶）
- 修改用戶資訊（包括用戶資料的回顯)
效果圖如下：

用戶資訊串列:

添加用戶資訊:

洗掉用戶資訊:

修改用戶資訊:

2. 概要設計

2.1 技術選型

Tomcat 服務器
Servlet
JSP
Bootstrap
Map集合物件

2.2 專案結構設計(為下文的模塊結構)

2.3 User類(JavaBean)設計

package com.work.user;

public class User {
    private int id;
    private String grade;
    private String xh;
    private String name;
    private String department;

    public User(){

    }
    public User(int id, String grade, String xh, String name, String department) {
        this.id = id;
        this.grade = grade;
        this.xh = xh;
        this.name = name;
        this.department = department;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getGrade() {
        return grade;
    }

    public void setGrade(String grade) {
        this.grade = grade;
    }

    public String getXh() {
        return xh;
    }

    public void setXh(String xh) {
        this.xh = xh;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getDepartment() {
        return department;
    }

    public void setDepartment(String department) {
        this.department = department;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", grade='" + grade + '\'' +
                ", xh='" + xh + '\'' +
                ", name='" + name + '\'' +
                ", department='" + department + '\'' +
                '}';
    }
}

2.4 UserDao(單例模式)設計

package com.work.user;

import java.util.HashMap;
import java.util.Map;

public class UserDao {
    private static UserDao userDao;

    private UserDao(){}

    public static synchronized UserDao getInstance(){
        if(userDao == null){
            userDao = new UserDao();
        }
        return userDao;
    }

    public static Map<Integer, User> map = new HashMap<>();

    static {
        map.put(1, new User(1,"計BG192","6454111113","康玉學","曙光大資料學院"));
        map.put(2, new User(2,"管理BG202","6412129228","韓梅梅","人文藝術學院"));
        map.put(3, new User(3,"自BG192","5111239232","李蕾","電信學院"));
        map.put(4, new User(4,"會計BG182","9411118215","秦毅","人文藝術學院"));
        map.put(5, new User(5,"大資料BG171","6511239232","楊樹林","曙光大資料學院"));
        map.put(6, new User(6,"自BG192","6411117356","張三","電信學院"));
    }

    public static Map<Integer, User> getALlUser() {
        return map;
    }
    public static void deleteUser(int id){
                map.remove(id);
    }
    public static void addUser(String grade, String xh, String name, String department){
        int indexMax = map.keySet().stream().max((o1,o2) ->o1-o2).get();
        int i = indexMax+1;
        map.put(i,new User(i, grade, xh, name, department));
    }
    public static void updateUser(User user){
        Integer id = user.getId();
        map.put(id, user);
    }
}

2.5 用戶資訊串列設計

2.6 添加用戶設計

2.7 修改用戶設計

2.8 洗掉用戶設計

3. 開發階段

3.1 環境搭建

3.1.1創建專案

打開 IDEA(本文章使用的idea版本為最新版)，創建一個 Java 專案 ,一直next,創建完成后,右鍵此專案,新建一個模快,一直next,然后Fininsh,然后右鍵模塊,點擊Add Framework Support,勾選WebApplication選項.(上文提到的專案結構為模塊的結構)

3.1.2 配置tomcat服務器

3.1.3 匯入需要的包

3.2 前端代碼

3.2.1將 Bootstrap 相關的 css，js 兩個檔案夾復制到 web 目錄下

3.2.2首頁 index.jsp

<%--
  Created by IntelliJ IDEA.
  User: 康玉學
  Date: 2021/04/22 0022
  Time: 下午 7:33:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.work.user.UserDao" %>
<%@ page import="com.work.user.User" %>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap 的 CSS 檔案 -->
  <link href="bootstrap-5.0.0/css/bootstrap.min.css" rel="stylesheet" >
  <title>用戶串列</title>
  <script src="bootstrap-5.0.0/js/bootstrap.bundle.min.js"></script>
  <style type="text/css">
    td, th {
      text-align: center;
    }
  </style>
</head>
<body>
<br>
<h3 class="btn btn-info btn-lg" >用戶資訊串列</h3>
<br>
    <table class="table table-striped table-hover">
      <tr class="info">
        <th>編號</th>
        <th>院系</th>
        <th>班級</th>
        <th>學號</th>
        <th>姓名</th>
        <th>操作</th>
      </tr>
      <%
        for(User user: UserDao.getInstance().map.values()){
      %>
      <tr>
        <td><%=user.getId()%></td>
        <td><%=user.getDepartment()%></td>
        <td><%=user.getGrade()%></td>
        <td><%=user.getXh()%></td>
        <td><%=user.getName()%></td>
        <td>
          <a class="btn btn-outline-warning btn-sm" onclick="if(confirm('警告!您是否要進行修改?')==false)return false;"
             href="updateUser.jsp?id=<%=user.getId()%>&&department=<%=user.getDepartment()%>&&grade=<%=user.getGrade()%>&&xh=<%=user.getXh()%>&&name=<%=user.getName()%>">修改</a>&nbsp;
          <a class="btn btn-outline-danger btn-sm" onclick="if(confirm('危險!!!您是否要洗掉此聯系人?')==false)return false;"
             href="removeServlet?id=<%=user.getId()%>">洗掉</a>
        </td>
      </tr>
      <%}%>
      <tr>
        <td colspan="6" align="center">
          <br>
          <a class="btn btn-outline-success" href="addUser.jsp">添加聯系人</a>
        </td>
      </tr>
    </table>
</body>
</html>

3.2.3添加 addUser.jsp

<%--
  Created by IntelliJ IDEA.
  User: 康玉學
  Date: 2021/04/24 0024
  Time: 下午 5:48:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap 的 CSS 檔案 -->
    <link href="bootstrap-5.0.0/css/bootstrap.min.css" rel="stylesheet" >
    <title>添加用戶</title>
    <script src="bootstrap-5.0.0/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
    <br>
    <br>
    <h3 class="btn btn-success btn-lg" >添加用戶</h3>
    <form action="${pageContext.request.getContextPath()}/addServlet" method="post">
    <div class="form-group">
        <br>
        <label for="department">院系：</label>
        <select name="department" class="form-control" id="department">
            <option value="曙光大資料學院" selected>曙光大資料學院</option>
            <option value="電信學院">電信學院</option>
            <option value="人文藝術學院">人文藝術學院</option>
        </select>
    </div>
    <br>
    <div class="form-group">
        <label for="grade">班級：</label>
        <input type="text" class="form-control" id="grade" name="grade" placeholder="請輸入班級(如:計BG192)">
    </div>
    <br>
    <div class="form-group">
        <label for="xh">學號：</label>
        <input type="text" class="form-control" id="xh" name="xh" placeholder="請輸入學號(如:6811119213)">
    </div>
    <br>
    <div class="form-group">
        <label for="name">姓名：</label>
        <input type="text" class="form-control" id="name" name="name" placeholder="請輸入姓名(如:康玉學)">
    </div>
    <br>
    <div class="form-group" style="text-align: center">
        <input class="btn btn-outline-info" type="submit" onclick="if(confirm('您是否要提交?')==false)return false;"
                value="提交" />
        <input class="btn btn-outline-warning" type="reset" onclick="if(confirm('警告!!!您是否要重置資訊?')==false)return false;"
               value="重置" />
        <a class="btn btn-outline-success" onclick="if(confirm('溫馨提示,您是否需要回傳主頁?')==false)return false;"
           href="index.jsp">回傳</a>
    </div>
    </form>
</div>
</body>
</html>

3.2.4修改 updateUser.jsp

<%--
  Created by IntelliJ IDEA.
  User: 康玉學
  Date: 2021/04/24 0024
  Time: 下午 5:48:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap 的 CSS 檔案 -->
    <link href="bootstrap-5.0.0/css/bootstrap.min.css" rel="stylesheet" >
    <title>添加用戶</title>
    <script src="bootstrap-5.0.0/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
    <br>
    <br>
    <h3 class="btn btn-success btn-lg" >添加用戶</h3>
    <form action="${pageContext.request.getContextPath()}/addServlet" method="post">
    <div class="form-group">
        <br>
        <label for="department">院系：</label>
        <select name="department" class="form-control" id="department">
            <option value="曙光大資料學院" selected>曙光大資料學院</option>
            <option value="電信學院">電信學院</option>
            <option value="人文藝術學院">人文藝術學院</option>
        </select>
    </div>
    <br>
    <div class="form-group">
        <label for="grade">班級：</label>
        <input type="text" class="form-control" id="grade" name="grade" placeholder="請輸入班級(如:計BG192)">
    </div>
    <br>
    <div class="form-group">
        <label for="xh">學號：</label>
        <input type="text" class="form-control" id="xh" name="xh" placeholder="請輸入學號(如:6811119213)">
    </div>
    <br>
    <div class="form-group">
        <label for="name">姓名：</label>
        <input type="text" class="form-control" id="name" name="name" placeholder="請輸入姓名(如:康玉學)">
    </div>
    <br>
    <div class="form-group" style="text-align: center">
        <input class="btn btn-outline-info" type="submit" onclick="if(confirm('您是否要提交?')==false)return false;"
                value="提交" />
        <input class="btn btn-outline-warning" type="reset" onclick="if(confirm('警告!!!您是否要重置資訊?')==false)return false;"
               value="重置" />
        <a class="btn btn-outline-success" onclick="if(confirm('溫馨提示,您是否需要回傳主頁?')==false)return false;"
           href="index.jsp">回傳</a>
    </div>
    </form>
</div>
</body>
</html>

3.3 后端代碼

3.3.1在 src 中創建 com.work.user 包，在其中創建以下類

3.3.2 User.java(上文)

3.3.3 UserDao.java(上文)

3.2.4 addServlet.java

package com.work.user;

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.Map;
import javax.servlet.jsp.*;

public class addServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        req.setCharacterEncoding("utf-8");
        Map<String, String[]> pMap = req.getParameterMap();
        UserDao.addUser(pMap.get("grade")[0],pMap.get("xh")[0],pMap.get("name")[0],pMap.get("department")[0]);
        resp.getWriter().print("<script language='javascript'>alert('用戶添加成功,即將跳轉到用戶串列');window.location.href='index.jsp';</script>");
        
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        this.doGet(req, resp);
    }
}

3.2.5 updateServlet.java

package com.work.user;

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.Map;

public class updateServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        req.setCharacterEncoding("utf-8");
        Map<String, String[]> pMap = req.getParameterMap();
        User user = new User(Integer.parseInt(pMap.get("id")[0]),pMap.get("grade")[0],
                pMap.get("xh")[0],pMap.get("name")[0],pMap.get("department")[0]);
        UserDao.updateUser(user);
        resp.getWriter().print("<script language='javascript'>alert('用戶修改成功,即將跳轉到用戶串列');window.location.href='index.jsp';</script>");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        this.doGet(req, resp);
    }
}

3.2.6 removeSrevlet.java

package com.work.user;

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.Map;

public class removeServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        req.setCharacterEncoding("utf-8");
        String id = req.getParameter("id");
        UserDao.deleteUser(Integer.parseInt(id));
        resp.getWriter().print("<script language='javascript'>alert('用戶洗掉成功,即將跳轉到用戶串列');window.location.href='index.jsp';</script>");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        this.doGet(req, resp);
    }
}

3.3配置servlet

打開web目錄下的WEB-INFO下的web.xml

將下面的代碼加入<web-app></web-app>中,如:

<servlet>
        <servlet-name>addServlet</servlet-name>
        <servlet-class>com.work.user.addServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>addServlet</servlet-name>
        <url-pattern>/addServlet</url-pattern>
    </servlet-mapping>

    <servlet>
        <servlet-name>updateServlet</servlet-name>
        <servlet-class>com.work.user.updateServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>updateServlet</servlet-name>
        <url-pattern>/updateServlet</url-pattern>
    </servlet-mapping>

    <servlet>
        <servlet-name>removeServlet</servlet-name>
        <servlet-class>com.work.user.removeServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>removeServlet</servlet-name>
        <url-pattern>/removeServlet</url-pattern>
    </servlet-mapping>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/281221.html

標籤：其他

上一篇：2021-04-28

下一篇：Kafka 從基礎到高級（附圖講解）

JavaWeb經典案例--用戶資訊管理(利用Map集合物件)

1. 需求分析

2. 概要設計

2.1 技術選型

2.2 專案結構設計(為下文的模塊結構)

2.3 User類(JavaBean)設計

2.4 UserDao(單例模式)設計

2.5 用戶資訊串列設計

2.6 添加用戶設計

2.7 修改用戶設計

2.8 洗掉用戶設計

3. 開發階段

3.1 環境搭建

3.1.1創建專案

3.1.2 配置tomcat服務器

3.1.3 匯入需要的包

3.2 前端代碼

3.2.1將 Bootstrap 相關的 css，js 兩個檔案夾復制到 web 目錄下

3.2.2首頁 index.jsp

3.2.3添加 addUser.jsp

3.2.4修改 updateUser.jsp

3.3 后端代碼

3.3.1在 src 中創建 com.work.user 包，在其中創建以下類

3.3.2 User.java(上文)

3.3.3 UserDao.java(上文)

3.2.4 addServlet.java

3.2.5 updateServlet.java

3.2.6 removeSrevlet.java

3.3配置servlet