JSP动态实现web网页登陆和注册功能

目录
  • 前言 
  • 数据库
  • JSP网页连接数据库
    • 配置mysql文件
    • 创建jsp文件,连接数据库,并读取出数据显示在jsp网页中
  • 注册和登录的JSP页面
    • 新建login.jsp文件
    • 新建check.jsp
    • 创建register.jsp文件 
    • 新建Cregister.jsp文件 
    • 创建DBBean.java文件

前言 

涉及到相关内容如下:

数据库安装

JSP网页连接数据库

注册和登录的JSP页面

数据库

安装教程

​​

​​软件安装

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

链接 提取码: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" rel="external nofollow"  />
  <link rel="stylesheet" type="text/css" href="../Project/font-awesome.css" rel="external nofollow"  />
</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" rel="external nofollow"  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" rel="external nofollow" >
</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="#" rel="external nofollow"  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" rel="external nofollow" ><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'/>" rel="external nofollow" ;--%>
<%--    }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样式文件封装在本地!

最终结果展示如下

以上就是JSP动态实现web网页登陆和注册功能的详细内容,更多关于JSP网页登陆注册的资料请关注我们其它相关文章!

(0)

相关推荐

  • 关于JSP用户登录连接数据库详情

    目录 关于JSP用户登录连接数据库详情 1.首先创建po类 2.创建底层UserDao 3.创建UserService(一般都会调用UserDao) 4.写web层UserSrevlet 4.1 重写方法 4.2创建vo层并在里面创建ResultInfo类用于封装返回数据 5.开始从Dao开始写 6.开始写service层 7.编写最后的Servelt层 7.1 用户登陆 8.示例 关于JSP用户登录连接数据库详情 1.首先创建po类 与数据库一一对应 lombok生成get set方法 pac

  • jsp网页登陆验证

    jsp登陆验证,网页登陆验证带验证码校验,登录功能之添加验证码 part_1:专门用于生成一个验证码图片的类:VerificationCode.java package cn.mike.javase.test; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.io.File; import java.i

  • jsp实现用户自动登录功能

    理解并掌握Cookie的作用以及利用cookie实现用户的自动登录功能,实现下图效果 当服务器判断出该用户是首次登录的时候,会自动跳转到登录界面等待用户登录,并填入相关信息.通过设置Cookie的有效期限来保存用户的信息,关闭浏览器后,验证是否能够自动登录,若能登录,则打印欢迎信息:否则跳转到登录页面. login.jsp <%@ page language="java" import="java.util.*" pageEncoding="utf-

  • JSP实现用户登录、注册和退出功能

    本文讲述使用JSP实现用户登录,包括用户登录.注册和退出功能等. 1.系统用例图 2.页面流程图 3.数据库设计 本例使用oracle数据库 创建用户表 包括id,username,password和email,共4个字段 -- Create table create table P_USER ( id VARCHAR2(50) not null, username VARCHAR2(20), password VARCHAR2(20), email VARCHAR2(50) ) tablesp

  • JSP+MySQL实现网站的登录与注册小案例

    为了练手,我就自己试着做了一个网站的登录与注册的小案例.由于没有做美化处理,所以界面并不是很好看. 网站实现的功能如下:  •用户首次注册功能  •用户登录功能 下面我将会分模块展示 注册模块 首先需要一个注册界面,如下register.jsp: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOC

  • Jsp+Servlet实现简单登录注册查询

    本文实例为大家分享了Jsp+Servlet实现简单登录注册查询的具体代码,供大家参考,具体内容如下 1.注册功能: 制作一个注册页面 用户输入: 用户名 密码 年龄 注册成功:-->跳转至登录页面进行登录 注册失败:-->文字或其他形式的提示皆可 2.简易查询: 制作一个查询页面 输入用户名 显示该用户的用户名.密码.年龄 演示 1.启动进入登陆页面 2.点击注册,进入注册页面,成功跳转到登录页面 失败则提示 回到登录页面,登录成功进入查询页面 登录失败显示提示信息 输入用户名->显示该

  • JSP动态实现web网页登陆和注册功能

    目录 前言  数据库 JSP网页连接数据库 配置mysql文件 创建jsp文件,连接数据库,并读取出数据显示在jsp网页中 注册和登录的JSP页面 新建login.jsp文件 新建check.jsp 创建register.jsp文件  新建Cregister.jsp文件  创建DBBean.java文件 前言  涉及到相关内容如下: 数据库安装 JSP网页连接数据库 注册和登录的JSP页面 数据库 安装教程 ​​ ​​软件安装 (可视化数据库界面软件安装)拿走不谢 链接 提取码:qwer JSP

  • java web实现简单登录注册功能全过程(eclipse,mysql)

    目录 1.工程文件 2.DBBean.java 3.login.jsp 4.check.jsp 5.zhuce.jsp 6.zhuceck.jsp 7.success.jsp 8.zhucesu.jsp 9.数据库创造 总结 1.工程文件 基本的文件布局,没使用任何css文件,就是简单实现登录注册,页面没有做任何美化: 使用的是MySQL8.0.12,8一下的mysql链接代码有微小差别,网上教程基本都是8一下的,随便找找就能找到: 2.DBBean.java package Bean; imp

  • php实现微信扫码自动登陆与注册功能

    本文实例讲述了php实现微信扫码自动登陆与注册功能.分享给大家供大家参考,具体如下: 微信开发已经是现在程序员必须要掌握的一项基本的技术了,其实做过微信开发的都知道微信接口非常的强大做起来也非常的简单,这里我们一起来看一个微信自动登陆注册的例子. php 微信扫码 pc端自动登陆注册 用的接口scope 是snsapi_userinfo,微信登陆一个是网页授权登陆,另一个是微信联合登陆 网页授权登陆:http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b647

  • js实现登陆与注册功能

    本文实例为大家分享了js实现登陆与注册功能的具体代码,供大家参考,具体内容如下 1.首先在phpstudy文件中寻找到一个文件名叫 "www" 的文件  在里面创建html,js,php文件: 2.在Navicat 软件中连接到phpstudy的MySQL: 3.在Navicat 软件中寻找一个数据库 并创建一个表格: 4.书写html代码(如下图1)编写简单的注册表单结构 并通过js 给表单验证:点击注册跳转到php文件中: 5.php代码(如下图2)  首先获取html代码中表单的

  • YII2框架中自定义用户认证模型,完成登陆和注册操作示例

    本文实例讲述了YII2框架中自定义用户认证模型,完成登陆和注册操作.分享给大家供大家参考,具体如下: 有些时候我们需要自已定义用户类,操作自已建的用户表,来完成登陆和注册功能. 用户表结构如下,当然可以根据自已的需要添加或删除: CREATE TABLE `tb_user` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT '用户ID', `name` varchar(32) DEFAULT '' COMMENT '用户名', `pw

  • php版微信公众平台之微信网页登陆授权示例

    本文实例讲述了php版微信公众平台之微信网页登陆授权.分享给大家供大家参考,具体如下: 微信公众平台实现微信网页登陆授权开发其实是非常的简单了,因为官方的参考程序了,下面小编就看了一站长根据官方参考做的一个网页登陆授权例子,大家可看看. 文件1:index.php //换成自己的接口信息 $appid = 'XXXXX'; header('location:https://open.weixin.qq.com/connect/oauth2/authorize?appid='.$appid.'&r

  • Python3实现Web网页图片下载

    先来介绍一些python web编程基础知识 1. GET与POST区别 1)POST是被设计用来向web服务器上放东西的,而GET是被设计用来从服务器取东西的,GET也能够向服务器传送较少的数据,而Get之所以也能传送数据,只是用来设计告诉服务器,你到底需要什么样的数据.POST的信息作为HTTP 请求的内容,而GET是在HTTP 头部传输的: 2)POST与GET在HTTP 中传送的方式不同,GET的参数是在HTTP 的头部传送的,而Post的数据则是在HTTP 请求的内容里传送; 3)PO

  • JSP动态网页开发原理详解

    一.什么是JSP?     JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP这门技术的最大的特点在于,写jsp就像在写html,但它相比html而言,html只能为用户提供静态数据,而Jsp技术允许在页面中嵌套java代码,为用户提供动态数据. 二.JSP原理 2.1.Web服务器是如何调用并执行一个jsp页面的? 浏览器向服务器发请求,不管访问的是什么资源,其实都是在访问Servlet,所以当访问一个jsp

  • JSP动态网页开发技术概述

    在动态web项目的开发中,经常需要动态生成HTML内容(如系统中的当前在线人数需要动态生成).如果使用Servlet实现HTML页面数据的统计,则需要使用大量的输出语句.同时,如果静态内容和动态内容混合在一起,那么也将导致程序非常臃肿.为了客服Servlet的这些缺点,Oracle(Sun)公司推出了JSP技术. 1.JSP概述 JSP(Java Server Pages)是建立在Servlet规范之上的动态网页开发技术,其实质是一个简化的Servlet.在JSP文件中,HTML和Java代码共

随机推荐