簡單的登入註冊（前端+後端+MySQL資料庫 DRuid連線池 DBUtils）

弎屲發表於2020-10-20
前端後端MySql資料庫UI

簡單的登入註冊（前端+後端+MySQL資料庫 DRuid連線池 DBUtils）

文章目錄

結果圖





前端程式碼

  • 登入頁面
<%--
  Created by IntelliJ IDEA.
  User: yllch
  Date: 2020/10/20
  Time: 16:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登入</title>
</head>
<body>
<form action="http://localhost:8080/_war_exploded/login" method="post" onsubmit="return checkAll()">

    <table border="" width="700px" height="350px" align="center" style="margin-top: 90px;background-color: gray;">
        <tr>
            <td class="xx" colspan="2" style="text-align: center;"> 使用者登入頁面</td>
        </tr>
        <tr>
            <td class="xx" style="text-align: center;">使用者名稱：</td>
            <td class="x2">
                <input type="text" name="username" id="xxx" value="" placeholder="請輸入使用者名稱6-16位字母"
                       oninput="checkUsername()"/>
                <span id="ccc"></span>
            </td>
        </tr>
        <tr>
            <td class="xx" style="text-align: center;">密碼：</td>
            <td class="x2"><input type="password" name="password" id="psd" value="" placeholder="請輸入密碼8位密碼"
                                  oninput="checkPassord()"/><span
                    id="mima"></span></td>

        </tr>
        <tr>
            <td class="xx" colspan="2" style="text-align: center;">
                <input type="submit" value="登入"/>
                <input type="reset" onclick="tiao()" value="註冊"/>
            </td>

        </tr>
    </table>
</form>
</body>
</html>
<script type="text/javascript">
    function tiao() {
        window.location='http://localhost:8080/_war_exploded/Regist.jsp';

    }
    function checkAll() {

        return checkUsername() && checkPassord();

    }

    function checkUsername() {
        var c = document.getElementById("xxx").value;

        var regx = /^[a-zA-Z]{6,16}$/;
        var f = regx.test(c);
        var cc = document.getElementById("ccc");
        if (f) {
            cc.innerHTML = "<font color='green'>使用者名稱規則正確✔</font >"
        } else {
            cc.innerHTML = "<font color='red'>使用者名稱格式錯誤</font>"
        }
        return f;
    }

    function checkPassord() {
        var c1 = document.getElementById("psd").value;

        var regx1 = /^[a-zA-Z0-9]{8,16}$/;
        var f1 = regx1.test(c1);
        var cc1 = document.getElementById("mima");
        if (f1) {
            cc1.innerHTML = "<font color='green'>密碼格式正確✔</font >"
        } else {
            cc1.innerHTML = "<font color='red'>密碼格式錯誤</font>"
        }
        return f1;
    }

</script>
  • 註冊頁面
<%--
  Created by IntelliJ IDEA.
  User: yllch
  Date: 2020/10/20
  Time: 16:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>註冊</title>
</head>
<body>
<form action="http://localhost:8080/_war_exploded/regist" method="post" onsubmit="return checkAll()">

    <table border="" width="700px" height="350px" align="center" style="margin-top: 90px;background-color: aquamarine;">
        <tr>
            <td class="xx" colspan="2" style="text-align: center;">使用者註冊頁面</td>
        </tr>
        <tr>
            <td class="xx">使用者名稱：</td>
            <td class="x2">
                <input type="text" name="username" id="xxx" value="" placeholder="請輸入使用者名稱6-16位字母"
                       oninput="checkUsername()"/>
                <span id="ccc"></span>
            </td>
        </tr>
        <tr>
            <td class="xx">密碼：</td>
            <td class="x2"><input type="password" name="password" id="psd" value="" placeholder="請輸入密碼8位密碼"
                                  oninput="checkPassord()"/><span
                    id="mima"></span></td>

        </tr>
        <tr>
            <td class="xx">確認密碼：</td>
            <td class="x2"><input type="password" name="password1" id="psd1" value="" placeholder="請輸入確認密碼8位密碼"
                                  oninput="checkPassord1()"/><span
                    id="tishi"></span></td>

        </tr>
        <tr>
            <td class="xx" colspan="2" style="text-align: center;">
                <input type="submit" value="註冊"/>
                <input type="reset" value="重置"/>
                <input type="button" onclick="tiao()" value="登入"/>
            </td>

        </tr>
    </table>
