一个基于前后端交互的简易登陆小案例

最新推荐文章于 2023-05-27 03:45:14 发布

可乐不可乐QAQ

最新推荐文章于 2023-05-27 03:45:14 发布

阅读量1.6k

点赞数 9

本文链接：https://blog.csdn.net/m0_46587577/article/details/108257121

版权

文章目录

前言
功能概述
项目目录
代码展示
效果展示
总结

前言

这是我的一次小小的练习，写一篇博客记录一下，也算是我的第一个前后端交互的总结性的练习，实现了一些简单的功能，但是还有很多地方不足，如果这篇文章能够有幸被大佬发现，希望大佬能够给出一些建议，在接下来的学习中我会努力改正！

功能概述

1：登录界面，可以实现登陆功能，输入账户名和密码，点击登录，会将数据传入数据库，查询账户密码是否正确，如果正确，跳转到登录成功的页面，如果不正确，则不会跳转，并且会显示密码错误，此外，还包含一个超链接，点击会跳转到注册页面
2：注册页面，实现注册功能，要求，用户名长度大于2，不以_开头，中文，字母数字皆可，密码，要求为数字，字母，下划线皆可，长度必须大于5位数。此外还需要再次输入密码进行确认，性别没有做具体要求。当输入框失去焦点后，会判断输入的值是否符合要求，符合则会在输入框后面显示绿色的对勾，不符合则会显示红色的×，此外，当用户名输入框失去焦点后，还会判断在数据库中是否存在相同的用户名，如果有则显示已有相同的用户名，并且注册会注册失败，如果注册成功，则会显示注册成功，并且在三秒后跳转到登录页面。
说明：前端全部采用html页面，没有采取jsp

项目目录

整体：

资源文件以及前端页面：
在这里插入图片描述
java文件：

代码展示

在这里只展示最为主要的部分了
前端登录页面：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
　<script src="jquery-3.3.1.min.js"></script>
<script>
    function checkname(username){
        let reg = /\S/;
        var flag = reg.test(username);
        if(!flag){
            $("#tip").html("非空哦！");
        } else{
            $("#tip").html("");
        }
    }
    $(function () {
        $("#name").blur(function(){
            checkname($(this).val());
        })
        if(getMyCookie("istrue") == 1){
            $("#datas").html("密码错误");
        }
    })
    function getMyCookie(key){
        var val = "";
        // 对cookie操作
        var cookies = document.cookie;
        cookies = cookies.replace(/\s/,"");
        var cookie_array = cookies.split(";");
        for(i=0;i<cookie_array.length;i++){
            // yh_mch=lilei
            var cookie = cookie_array[i];
            var array = cookie.split("=");
            if(array[0]==key){
                val = array[1];
            }
        }
        return val;
    }
</script>
<style>
    body{
        background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
    }
    #container{
        display: inline-block;
        width: 300px;
        height: 400px;
        background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
        margin-left: 500px;
        margin-top: 100px;
    }
    form{
        margin-left: 40px;
        margin-top: 40px;
    }
    form h2{
        margin-left:  60px;
        color: fuchsia;
        font-family: "Roboto Light";
    }
    .text{
        margin-top: 20px;
        border: none;
        outline: none;
        height: 22px;
        width: 200px;
    }
    .button{
        margin-top: 20px;
        margin-left: 65px;
        width: 50px;
        border: none;
        outline: none;
        cursor: pointer;
    }
    span a{
        float: right;
        font-size: 10px;
        color:red;
        text-decoration: none;
    }
    #welcome{
        margin-left: 520px;
        font-size: 30px;
        display: inline-block;
        font-family: 細明體-ExtB,serif;
        color: #b49fda;

    }
    #datas{
        margin-left: 70px;
        color: red;
    }
    #tip{
        font-size: 5px;
        color: red;
    }
</style>
<body>
<div id="welcome">欢迎来到我的网站</div>
<div id="container">
<form action="/test/loginservlet" method="get" id="form">
    <h2 id="h3">Login</h2>
    <span id="datas"></span><br>
<input class="text" id="name" type="text" placeholder="请输入用户名" name="username">
    <span id="tip"></span>
    <br>
<input class="text" type="password" placeholder="请输入密码" name="password"><br>
<input class="button" type="submit" value="登录"><br>
<span><a href="./regist.html">没有账号？点击注册</a></span>

