最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JSP动态实现web网页登陆和注册功能
时间：2025-07-05 20:55:01 编辑：袖梨 来源：一聚教程网
这篇文章主要介绍是动态实现web网页登陆和注册功能的示例代码，文中代码讲解详细，对我们学习JSP有一定的帮助，感兴趣的小伙伴可以跟随小编一起学习一下
前言
涉及到相关内容如下：
数据库安装
JSP网页连接数据库
注册和登录的JSP页面
数据库
安装教程
软件安装
（可视化数据库界面软件安装）拿走不谢
链接 提取码：qwer
JSP网页连接数据库
配置mysql文件
首先要将mysql-connector-java-5.0.8-bin.jar 拷到apache-tomcat-10.0.12-windows-x64apache-tomcat-10.0.12lib文件目录下
创建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("名字")+"  "+rs.getString("年龄")+"  "+rs.getString("身份")+rs.getString("性别")+"  "+rs.getString("用户账号")+"  "+rs.getString("用户密码")+"  "+rs.getString("联系电话")+"  "+rs.getString("用户注册时间")+"  "); //将查询结果输出out.print("<br/>");} catch (SQLException throwables) {throwables.printStackTrace();}//out.println(rs.getString("名字")+"  "+rs.getString("年龄")+"  "+rs.getString("身份")+rs.getString("性别")+"  "+rs.getString("用户账号")+"  "+rs.getString("用户密码")+"  "//+rs.getString("联系电话")+"  "+rs.getString("用户注册时间")+"  "); //将查询结果输出//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页面中使用的JavaBeanjsp: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";//上面第一点解释了为什么要加cjprivate 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样式文件封装在本地！
最终结果展示如下
相关文章
- 蛋仔派对艾比橘福猫怎么抓 橘福猫捕捉位置方法 07-07
- 解限机好玩吗 解限机游戏特色一览 07-07
- Dreamweaver CC2019代码怎么快速对齐? 07-07
- PS电商皮鞋类产品的后期修图技巧经验分享 07-07
- 微信朋友圈食品谣言有哪些特征?如何被制造出来? 07-07
- 炒币用什么软件app？国内能炒币的软件推荐 07-07