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

前言

这篇教程会带你一步步搞定JSP动态网页中的登录和注册功能。内容主要涉及数据库安装、JSP网页连接数据库，以及注册和登录页面的完整实现。如果你正打算搭建一个带用户系统的Web应用，这篇文章正好能帮你走通全套流程。

数据库

首先，得把数据库环境搭起来。这里用的是MySQL，安装过程就不细说了，直接上截图。

​​

可视化数据库界面软件也一并安排了，安装起来很顺手。

JSP网页连接数据库

配置mysql文件

​​

首先要将 mysql-connector-ja va-5.0.8-bin.jar 拷贝到 apache-tomcat-10.0.12-windows-x64\apache-tomcat-10.0.12\lib 目录下。

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

<%@ page language="ja va" contentType="text/html; charset=UTF-8"         pageEncoding="UTF-8"%><%@ page import="ja va.sql.*"%>        <%    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("
");            Statement stmt = null;            ResultSet rs = null;            String sql = "SELECT *FROM 用户名;";  //查询语句            stmt = conn.createStatement();            rs = stmt.executeQuery(sql);            out.print("查询结果：");            out.print("
");            out.println("名字"+"  "+"年龄 "+"  "+"身份"+"性别"+"用户账号"+"用户密码"+"练习电话"+"用户注册时间");            out.print("
");            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("
");                } catch (SQLException throwables) {                    throwables.printStackTrace();                }            }        }        else{            out.print("连接失败！");        }      }    catch (ClassNotFoundException e) {        e.printStackTrace();    }%>

连接成功的话，页面显示如下：

注册和登录的JSP页面

新建login.jsp文件

<%@ page contentType="text/html;charset=UTF-8" language="ja va" %>          
  
    
 登录
    
      
        账号              
      
        密码              
    
    登录    
      注册    
  
 

新建check.jsp

<%@ page import="ja va.sql.*" language="ja va" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>     <%  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("");        response.setHeader("refresh", "0;url=login.jsp");      }    }    else    {      out.print("");      /**       * 一秒刷新页面一次 response.setHeader("refresh","1");这个是没有参数的情况下自动刷新       *  二秒跳到其他页面 response.setHeader("refresh","2;URL=o");       */      response.setHeader("refresh", "0;url=login.jsp");    }  } catch (SQLException throwables) {    throwables.printStackTrace();  } %>

创建register.jsp文件

<%@ page contentType="text/html;charset=UTF-8" language="ja va" %>                          
        
        
            
注册
                                                                            点击注册                    
    
     
        
        
    
 

新建Cregister.jsp文件

<%@ page import="ja va.sql.*" language="ja va" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>       <%  request.setCharacterEncoding("UTF-8");  String name=(String)request.getParameter("name");  String username=(String)request.getParameter("username");  String password=(String)request.getParameter("password");  String phone=(String)request.getParameter("phone");    String sql="INSERT INTO 用户名(名字,用户账号,用户密码,联系电话) VALUES"+"('"+name+"',"+"'"+username+"',"+"'"+password+"'"+",'"+phone+"')";  db.execQuery(sql); %>

创建DBBean.ja va文件

package MySql;
import ja va.sql.*;
public class DBUtil {
    private String driverStr = "com.mysql.cj.jdbc.Driver";
    private String connStr = "jdbc:mysql://localhost:3306/用户表";
    private String dbusername = "root";
    private String dbpassword = "123456";
    private Connection conn = null;
    private Statement stmt = null;
    
    public DBUtil()
    {
        try
        {
            Class.forName(driverStr);
            conn = DriverManager.getConnection(connStr, dbusername, dbpassword);
            stmt = conn.createStatement();
        }
        catch (Exception ex) {
            System.out.println(ex.getMessage());
            System.out.println("数据连接失败！");
        }
    }
    
    public int executeUpdate(String s) {
        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) {
        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样式文件封装在本地。

最终结果展示如下：