</form>
</body>
</html>
<script type="text/javascript">
    function checkAll() {

        return checkUsername() && checkPassord() && checkPassord1();

    }

    function tiao() {
        window.location = 'http://localhost:8080/_war_exploded/index.jsp';

    }

    function checkUsername() {
        var c = document.getElementById("xxx").value;

        var regx = /^[a-zA-Z]{6,16}$/;
        var f = regx.test(c);
        var cc = document.getElementById("ccc");
        if (f) {
            cc.innerHTML = "<font color='green'>使用者名稱規則正確✔</font >"
        } else {
            cc.innerHTML = "<font color='red'>使用者名稱格式錯誤</font>"
        }
        return f;
    }

    function checkPassord() {
        var c1 = document.getElementById("psd").value;

        var regx1 = /^[a-zA-Z0-9]{8,16}$/;
        var f1 = regx1.test(c1);
        var cc1 = document.getElementById("mima");
        if (f1) {
            cc1.innerHTML = "<font color='green'>密碼格式正確✔</font >"
        } else {
            cc1.innerHTML = "<font color='red'>密碼格式錯誤</font>"
        }
        return f1;
    }

    function checkPassord1() {
        var c2 = document.getElementById("psd").value;
        var c3 = document.getElementById("psd1").value;

        var cc2 = document.getElementById("tishi");
        if (c3 == c2) {
            cc2.innerHTML = "<font color='green'>兩次密碼輸入一致✔</font >"
        } else {
            cc2.innerHTML = "<font color='red'>兩次密碼輸入不一致</font>"
        }
        return c3 == c2;
    }

</script>

後端程式碼

  • 登入
package Login;


import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;


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.io.PrintWriter;
import java.sql.SQLException;
import java.util.List;


@WebServlet(name = "ServletLogin", value = "/login")
public class ServletLogin extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html; charset=UTF-8");
        PrintWriter writer = response.getWriter();
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        QueryRunner queryRunner = new DBCon().con();
        List<User> query = null;
        try {
            query = queryRunner.query("select * from jiaoyan", new BeanListHandler<>(User.class));
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        boolean i = false;
        for (User user : query) {
            System.out.println(user.getUsername());
            System.out.println(user.getPassword());
            if (username.equals(user.getUsername()) && password.equals(user.getPassword())) {
                i = true;
                break;
            }
        }
        System.out.println(i);
        if (i) {
            writer.write("<script>alert(\"登陸成功！！\")</script>");
        } else {
            writer.write("<script>alert(\"登陸失敗！！\")</script>");
            //response.sendRedirect("http://localhost:8080/_war_exploded/index.jsp");
        }
        //String sql = "select * from jiaoyan where username='" + username + "' and password='" + password + "'";
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}
  • 註冊
package Regist;

import Login.DBCon;
import Login.User;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

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.io.PrintWriter;
import java.sql.SQLException;
import java.util.List;

@WebServlet(name = "ServletRegist", value = "/regist")
public class ServletRegist extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html; charset=UTF-8");
        PrintWriter writer = response.getWriter();
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        QueryRunner queryRunner = new DBCon().con();
        List<User> query = null;
        try {
            query = queryRunner.query("select * from jiaoyan", new BeanListHandler<>(User.class));
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        boolean i = false;
        for (User user : query) {
            if (username.equals(user.getUsername())) {
                i = true;
                break;
            }
        }
        if (i) {
            writer.write("<script>alert(\"使用者名稱已存在！！\")</script>");
            //response.sendRedirect("http://localhost:8080/_war_exploded/Regist.jsp");
        } else {
            int update = 0;
            try {
                update = queryRunner.update("insert into jiaoyan values (?,?)", username, password);
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
            if (update > 0) {
                writer.write("<script>alert(\"註冊成功！！\")</script>");
            } else {
                writer.write("<script>alert(\"註冊失敗！！\")</script>");
                response.sendRedirect("http://localhost:8080/_war_exploded/Regist.jsp");
            }

        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

工具Utils程式碼

package Login;

import com.alibaba.druid.pool.DruidDataSourceFactory;
import org.apache.commons.dbutils.QueryRunner;

import javax.sql.DataSource;
import java.io.InputStream;
import java.util.Properties;

public class DBCon {
    public  QueryRunner con() {
        InputStream resourceAsStream = this.getClass().getClassLoader().getResourceAsStream("druid.properties");
        Properties properties = new Properties(); DataSource dataSource = null;
        try {
            properties.load(resourceAsStream);
            dataSource = DruidDataSourceFactory.createDataSource(properties);
        } catch (Exception e) {
            e.printStackTrace();
        }
        QueryRunner queryRunner = new QueryRunner(dataSource);
        return queryRunner;
    }
}

User類程式碼

package Login;

public class User {
    private String username;
    private String password;

    public User() {
    }

    public User(String username, String password) {
        this.username = username;
        this.password = password;
    }

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

相關文章