天天看點
傳回

JavaWeb中Servlet+jsp+JDBC完成登入注冊界面文章目錄​​前言一、登入注冊思路二、前端頁面三、後端代碼總結

文章目錄​​

前言

一、登入注冊思路

二、前端頁面

1.Login

2.Register

3.UserList界面

三、後端代碼

1.封裝實體類User類

2.Login對應的Servlet（驗證資訊功能）

3.Register對應的Servlet（增加功能）

4.工具類（DbUtil）

5.properties檔案格式及所在目錄

6.使用者清單（查詢功能） 

總結

前言

例如：學習javaweb過程筆記，遇到了較多錯誤，整理一下思路

一、登入注冊思路

1、前端頁面（登入+注冊）

2、根據前端元素創造實體類

3、連接配接背景代碼（jsp發送post請求到Servlet，添加注解，完成功能開發）

4、設計工具類，使用JDBC連接配接資料庫，使用properties檔案存儲私有資料

二、前端頁面

1.Login

代碼如下（示例）： 

        其中action使用了EL表達式，${}内的内容表示絕對路徑，（/Login）是一級目錄，對應了Servlet中@webServlet中URLPatterns中的路徑。此時，form表單發送的是post請求，則在Servlet内應重寫doPost方法

<%--
  Created by IntelliJ IDEA.
  User: limerence
  Date: 2022/11/14
  Time: 15:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登入</title>
    <link href="../css/login.css" target="_blank" rel="external nofollow"  rel="stylesheet">
</head>
<body>
<div id="loginDiv">
    <form action="${pageContext.request.contextPath}/Login" id="form" method="post">
        <h1 id="loginMsg">LOGIN IN</h1>
        <p>Username:<input id="username" name="username" type="text"></p>

        <p>Password:<input id="password" name="password" type="password"></p>

        <div id="subDiv">
            <input type="submit" class="button" value="login up">
            <input type="reset" class="button" value="reset">&nbsp;&nbsp;&nbsp;
            <a href="register.jsp" target="_blank" rel="external nofollow" >沒有賬号？點選注冊</a>
        </div>
    </form>
</div>
</body>
</html>
JavaWeb中Servlet+jsp+JDBC完成登入注冊界面文章目錄​​前言一、登入注冊思路二、前端頁面三、後端代碼總結

2.Register

代碼如下（示例）： 

        需要注意的是，action與login一樣，使用了EL表達式，同為post請求。

<%--
  Created by IntelliJ IDEA.
  User: limerence
  Date: 2022/11/16
  Time: 10:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"
         pageEncoding="UTF-8" %>
<html>
<head>
    <title>注冊界面</title>
    <style>
        body {
            background-size: cover;
            background-image: url("../imgs/1.jpg");
        }
    </style>
</head>
<body>
<div class="form-div">
    <div class="reg-content">
        <h1>歡迎注冊</h1>
    </div>
    <form id="reg-form" action="${pageContext.request.contextPath}/Register" method="post">
        <table>
            <tr>
                <td>使用者名：</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                </td>
            </tr>

            <tr>
                <td>密碼：</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                </td>
            </tr>

            <tr>
                <td>确認密碼：</td>
                <td class="inputs">
                    <input name="password1" type="password" id="password1">
                </td>
            </tr>

            <tr>
                <td>性别：</td>
                <td class="inputs">
                    <input type="radio" id="male" name="gender" value="男">男
                    <input type="radio" id="female" name="gender" value="女">女
                </td>
            </tr>

            <tr>
                <td>職業：</td>
                <td class="inputs">
                    <select id="group" name="profession">
                        <option value="測試">測試</option>
                        <option value="前端">前端</option>
                        <option value="後端">後端</option>
                        <option value="經理">經理</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>興趣愛好：</td>
                <td class="inputs">
                    <select name="favor" id="favor">
                        <option value="音樂">音樂</option>
                        <option value="舞蹈">舞蹈</option>
                        <option value="繪畫">繪畫</option>
                        <option value="寫作">寫作</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>個人說明：</td>
                <td class="inputs">
                    <form>
                        <textarea name="description" rows="10" cols="20">請輸入</textarea>
                    </form>
                </td>
            </tr>
        </table>

        <div class="buttons">
            <input value="注 冊" type="submit" id="reg_btn">
            <a href="loginFromMysql.jsp" target="_blank" rel="external nofollow" >已有賬号？去登入吧</a>
        </div>
        <br class="clear">
    </form>

