动态实现web网页登陆和注册功能[保姆级教学]

小羊不会飞 2023-04-09 原文

🐏小羊简介：

💖博客主页：小羊不会飞

🚀年龄：20 大二在读

💪爱好：干饭，运动，码代码，看书，旅游

📃即将更新：

🎯1、手把手带你搭建个人博客网站

🎯2、后台管理系统模块更新

🚍：感兴趣的朋友，赶紧上车吧！！

🎉欢迎关注🔍点赞👍收藏🎇留言📙

🎄有任何疑问，欢迎留言讨论！！！

涉及到相关内容如下：

🍇一个数据库

🍇JSP网页连接数据库

🍇注册和登录的JSP页面

🥗一个数据库（我的博客有安装教程哦 MySql保姆级安装教程 🍬）

🍓软件安装

🥗JSP网页连接数据库

🍓配置mysql文件

🍓创建jsp文件，连接数据库，并读取出数据显示在jsp网页中

🥗一个数据库（我的博客有安装教程哦 MySql保姆级安装教程 🍬）

🍓软件安装

（可视化数据库界面软件安装）拿走不谢

链接：https://pan.baidu.com/s/160OyyMg1RqRTEkrX74b_jw
提取码：qwer

🥗JSP网页连接数据库

🍓配置mysql文件

首先要将mysql-connector-java-5.0.8-bin.jar 拷到apache-tomcat-10.0.12-windows-x64\apache-tomcat-10.0.12\lib文件目录下

🍓创建jsp文件，连接数据库，并读取出数据显示在jsp网页中

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>
<%
    try {
        Class.forName("com.mysql.jdbc.Driver");  驱动程序名
        //com.mysql.jdbc.cj.Driver也是OK的
        String url = ""; //数据库名 ？后面的是为了指定字符的编码、解码格式。
        String username = "root";  //数据库用户名
        String password = "123456";  //数据库用户密码
        Connection conn = DriverManager.getConnection(url, username, password);  //连接状态

        if(conn != null){
            out.println("数据库连接成功！");
            out.print("<br />");
            Statement stmt = null;
            ResultSet rs = null;
            String sql = "SELECT *FROM 用户名;";  //查询语句
            stmt = conn.createStatement();
            rs = stmt.executeQuery(sql);
            out.print("查询结果：");
            out.print("<br />");
            out.println("名字"+"  "+"年龄 "+"  "+"身份"+"性别"+"用户账号"+"用户密码"+"练习电话"+"用户注册时间");
            out.print("<br />");
            while (true) {
                try {
                    if (!rs.next()) break;
                    out.println(rs.getString("名字")+"   &nbsp  "+rs.getString("年龄")+"  &nbsp "+rs.getString("身份")+rs.getString("性别")+"   &nbsp  "+rs.getString("用户账号")+"   &nbsp  "+rs.getString("用户密码")+"   &nbsp  "
                            +rs.getString("联系电话")+"   &nbsp  "+rs.getString("用户注册时间")+"   &nbsp  "); //将查询结果输出
                    out.print("<br/>");
                } catch (SQLException throwables) {
                    throwables.printStackTrace();
                }
//                out.println(rs.getString("名字")+"   &nbsp  "+rs.getString("年龄")+"  &nbsp "+rs.getString("身份")+rs.getString("性别")+"   &nbsp  "+rs.getString("用户账号")+"   &nbsp  "+rs.getString("用户密码")+"   &nbsp  "
//                        +rs.getString("联系电话")+"   &nbsp  "+rs.getString("用户注册时间")+"   &nbsp  "); //将查询结果输出
//                out.print("<br/>");
            }
        }
        else{
            out.print("连接失败！");
        }
      }
    catch (ClassNotFoundException e) {
        e.printStackTrace();
    }
//    catch (SQLException e)
//          {
//        e.printStackTrace();
//    }
%>
</body>
</html>

连接成功，页面显示如下

🥗注册和登录的JSP页面

🍓新建login.jsp文件

<!DOCTYPE>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
  <meta charset="utf-8"/>
  <title> LOGIN</title>
  <link rel="stylesheet" type="text/css" href="../Project/NewLogin.css" />
  <link rel="stylesheet" type="text/css" href="../Project/font-awesome.css" />
</head>