</form>
</div>
</body>
</html>

注册界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<script src="jquery-3.3.1.min.js"></script>
<script>
    // 正则表达式检验输入是否合格
    // 用户名必须大于2，可以是数字，字母，中文
    function username(){
        let reg = /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]{2,}/g;
        let n1 =   $("#n1");
        if (!reg.test(n1.val())){
         $("#true1").css("display","none");
        }  else{
            $("#true1").css("display","block");
        }
    }
    // 检验密码，必须大于5位数
    function password(){
        let trues = $("#true2");
        let reg = /^\w{5,}$/g;
        let ps =   $("#ps1");
        if (!reg.test(ps.val())){
            if(ps.val() ===''){
                trues.css("display", "none");
            } else {
                trues.html("×");
                trues.css("color", "red")
                trues.css("display", "block");
            }
        } else{
            trues.html("√");
            trues.css("color","green")
            trues.css("display", "block");
        }
    }
    // 判断前后两次密码是否一致？
    function same() {
        let trues = $("#true3");
        let ps = $("#ps2");
        if ($("#ps1").val() === ps.val()) {
            if (ps.val() === '') {
                trues.css("display", "none");
            } else {
                trues.html("√");
                trues.css("color", "green")
                trues.css("display", "block");
            }
        } else {
            if (ps.val() === '') {
                trues.css("display", "none");
            } else {
                trues.html("×");
                trues.css("color", "red")
                trues.css("display", "block");
            }
        }
    }
    $(function(){
        // 当用户名框失去焦点的时候，会发送ajax请求，判断是否存在
          $("#n1").blur(function(){
              $.get(
                  "searchservlet",
                  $("#form").serialize(),
                  function (data) {
                      // 如果返回的有数据，则提示
                      if(data.length >0) {
                          $("#datas").html(data);
                          // 有数据则用户名肯定正确，所以可以不用检测用户名格式
                          $("#true1").css("display","none");
                      } else{
                          // 如果没有用户，则检验用户名格式
                          $("#datas").html('');
                          username();
                      }
                  }
              )
          });
          // 密码输入框1失去焦点检测密码格式
        $("#ps1").blur(function(){
            password();
            same();
        });
        // 密码输入框2失去焦点检测密码格式
        $("#ps2").blur(function(){
            same();
        });

    });
</script>
<style>
    body{
        background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
    }
    .container{
        display: inline-block;
        width: 300px;
        height: 400px;
        background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
        margin-left: 500px;
        margin-top: 100px;
    }
    form{
        margin-left: 40px;
        margin-top: 30px;
    }
    form h2{
        margin-left:  80px;
        color: palegreen;
        font-family: "Roboto Light";
    }
    .text{
        margin-top: 10px;
        border: none;
        outline: none;
        height: 22px;
        width: 200px;
    }
    .button{
        margin-top: 20px;
        margin-left:80px;
        width: 50px;
        border: none;
        outline: none;
        cursor: pointer;
    }
    span{
        margin-left: 70px;
        color: red;
        font-size: 10px;
    }
    #true1{
        color:green;
        float: left;
        position: absolute;
        left: 730px;
        top: 220px;
        font-size: 20px;
        display: none;
    }
    #true2{
        color:green;
        float: left;
        position: absolute;
        left: 730px;
        top: 283px;
        font-size: 20px;
        display: none;
    }
    #true3{
        color:green;
        float: left;
        position: absolute;
        left: 730px;
        top: 320px;
        font-size: 20px;
        display: none;
    }
</style>
<body>
    <div class="container">
        <form action="/test/registservlet" id="form" method="get">
            <h2>注册</h2>
            <span id="datas"></span><br>
            <input class="text"  id="n1" name="username" type="text" placeholder="用户名"><span id="true1">√</span><br>
            <input class="text"  id="n2" name="sex" type="text" placeholder="性别" ><br>
            <input class="text" id="ps1"name="password1" type="password" placeholder="密码"><span id="true2">√</span><br>
            <input class="text" id="ps2" name="password2" type="password" placeholder="再次确认密码"><span id="true3">√</span><br>
            <input class="button" type="submit" value="注册">
        </form>
    </div>
</body>
</html>

web包

查询servlet代码

import domain.User;
import service.Impl.LoginServiceImpl;
import service.LoginService;

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;