</div>
</body>
</html>
JavaWeb中Servlet+jsp+JDBC完成登入注冊界面文章目錄​​前言一、登入注冊思路二、前端頁面三、後端代碼總結

3.UserList界面

 說明：首先該頁面做到的功能有從資料庫内查詢資料，并以表格形式呈現，以及可以跳轉删除和查詢的功能。

        其中，顯示資料庫資料，用c:forEach進行了查詢，EL表達式内的UserList為list封裝的user對象。

<a href="${pageContext.request.contextPath}/UserDel.do?userId=${user.userId}" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >删除</a>

删除部分的超連結，主要是為了傳參數

檢視部分功能已經完善

文章末尾進行補充

<%--
  Created by IntelliJ IDEA.
  User: limerence
  Date: 2022/10/20
  Time: 11:33
  To change this template use File | Settings | File Templates.
--%>
<%@page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<table >
    <tr>
        <td>編号</td>
        <td>使用者名</td>
        <td>操作列</td>
    </tr>
    <c:forEach items="${userList}" var="user" varStatus="row">
        <tr>
            <td>${row.index + 1}</td>
            <td>${user.username}</td>
<%--            傳參--%>
            <td><a href="${pageContext.request.contextPath}/UserDel.do?userId=${user.userId}" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >删除</a>
<a href="${pageContext.request.contextPath}/UserView.do?userId=${user.userId}" target="_blank" rel="external nofollow" >檢視</a> </td>
        </tr>
    </c:forEach>
</table>
</body>
</html>
JavaWeb中Servlet+jsp+JDBC完成登入注冊界面文章目錄​​前言一、登入注冊思路二、前端頁面三、後端代碼總結

三、後端代碼

1.封裝實體類User類

根據界面的屬性（或資料庫）寫出User類，定義屬性以及getter和setter方法 
package cn.cqie.pojo;

import java.util.Date;

public class User {
    private int userId;
    private String username;
    private String password;
    private String password1;
    private String favor;
    private String gender;
    private String description;
    private String profession;
    private Date joinDate;

    public int getUserId() {
        return userId;
    }

    public void setUserId(int userId) {
        this.userId = userId;
    }
    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getPassword1() {
        return password1;
    }

    public void setPassword1(String password1) {
        this.password1 = password1;
    }

    public String getFavor() {
        return favor;
    }

    public void setFavor(String favor) {
        this.favor = favor;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public String getProfession() {
        return profession;
    }

    public void setProfession(String profession) {
        this.profession = profession;
    }

    public Date getJoinDate() {
        return joinDate;
    }

    public void setJoinDate(Date joinDate) {
        this.joinDate = joinDate;
    }
}

2.Login對應的Servlet（驗證資訊功能）

需要注意的是這個Servlet使用了工具類，減少了代碼的備援。工具類在後面進行說明

Register未用工具類，對比代碼，可以看出使用工具類的好處。

package cn.cqie.servlet;

import cn.cqie.util.DbUtil;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.sql.*;
//通路路徑
@WebServlet(urlPatterns = "/Login")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //擷取表單頁傳過來的參數資訊
        String username1 = request.getParameter("username");
        String password1 = request.getParameter("password");
        // 擷取連接配接
        DbUtil dbUtil = new DbUtil();
        dbUtil.getConnection();
        // 查詢代碼
        String sql = "select * from t_user";
        // 調用工具類的查詢方法
        ResultSet query = dbUtil.query(sql);