<body>
<form id="indexform" name="indexForm" action="check.jsp" method="post">
  <div id="login_box">
    <h2 style="color: #a0ebad;"> 登录</h2>
    <div id="form">
      <div >
        <i >账号</i>
        <input type="text" placeholder="账号" name="username">
      </div>
      <div >
        <i>密码</i>
        <input type="password" placeholder="密码" name="password">
      </div>
    </div>
    <button type="submit" value="登录">登录</button>
    <div id="sign-in">
      <a href="register.jsp" style="color:white;">注册</a>
    </div>
  </div>
</form>
</body>

</html>

🍓新建check.jsp

<%@ page import="java.sql.*" language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Insert title here</title>
</head>
<body>
<jsp:useBean id="db" class="MySql.DBUtil" scope="page"/>
<%
  request.setCharacterEncoding("UTF-8");
  String username=(String)request.getParameter("username");//获取login页面输入的用户名和密码
  String password=(String)request.getParameter("password");


  String sql="select * from 用户名 where 用户账号="+"'"+username+"'";//定义一个查询语句
  ResultSet rs=db.executeQuery(sql);//执行查询语句
  try {
    if(rs.next())
    {
      //将输入的密码与数据库密码相比对，执行相应操作
      if(password.equals(rs.getObject("用户密码"))){
        //上节课的习题中的第二种跳转方式
        response.sendRedirect("../Project/index.html");
      }
      else{
        //js中的alert可以弹出窗口
        out.print("<script language='javaScript'> alert('密码错误');</script>");
        response.setHeader("refresh", "0;url=login.jsp");
      }
    }
    else
    {
      out.print("<script language='javaScript'> alert('用户名错误，请重新输入');</script>");
      /**
       * 一秒刷新页面一次 response.setHeader("refresh","1");这个是没有参数的情况下自动刷新
       *  二秒跳到其他页面 response.setHeader("refresh","2;URL=o");
       */
      response.setHeader("refresh", "0;url=login.jsp");
    }
  } catch (SQLException throwables) {
    throwables.printStackTrace();
  }

%>
</body>
</html>

🍓创建register.jsp文件

<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册界面</title>
    <script src="../Project/register.js" async></script>
    <link rel="stylesheet" type="text/css" href="../Project/register.css">
</head>

<body>
<div class="container right-panel-active">
    <!-- Sign Up -->
    <div class="container__form container--signup">
        <form action="Cregister.jsp" class="form" id="form1" method="post">
            <h2 class="form__title">注册</h2>
            <input type="text" placeholder="名字" class="input"  name="name"/>
            <input type="text" placeholder="用户名" class="input"  name="username"/>
            <input type="password" placeholder="密码" class="input"  name="password"/>
            <input type="text" placeholder="联系电话" class="input"  name="phone"/>
<%--            <input type="text" placeholder="" class="input" />--%>
            <button class="btn">
                点击注册
            </button>
        </form>
    </div>

    <!-- Sign In -->
    <!-- <div class="container__form container--signin">
        <form action="#" class="form" id="form2">
            <h2 class="form__title">登录</h2>
            <input type="email" placeholder="邮箱" class="input" />
            <input type="password" placeholder="密码" class="input" />
            <a href="#" class="link">忘记密码</a>
            <button class="btn">登录</button>
        </form>
    </div> -->

    <!-- Overlay -->
    <div class="container__overlay">
        <div class="overlay">
            <!-- <div class="overlay__panel overlay--left">
                <button class="btn" id="signIn">登录</button>
            </div> -->
            <!-- <div class="overlay__panel overlay--right">
                <a href="index.html"><button class="btn" id="signUp">注册</button></a> -->
            <!-- </div> -->
        </div>
    </div>
</div>
</body>

</html>

🍓新建Cregister.jsp文件：

<%@ page import="java.sql.*" language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="refresh" content="0;url=login.jsp"/><%-- 实现0秒跳转到登录界面 --%>
  <title>Insert title here</title>