@WebServlet("/searchservlet")
public class SearchServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         doGet(request, response);
    }
   @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       // 设置编码
       request.setCharacterEncoding("utf-8");
       response.setContentType("text/html; charset=UTF-8");
       // 获取响应数据
       String username = request.getParameter("username");

       // 封装为User对象
       User user = new User();
       user.setName(username);

       // 调用方法，将封装好的对象传输到service层
       LoginService login = new LoginServiceImpl();
       // 调用查询方法,判断是否存在该用户名
       boolean flag1 = login.search(user);
       // 如果有，则响应数据告诉html，没有则调用存储方法
       System.out.println(username);
       System.out.println(flag1);
       if(flag1){
           response.getWriter().write("已有用户名");
       }
    }
}

登录servlet代码：

import domain.User;
import service.Impl.LoginServiceImpl;
import service.LoginService;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/loginservlet")
public class LoginServlet 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");

        // 封装为User对象
        User user = new User();
        user.setName(username);
        user.setPassword(password);

        // 调用方法，将封装好的对象传输到service层
        LoginService lo= new LoginServiceImpl();
        // 调用查询方法,判断是否存在该用户名
        boolean flag1 =lo.login(user);
        // 如果有，则响应数据告诉html
        if(flag1){
                request.getRequestDispatcher("/success.html").forward(request, response);
            } else{
            System.out.println(1);
            // 新建cookie，设置键和值
              Cookie cookie = new Cookie("istrue","1");
              cookie.setPath("/");
              // 3s后过期
              cookie.setMaxAge(3);
              // 发送cookie
              response.addCookie(cookie);
              // 因为登录失败，页面重定向到login.html
              response.sendRedirect("/test/login.html");
        }
        }
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
              doPost(request,response);
    }
}

注意：此处的话，我设置了一个cookie，主要是后端判断密码和用户名不匹配后，给前端返回一个信息，（因为跳转页面跳转回login.html后，ajax返回的数据也会清空），所以我采用cookie来判断，这个地方我希望有大佬能够指点我一下，有没有更好的方法。

注册servlet代码：

import domain.User;
import service.Impl.LoginServiceImpl;
import service.LoginService;

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;

@WebServlet("/registservlet")
public class RegistServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         doGet(request,response);
    }
    @Override
    protected void doGet(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("password1");
        String sex = request.getParameter("sex");

        // 封装为对象
        User user = new User(username,password,sex);

        // 创建Service对象，调用存储的方法
        LoginService lo = new LoginServiceImpl();
        // 判断数据库中是否有一样的数据，如果有，则不能存储
        boolean flag1 = lo.search(user);
        if(flag1){
            response.sendRedirect("/test/false.html");
        } else {
            boolean flag2 = lo.save(user);
            // 如果存储成功，则跳转到登录界面，失败，则跳转到失败页面
            if(flag2){
                response.sendRedirect("/test/registsuccess.html");
            } else{
                response.sendRedirect("/test/false.html");
            }
        }



    }
}

domain包
此包用来封装对象

package domain;

public class User {
    private String name;
    private String password;
    private String sex;

    public User() {
    }

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

    public String getName() {
        return name;
    }

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

    public String getPassword() {
        return password;
    }

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

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }
}

dao包
接口：

package dao;

import domain.User;

import java.sql.SQLException;

public interface Logindao {
    boolean search(User user);
    boolean login(User user);
    boolean save(User user);
}

实现类

package dao.Impl;