        while (true){
            try {
                if (!query.next()) break;
                String username = query.getString("username");
                String password = query.getString("password");
                if(username.equals(username1)&&password.equals(password1)){
                    HttpSession session = request.getSession();
                    session.setAttribute("username",username);
                    String url1 = request.getContextPath() + "/lesson10/loginSuccess.jsp";
                    response.sendRedirect(url1);
                    return;
                }
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        String url2 = request.getContextPath() + "/lesson10/login_fail.jsp";
        response.sendRedirect(url2);
        dbUtil.close();
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//        System.out.println("doGet hello world");
    }
}

3.Register對應的Servlet（增加功能）

注冊界面的代碼，接收了表單傳過來的多個資料。其中完成了對賬号的查重和增加功能。

其中Servlet使用了注解，可以看出，注解的urlPatterns與注冊界面表單action的路徑相同當然，也必須相同

package cn.cqie.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.*;

@WebServlet(urlPatterns = "/Register")
public class RegisterServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=utf-8");
        //擷取表單頁傳過來的參數資訊
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String gender = request.getParameter("gender");
        String profession = request.getParameter("profession");
        String favor = request.getParameter("favor");
        String description = request.getParameter("description");

        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            response.getWriter().println("驅動注冊失敗");
            e.printStackTrace();
        }

        Connection conn = null;
        ResultSet res = null;
        PreparedStatement ps = null;

        try {
            conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/javaweb","root","1234");
            System.out.println("資料庫連接配接成功");

            String sql1 = "select * from t_user";
            ps = conn.prepareStatement(sql1);
            res = ps.executeQuery();
            if (res.next()) {
                String username2 = res.getString(1);
               if(username2.equals(username)){
                   response.getWriter().println("賬号重複，請重新注冊");
                   return;
               }
            }

            String sql2= "insert into t_user(username,password,gender,profession,favor,description) values(?,?,?,?,?,?)";
            ps=conn.prepareStatement(sql2);

            ps.setString(1, username);
            ps.setString(2, password);
            ps.setString(3, gender);
            ps.setString(4, profession);
            ps.setString(5,favor);
            ps.setString(6,description);

            int rows = ps.executeUpdate();

            if(rows > 0) {
                response.getWriter().println("registerSuccess");
            } else {
                response.getWriter().println("registerFull");
            }

            if(res != null) {
                try {
                    res.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if (ps != null) {
                try {
                    ps.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }

        } catch (SQLException e) {
            e.printStackTrace();
            response.getWriter().println("資料庫連接配接失敗!請檢查協定、IP、端口号或者使用者名和密碼是否有錯");
        } finally {
            if (conn != null) {
                try {
                    conn.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.getWriter().println("執行doGet請求");
    }
}

4.工具類（DbUtil）

工具類是為了減少連接配接資料庫備援的代碼所引入的，主要功能是，注冊驅動，連接配接資料庫，封裝功能等。其中，由于資料寫在類裡，需要改資料時不太友善且不能夠達到很好的私密性，則引入了properties檔案，将私有資料寫入檔案中，友善修改和儲存。 
package cn.cqie.util;
import java.io.IOException;
import java.sql.*;
import java.util.Properties;

public class DbUtil {
    private static String JDBC_DRIVE;
    private static String JDBC_URL;
    private static String JDBC_USER;
    private static String JDBC_PASSWD;
    private Connection conn = null;
    static {
        //讀取配置檔案
        Properties p = new Properties();
        try {
            p.load(DbUtil.class.getResourceAsStream("/jdbc.properties"));
            JDBC_DRIVE = p.getProperty("jdbc.driver");
            JDBC_URL = p.getProperty("jdbc.url");
            JDBC_USER = p.getProperty("jdbc.user");
            JDBC_PASSWD = p.getProperty("jdbc.password");
        } catch (IOException el) {
            el.printStackTrace();
        }
        try {
            Class.forName(JDBC_DRIVE);
        } catch (ClassNotFoundException e) {
            System.out.println("驅動注冊失敗");
            e.printStackTrace();
        }
    }
    //建立連接配接
    public Connection getConnection(){
        try {
            conn = DriverManager.getConnection(JDBC_URL,JDBC_USER,JDBC_PASSWD);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return conn;
    }
    public void close(){
        getConnection();
        if(conn!=null){
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
    //更新
    public int update(String sql){
        getConnection();

        Statement st = null;
        int rows= 0;
        try {
            st = conn.createStatement();
            rows = st.executeUpdate(sql);

        } catch (SQLException e) {
            e.printStackTrace();
        }
        return rows;
    }
    //查詢
    public ResultSet query(String sql){
        getConnection();
        Statement pstm1 = null;
        ResultSet rs = null;
        try {
            pstm1 = conn.createStatement();
            rs = pstm1.executeQuery(sql);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return rs;
    }
}

5.properties檔案格式及所在目錄

jdbc.driver = com.mysql.jdbc.Driver

jdbc.url = jdbc:mysql://localhost:3306/javaweb

jdbc.user = root

jdbc.password = 1234

目錄結構：

        1、properties檔案在resources目錄下，位于根目錄下可以避免

DbUtil.class.getResourceAsStream("/jdbc.properties"));找不到代碼的情況發生，因為class.getResourceAsStream可能會掃描不到 
        2、login.jsp以及Register.jsp 都需要儲存在webapp或web檔案下，不在WEB-INF檔案裡
JavaWeb中Servlet+jsp+JDBC完成登入注冊界面文章目錄​​前言一、登入注冊思路二、前端頁面三、後端代碼總結

6.使用者清單（查詢功能）  

package cn.cqie.servlet;

import cn.cqie.pojo.User;
import cn.cqie.util.DbUtil;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;
//通路路徑
@WebServlet(urlPatterns = "/User")
    public class FindServlet extends HttpServlet {
    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        System.out.println("doGet hello world");

        DbUtil dbUtil = new DbUtil();
        dbUtil.getConnection();

        try {
            //定義SQL語句
            String sql = "select * from t_user";
            //設定參數，執行SQL
            ResultSet rs = dbUtil.query(sql);
            // 處理結果,封裝user對象，裝載list指令
            List<User> userList = new ArrayList<>();
            while (true) {
                try {
                    if (!rs.next()) break;
                    //封裝user
                    User user = new User();
                    user.setUserId(rs.getInt("user_id"));
                    user.setUsername(rs.getString("username"));
                    user.setPassword(rs.getString("password"));
                    user.setGender(rs.getString("gender"));
                    user.setProfession(rs.getString("profession"));
                    user.setFavor(rs.getString("favor"));
                    user.setDescription(rs.getString("description"));
                    user.setJoinDate(rs.getDate("joinDate"));
                    userList.add(user);
                } catch (SQLException throwables) {
                    throwables.printStackTrace();
                }
            }

            HttpSession session = request.getSession();
            session.setAttribute("userList", userList);
            request.getRequestDispatcher("/lesson09/userList.jsp").forward(request, response);

        } finally {
            dbUtil.close();
        }

    }

    @Override
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        System.out.println("doPost hello world");
    }
}

檢視單個資訊功能實作 

JavaWeb中Servlet+jsp+JDBC完成登入注冊界面文章目錄​​前言一、登入注冊思路二、前端頁面三、後端代碼總結

跳轉到Servlet界面 

JavaWeb中Servlet+jsp+JDBC完成登入注冊界面文章目錄​​前言一、登入注冊思路二、前端頁面三、後端代碼總結

 将傳回資料傳到UserList内

<%--
  Created by IntelliJ IDEA.
  User: limerence
  Date: 2022/11/20
  Time: 13:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<table >
    <tr>
        <td>編号</td>
        <td>使用者名</td>
        <td>性别</td>
        <td>職業</td>
        <td>愛好</td>
        <td>描述</td>
        <td>注冊時間</td>
        <td>操作列</td>
    </tr>
    <c:forEach items="${userList1}" var="user" varStatus="row">
        <tr>
            <td>${row.index + 1}</td>
            <td>${user.username}</td>
            <td>${user.gender}</td>
            <td>${user.profession}</td>
            <td>${user.favor}</td>
            <td>${user.description}</td>
            <td><f:formatDate value="${user.joinDate }" pattern="MM-dd"/></td>
                <%--傳參--%>
            <td><a onclick="return confirm('是否删除？')" href="${pageContext.request.contextPath}/UserDel.do?userId=${user.userId}" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >删除</a></td>
        </tr>
    </c:forEach>
</table>
</body>
</html>

 達到的效果

JavaWeb中Servlet+jsp+JDBC完成登入注冊界面文章目錄​​前言一、登入注冊思路二、前端頁面三、後端代碼總結

總結

例如：學到Filter，後續改進代碼，實作修改功能

JavaWeb基礎知識學習筆記 servlet java html Maven
上一篇: 完成登入的JDBC操作
下一篇: 彈窗如何設計才能提高使用者體驗

繼續閱讀