</head>
<body>
<%--
一、
jsp:useBean的基本用法
jsp:useBean是一个JSP动作指令，表示装载一个将在JSP页面中使用的JavaBean
jsp:useBean的最基本语法如下：
其中id表示定义的JavaBean的唯一标识，class表示定义的JavaBean的类。
--%>
<jsp:useBean id="db" class="MySql.DBUtil" scope="page"/>
<%
  request.setCharacterEncoding("UTF-8");
  String name=(String)request.getParameter("name");
  String username=(String)request.getParameter("username");//获取register页面输入的用户名和密码
  String password=(String)request.getParameter("password");
  String phone=(String)request.getParameter("phone");


  String sql="INSERT INTO 用户名(名字,用户账号,用户密码,联系电话) VALUES"+"('"+name+"',"+"'"+username+"',"+"'"+password+"'"+",'"+phone+"')";//定义一个插入语句
  db.execQuery(sql);//执行插入语句

//  try {
//    if(rs.next())
//    {
//      //将输入的密码与数据库密码相比对，执行相应操作
//      if(password.equals(rs.getObject("用户密码"))){
//        response.sendRedirect("../Project/index.html");
//      }
//      else{
//        out.print("<script language='javaScript'> alert('密码错误');</script>");
//        response.setHeader("refresh", "0;url=login.jsp");
//      }
//    }
//    else
//    {
//      out.print("<script language='javaScript'> alert('用户名错误，请重新输入');</script>");
//      response.setHeader("refresh", "0;url=login.jsp");
//    }
//  } catch (SQLException throwables) {
//    throwables.printStackTrace();
//  }

%>
<body>
<%--<img id="aa" src="<s:url value="/dangdang/productImages/1.jpg"/>"/>--%>
<%--还有<span id="ss"></span>跳转--%>
<%--<script type="text/javascript">--%>
<%--  //先声明一个时间变量--%>
<%--  var count = 3;--%>
<%--  //声明时间递减的方法--%>
<%--  var time = function(){--%>
<%--    count = count - 1;--%>
<%--    if(count == 0){--%>
<%--      window.location.href="<s:url value='login.jsp'/>";--%>
<%--    }else{--%>
<%--      //将时间显示到页面上--%>
<%--      $("#ss").text(count);--%>
<%--      //设置一个定时器，每隔一秒自动递归调用自己一次--%>
<%--      setTimeout(time, 1000);--%>
<%--    }--%>
<%--  };--%>
<%--  time();--%>
<%--</script>--%>

</body>
</html>

🍓创建DBBean.java文件

package MySql;
import java.sql.*;
public class DBUtil {
    /**
     * 一、
     * mysql5及之前的版本使用的是旧版驱动"com.mysql.jdbc.Driver"
     * mysql6以及之后的版本需要更新到新版驱动，对应的Driver是"com.mysql.cj.jdbc.Driver"
     * 二、
     * com.mysql.cj.jdbc.Driver
     * 这个类是数据库厂商实现的JDBC一套接口里的一个类，称之为“驱动类”，它的继承树如下所示：
     *     ————com.mysql.jdbc.Driver extends com.mysql.cj.jdbc.Driver
     *         ————com.mysql.cj.jdbc.Driver extends NonRegisteringDriver
     *             ————public class NonRegisteringDriver implements java.sql.Driver
     * 三、
     * java.sql是sun官方提供的包，java.sql.Driver是sun提供的一组用于连接数据库的接口之一，由数据库厂商自行实现
     * 由上可知，com.mysql.cj.jdbc.Driver这个驱动类，是对java.sql.Driver接口的实现
     */
    private String driverStr = "com.mysql.cj.jdbc.Driver";//上面第一点解释了为什么要加cj
    private String connStr = "jdbc:mysql://localhost:3306/用户表";//这个相当于是本地数据库的url（地址）
    private String dbusername = "root";//数据库的账号
    private String dbpassword = "123456";//数据库的密码，需要大家自行修改，在控制台上用Sql语句可以修改
    private Connection conn = null;
    /*
       - Statement：
      由createStatement创建，用于发送简单的SQL语句（不带参数）
      Statement createStatement() throws SQLException；
     */
    private Statement stmt = null;

