Javaweb实现动态登入(包含坑点和痛点)

具体功能操作

别点为了传给博客才发的

1.界面展示

登入界面

注册界面(有js的表单验证功能)

文件位置界面与功能

1.实现链接数据库和执行增加和查找
2.执行servlet的post方法
3.不用XML前后端的映射
4.登入失败的界面
5.自带的
6.我的首页的界面
7.登入成功的界面

2.代码

1.JDBC

package com.example.mytest;
import java.sql.*;

public class JDBC {
    PreparedStatement pps = null;
    Connection connection=null;
    ResultSet resultSet=null;
    public void insert(String userName,String userPass){
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            String uName="root";
            String password="123456";
            String url="jdbc:mysql://localhost:3306/user?serverTimezone=UTC";
            connection= DriverManager.getConnection(url,uName,password);
            String sql="insert into userinform (account,password)values(?,?)";
            pps= connection.prepareStatement(sql);
            pps.setString(1,userName);
            pps.setString(2,userPass);
            pps.executeUpdate();
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            try {
                if(connection!=null){
                    connection.close();
                }
                if (pps != null) {
                    pps.close();
                }
                if (resultSet != null) {
                    resultSet.close();
                }
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
    }
    public int select(String userName,String userPass){
        int count = 0;
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            String uName="root";
            String password="123456";
            String url="jdbc:mysql://localhost:3306/user?serverTimezone=UTC";
            connection= DriverManager.getConnection(url,uName,password);
            String sql="select * from userinform where account=? and password=?";
            pps= connection.prepareStatement(sql);
            pps.setString(1,userName);
            pps.setString(2,userPass);

            resultSet= pps.executeQuery();
            if(resultSet.next()){
                System.out.println("登入成功!");
                count= 1;
            }else {
                System.out.printf("登入失败!");
                count=0;
            }
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            try {
                if(connection!=null){
                    connection.close();
                }
                if (pps != null) {
                    pps.close();
                }
                if (resultSet != null) {
                    resultSet.close();
                }
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
        return count;
    }

}

因为就两个操作(增加和查找)就没有封装成一个DButil
2.userServlet

package com.example.mytest;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class usersServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        JDBC jdbc=new JDBC();
        req.setCharacterEncoding("utf-8");
        String  userName = req.getParameter("userName");
        String  userPass = req.getParameter("userPass");
        String value=req.getParameter("resign");
        int i= Integer.parseInt(value);
        if(i==1){
           int j= jdbc.select(userName,userPass);
           if(j==1){
               req.getRequestDispatcher("/success.html").forward(req,resp);
           }req.getRequestDispatcher("/false.html").forward(req,resp);

        }else {
            jdbc.insert(userName,userPass);
            System.out.println("post--->"+userName+","+userPass);
        }
        req.getRequestDispatcher("/success.html").forward(req,resp);
    }
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)  {

        String uage = req.getParameter("uage");
        String upass = req.getParameter("upass");
        System.out.println(uage+"---"+upass);
    }
}

3.XML文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>b1</servlet-name>
        <servlet-class>
            com.example.mytest.usersServlet
        </servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>b1</servlet-name>
        <url-pattern>/testrequest</url-pattern>
    </servlet-mapping>
</web-app>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登入失败</title>
</head>
<body>
<h1>登入失败请验证信息</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登入成功</title>
</head>
<body>
<h1>恭喜登入成功</h1>
</body>
</html>

6.登入界面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>导航栏</title>
  <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  <script type="text/javascript" src="js/bootstrap.js"></script>
  <link rel="stylesheet" href="css/bootstrap.css" />
  <script type="text/javascript" src="js/myJs.js" >
  </script>
  <style>
    a{
      margin-left: 60px;
    }
  </style>
</head>

<body>
<nav class="navbar navbar-default" role="navigation">
  <a class="navbar-brand" href="#">程序员创新大会</a>
  <div class="navbar-header">
    <ul class="nav nav-pills">
      <li class="active"><a href="导航栏.html">首页</a></li>
      <li><a data-toggle="modal" data-target="#myModal">登入</a></li>
      <li><a data-toggle="modal" data-target="#myModal2">注册</a></li>
      <li><a href="#">关于我们</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          优秀员工 <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">张三</a></li>
          <li><a href="#">李四</a></li>
          <li><a href="#">王二</a></li>
          <li class="divider"></li>
          <li><a href="#">更多....</a></li>
        </ul>
      </li>
      <li><a href="大众评论.html">大众评论</a></li>
    </ul>
  </div>
  <div style="float: right;">
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button class="btn glyphicon glyphicon-search"></button>
    </form>
  </div>
