广告位联系
返回顶部
分享到

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

JSP 来源:互联网 作者:秩名 发布时间:2022-01-29 22:17:24 人浏览
摘要

前言 涉及到相关内容如下: 数据库安装 JSP网页连接数据库 注册和登录的JSP页面 数据库 安装教程 ?? ??软件安装 (可视化数据库界面软件安装)拿走不谢 链接提取码:qwer JSP网页

前言 

涉及到相关内容如下:

数据库安装

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网页中

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

<%@ 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文件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<!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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

<%@ 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文件 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

<!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文件 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

<%@ 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文件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

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样式文件封装在本地!

最终结果展示如下


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://blog.csdn.net/m0_55858611/article/details/121990183
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计