    public DBUtil()
    {
        try
        {
            /*
            载入这个类com.mysql.cj.jdbc.Driver进JVM之后，在后续的程序中，就可以使用它。
             */
            Class.forName(driverStr);//载入这个类

            /*
            两种不同的数据库软件的连接方式：
            -Mysql
　　　　　　　　Connection con = DriverManager.getConnection("jdbc:mysql://host:port/database", "user", "password");

　　　　　　  -Oracle
　　　　　　　　Connection con = DriverManager.getConnection("jdbc:oracle:thin@host:port/database", "user", "password");
             */
            conn = DriverManager.getConnection(connStr, dbusername, dbpassword);

            /*
             常用的Statement方法
　　　　　　　　- execute()：运行语句，返回是否有结果集。
　　　　　　　　- executeQuery()：运行select语句，返回ResultSet结果节
　　　　　　　　- executeUpdate()：运行insert/update/delete操作，返回更新的行数。
               解释了下面的方法的作用
             */
            stmt = conn.createStatement();
        }
        catch (Exception ex) {
            //捕获异常，上个学期学过
            System.out.println(ex.getMessage());
            System.out.println("数据连接失败！");
        }

    }

    public int executeUpdate(String s) {
        // executeUpdate()：运行insert/update/delete操作，返回更新的行数。
        int result = 0;
        System.out.println("--更新语句:"+s+"\n");
        try {
            result = stmt.executeUpdate(s);
        } catch (Exception ex) {
            System.out.println("执行更新错误！");
        }
        return result;
    }

    public ResultSet executeQuery(String s) {
        //运行select语句，返回ResultSet结果节
        ResultSet rs = null;
        System.out.print("--查询语句:"+s+"\n");
        try {
            rs = stmt.executeQuery(s);
        } catch (Exception ex) {
            System.out.println("执行查询错误！");
        }
        return rs;
    }
    public void execQuery(String s){
        try {
            stmt.executeUpdate(s);
        } catch (SQLException e) {

            System.out.println("执行插入错误！");
        }
    }

    public void close() {
        try {
            stmt.close();
            conn.close();
        } catch (Exception e) {
        }
    }
}

上面仅展示部分代码哦，jsp文件中的CSS样式文件封装在本地！

✨✨✨✨✨✨✨✨✨✨✨✨✨最终结果展示如下✨✨✨✨✨✨✨✨✨✨✨✨

🎉🎉🎉🐱‍🏍🐱‍🏍🐱‍🏍🐱‍🏍🎇🎇🎇🎇🎆🎆🎆🎆🧨🧨🧨🧨🎃🎃🎃🎃🎑🎑🎑🎑🧵🧵

因为本学期刚好在做一个项目，动态登录和注册功能是该项目的一个小模块，寒假的时候我会实时更新项目的一些其它模块

希望大家多多支持！！！🤞🤞🤞🤞

