简单的登录注册（前端+后端+MySQL数据库 DRuid连接池 DBUtils）

最新推荐文章于 2023-03-20 19:18:49 发布

弎屲

最新推荐文章于 2023-03-20 19:18:49 发布

阅读量2.7k

点赞数 2

文章标签： mysql jsp

本文链接：https://blog.csdn.net/cx9977/article/details/109192281

版权

简单的登录注册（前端+后端+MySQL数据库 DRuid连接池 DBUtils）

文章目录

简单的登录注册（前端+后端+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;
    }
}