</nav>
<div id="myCarousel" class="container carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="img/nav1.jpg" />
      <div class="carousel-caption">第一张图</div>
    </div>
    <div class="item ">
      <img src="img/nav2.jpg" />
      <div class="carousel-caption">第二张图</div>
    </div>
    <div class="item ">
      <img src="img/nav3.jpg" />
      <div class="carousel-caption">第三张图</div>
    </div>
  </div>
  <a href="#myCarousel" class="carousel-control left" data-slide="prev">&lt;</a>
  <a href="#myCarousel" class="carousel-control right" data-slide="next">&gt;</a>
</div>
<form action="testrequest" method="post" class="form-horizontal" role="form" >
<div id="myModal" class=" container modal fade">
  <div class="modal-dialog">
    <div class="modal-content col-sm-8">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">请登入</h4>
      </div>
      <div class="modal-body">
          <div class="form-group">
            <label  class="col-sm-3 control-label"><span class="glyphicon glyphicon-user">账号：</span></label>
            <div class="col-sm-8">
              <input name="userName" type="text" name="stuId" class="form-control" />
            </div>
          </div>
          <div class="form-group">
            <label  class="col-sm-3 control-label"><span class="glyphicon glyphicon-lock">密码：</span></label>
            <div class="col-sm-8">
              <input name="userPass" type="password" class="form-control" />
            </div>
          </div>
      </div>
      <div class="modal-footer">
        <button type="submit" name="resign" value="1"  >提交</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
</form>
<form action="testrequest" method="post" class="form-horizontal" role="form" onsubmit="register()" >
<div id="myModal2" class=" container modal fade">
  <div class="modal-dialog">
    <div class="modal-content col-sm-8">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">请添加必要信息</h4>
      </div>
      <div class="modal-body">
          <label>
            <p>
              账号:
            </p>
            <input type="text" name="userName" id="useName"  placeholder="请输入账号" onblur="validateName()" /><span id="nameMsg">用户名为至少6位</span>
          </label><br />
          <label>
            <p>密码:</p>
            <input type="password" name="userPass" id="password1" placeholder="请输入密码" onblur="validatepassword()" /><span id="pwdMsg1">密码至少为8位</span>
          </label><br />
          <label>
            <p>确认密码:</p>
            <input type="password" id="password2" placeholder="再次输入密码" onblur="confirmpwd()" /><span id="pwdMsg2">确认密码一致</span>
          </label><br />
          <p>性别:</p>
          <select id="gender" onblur="validategender()">
            <option value="-1">请选择性别</option>
            <option value="0" >女</option>
            <option value="1" >男</option>
          </select><span id="gendermsg"></span><br /><br />
          <p></p>
          <button name="resign" value="9" class="btn btn-success" type="submit" >注册</button>
          <button type="reset "class="btn btn-default">重置</button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-info" data-dismiss="modal" onclick="alert('!')">提交</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
</form>
</body>
</html>

界面可以自己编写

3.最主要的还是帮你们避坑吧

1.问题:发现自己的CSS和JS文件没有效果
解决方法:像你导jar包一样要导入依赖中

2.问题:发现自己代码没错但是有空指针异常说Classforname("…");找不到驱动器但是自己单独用main方法却可以导入数据

解决方法:
当我们发布web项目到tomcat时，访问地址时会报一个classnotfound的错误，但是eclipse中的项目中都已经添加了相应的类，有一种比较容易犯的错误是，你没有把额外所需的jar包加到tomcat中的lib文件夹中，在这里介绍一种在项目中直接添加jar包到lib目录下：
右键已创建的web项目——properties属性——点击Deployment Assembly——Add——双击Java Build Path Entries——将你所需的jar包选中——finish即可。
3.问题:还是找不到Tomcat的目录(lib)
最简单的解决方法:
我因为找不到Tomcat的lib所以我直接简单粗暴的找到了我Tomcat的下载的位置然后找到lib直接将MySQL的jar包粘贴进去了然后完美解决了

4.总结

遇到bug不用担心一步步根据下面提示解决多思考

还有什么问题可以评论我看到会的都会回答的