有关动态实现web网页登陆和注册功能[保姆级教学]的更多相关文章

ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2
我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden
ruby-on-rails - Cucumber 是否只是 rspec 的包装器以帮助将测试组织成功能？ - 2
只是想确保我理解了事情。据我目前收集到的信息，Cucumber只是一个“包装器”，或者是一种通过将事物分类为功能和步骤来组织测试的好方法，其中实际的单元测试处于步骤阶段。它允许您根据事物的工作方式组织您的测试。对吗？最佳答案有点。它是一种组织测试的方式，但不仅如此。它的行为就像最初的Rails集成测试一样，但更易于使用。这里最大的好处是您的session在整个Scenario中保持透明。关于Cucumber的另一件事是您(应该)从使用您的代码的浏览器或客户端的角度进行测试。如果您愿意，您可以使用步骤来构建对象和设置状态，但通常您
电脑0x0000001A蓝屏错误怎么U盘重装系统教学 - 2
　　电脑0x0000001A蓝屏错误怎么U盘重装系统教学分享。有用户电脑开机之后遇到了系统蓝屏的情况。系统蓝屏问题很多时候都是系统bug，只有通过重装系统来进行解决。那么蓝屏问题如何通过U盘重装新系统来解决呢？来看看以下的详细操作方法教学吧。　　准备工作：　　1、U盘一个（尽量使用8G以上的U盘）。　　2、一台正常联网可使用的电脑。　　3、ghost或ISO系统镜像文件（Win10系统下载_Win10专业版_windows10正式版下载-系统之家）。　　4、在本页面下载U盘启动盘制作工具：系统之家U盘启动工具。　　U盘启动盘制作步骤：　　注意：制作期间，U盘会被格式化，因此U盘中的重要文件请注
华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2
华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o
基于C#实现简易绘图工具【100010177】 - 2
C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.
MIMO-OFDM无线通信技术及MATLAB实现（1）无线信道：传播和衰落 - 2
MIMO技术的优缺点优点通过下面三个增益来总体概括：阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下，MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中，可以获得复用增益，即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中，可以获得分集增益，即可靠性性能的改善。分集增益用独立衰落支路数来描述，即分集指数。在使用了空时编码的MIMO系统中，由于接收天线或发射天线之间的间距较远，可认为它们各自的大尺度衰落是相互独立的，因此分布式MIMO
阿里云国际版免费试用：如何注册以及注意事项 - 2
作为新的阿里云用户，您可以50免费试用多种优惠，价值高达1,700美元（或8,500美元）。这将让您了解和体验阿里云平台上提供的一系列产品和服务。如果您以个人身份注册免费试用，您将获得价值1,700美元的优惠。但是，如果您是注册公司，您可以选择企业免费试用，提交基本信息通过企业实名注册验证，即可开始价值$8,500的免费试用！本教程介绍了如何设置您的帐户并使用您的免费试用版。关于免费试用在我们开始此试用之前，您还必须遵守以下条款和条件才能访问您的免费试用：只有在一年内创建的账户才有资格获得阿里云免费试用。通过此免费试用优惠，用户可以免费试用免费试用活动页面上列出的每种产品一次。如果您有多个帐
【Java入门】使用Java实现文件夹的遍历 - 2
遍历文件夹我们通常是使用递归进行操作，这种方式比较简单，也比较容易理解。本文为大家介绍另一种不使用递归的方式，由于没有使用递归，只用到了循环和集合，所以效率更高一些！一、使用递归遍历文件夹整体思路1、使用File封装初始目录，2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组，取出每个File对象4-1、如果File是否是一个文件，打印4-2、否则就是一个目录，递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg
hadoop安装之保姆级教程（二）之YARN的配置 - 2
1.1.1 YARN的介绍为克服Hadoop1.0中HDFS和MapReduce存在的各种问题⽽提出的，针对Hadoop1.0中的MapReduce在扩展性和多框架⽀持⽅⾯的不⾜，提出了全新的资源管理框架YARN. ApacheYARN（YetanotherResourceNegotiator的缩写）是Hadoop集群的资源管理系统，负责为计算程序提供服务器计算资源，相当于⼀个分布式的操作系统平台，⽽MapReduce等计算程序则相当于运⾏于操作系统之上的应⽤程序。 YARN被引⼊Hadoop2,最初是为了改善MapReduce的实现，但是因为具有⾜够的通⽤性，同样可以⽀持其他的分布式计算模
ruby - Arrays Sets 和 SortedSets 在 Ruby 中是如何实现的 - 2
通常，数组被实现为内存块，集合被实现为HashMap，有序集合被实现为跳跃列表。在Ruby中也是如此吗？我正在尝试从性能和内存占用方面评估Ruby中不同容器的使用情况最佳答案数组是Ruby核心库的一部分。每个Ruby实现都有自己的数组实现。Ruby语言规范只规定了Ruby数组的行为，并没有规定任何特定的实现策略。它甚至没有指定任何会强制或至少建议特定实现策略的性能约束。然而，大多数Rubyist对数组的性能特征有一些期望，这会迫使不符合它们的实现变得默默无闻，因为实际上没有人会使用它:插入、前置或追加以及删除元素的最坏情况步骤复

动态实现web网页登陆和注册功能[保姆级教学]

涉及到相关内容如下：

🍇一个数据库

🍇JSP网页连接数据库

🍇注册和登录的JSP页面

🥗一个数据库 （我的博客有安装教程哦 MySql保姆级安装教程 🍬）

🍓软件安装

🥗JSP网页连接数据库

🍓配置mysql文件

🍓创建jsp文件，连接数据库，并读取出数据显示在jsp网页中

​​

🥗注册和登录的JSP页面

🍓新建login.jsp文件

🍓新建check.jsp

🍓创建register.jsp文件

🍓新建Cregister.jsp文件 ：

🍓创建DBBean.java文件

有关动态实现web网页登陆和注册功能[保姆级教学]的更多相关文章

随机推荐

🥗一个数据库（我的博客有安装教程哦 MySql保姆级安装教程 🍬）

🍓新建Cregister.jsp文件：