import dao.Logindao;
import domain.User;
import utils.JDBCUtils;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class LogindaoImpl implements Logindao {

    @Override
    public boolean search(User user)  {

        // 获取数据库连接
        Connection conn = JDBCUtils.getConnection();
        // 定义sql语句
        String sql = "select * from login";
        try {
            assert conn != null;
            ResultSet result = conn.prepareStatement(sql).executeQuery();
            while(result.next()){
                String name = result.getString("username");
                if(name.equals(user.getName())){
                    // 如果相等则返回true
                    return true;
                }
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        } finally {
            try {
                conn.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
        return false;
    }

    @Override
    public boolean login(User user) {
        // 获取连接
        Connection conn = JDBCUtils.getConnection();
        PreparedStatement pre = null;
        // 定义sql语句
        String sql = "select * from login";
        try {
            // 执行sql语句
             pre = conn.prepareStatement(sql);
            ResultSet result = pre.executeQuery();
            // 对获得的值进行判断
            while(result.next()){
                String name = result.getString("username");
                String pass = result.getString("password");
                // 当密码和用户名都相等时，返回true
                if(name.equals(user.getName()) &&  pass!=null && pass.equals(user.getPassword())){
                    return true;
                }
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        } finally {
            try {
                pre.close();
                conn.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
        return false;
    }

    @Override
    public boolean save(User user) {
        Connection conn = JDBCUtils.getConnection();
        PreparedStatement pre = null;
        String sql = "insert into login values(?,?,?)";
        try {
            pre = conn.prepareStatement(sql);
            pre.setString(1,user.getName());
            pre.setString(2,user.getPassword());
            pre.setString(3,user.getSex());
            int i = pre.executeUpdate();
            if(i>0){
                return true;
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        } finally {
            try {
                pre.close();
                conn.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }

        }
        return false;
    }
}

service包
接口：

package service;

import domain.User;

public interface LoginService {
    boolean search(User user);
    boolean login(User user);
    boolean save(User user);
}

实现类：

package service.Impl;

import dao.Impl.LogindaoImpl;
import dao.Logindao;
import domain.User;
import service.LoginService;

public class LoginServiceImpl implements LoginService {
    @Override
    public boolean search(User user) {
        Logindao lo = new LogindaoImpl();
        return lo.search(user);
    }

    @Override
    public boolean login(User user) {
        Logindao lo = new LogindaoImpl();
        return lo.login(user);
    }

    @Override
    public boolean save(User user) {
        Logindao lo = new LogindaoImpl();
        return lo.save(user);
    }
}

工具类：
JDBC工具类：用来连接数据库，工具类当中有创建连接池的方法，但是我并没有采用

package utils;

import com.alibaba.druid.pool.DruidDataSourceFactory;

import javax.sql.DataSource;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.Properties;

/**
 * JDBC工具类 使用Durid连接池
 */
public class JDBCUtils {

    private static DataSource ds ;

    static {

        try {
            //1.加载配置文件
            Properties pro = new Properties();
            //使用ClassLoader加载配置文件，获取字节输入流
            InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
            System.out.println(is);
            pro.load(is);

            //2.初始化连接池对象
            ds = DruidDataSourceFactory.createDataSource(pro);

        } catch (IOException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 获取连接池对象
     */
    public static DataSource getDataSource(){
        return ds;
    }


    /**
     * 获取连接Connection对象
     */
    public static Connection getConnection() {
        try {
            return  ds.getConnection();
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return null;
    }
}

大致的代码就是这些，一些跳转的页面没有展示出来了，代码写的并不好，学习的过程就是一步步改正进步的过程，记录在这里，也算是记录自己的成长。

效果展示

额。。。首先请忽略页面写的十分丑，因为没有去花很多时间弄这个
在这里插入图片描述
登录页面：

登陆成功：

登陆失败：

注册页面：

在这里插入图片描述
这是检测失败的时候的提示，（在此处如果有相同的用户名，后面是不会显示√或者×的）：

检测成功时：

注册成功时：

三秒后会自动跳转到登录页面。

注册失败时：
在这里插入图片描述
大致的功能就是这些，比较粗糙，哈哈，但是，还是勉强完成了。很感谢在这途中帮助我的大佬，不然有些问题还卡着，十分感谢！

总结

这次小测验应该不算难，但是在完成的过程中还是遇到一些问题：
1：在发送请求的时候，如果同一个页面发送多次请求完成不同的功能，可以将请求的路劲设置为不一样
2：在编译过程中，遇见了这个问题：
org.apache.catalina.loader.WebappClassLoaderBase.clearReferencesThreads The web application [XXX] appears to have started a thread named [Abandoned connection cleanup thread] but has failed to stop it.
此错误是tomcat报出的，似乎是既导入了jar包，又引入了依赖，删除mysql导入jar包就完成了
3：在进行项目之前，应该对每一项进行分析，不然做起来就会很迷得感觉
4：在ajax给后台传输数据时，必须是key/value形式，即key：value ，不然传到后台就是null
5：在写代码的过程中，思维不能局限在一块，需要灵活应变！

希望以后能够更好地完成这种案例，加油！！！