1.注册页面register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script type="text/javascript">
        function sub(){
            alert("注册成功!");
        }
    </script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        body{
            background: url("img/timg.jpg") no-repeat center;
            background-size: 100%;
        }

        .rg_layout{
            width: 900px;
            height: 620px;
            border: 5px solid #F3E2A9;
            background-color: white;
            /* 让div水平居中*/
            margin: auto;
            margin-top: 15px;
        }
        .rg_left{
            float: left;
            margin: 20px;
        }
        .rg_left > p:first-child{
            color: #FFBF00;
            font-size: 20px;
        }
        .rg_left>p:last-child{
            color: #A4A4A4;
            font-size: 20px;
        }
        .rg_center{
            float: left;
            width: 500px;
        }
        .rg_right{
            float: right;
            margin:20px;
        }
        .rg_right p{
            font-size:13px;
        }
        .rg_right p a{
            color: #FFBF00;
        }

        .td_left{
            width: 100px;
            text-align: right;
            height: 30px;
        }
        .td_right{
            padding: 20px;
        }

        #username,#password,#Email,#name,#tel,#checked{
            width: 250px;
            height: 30px;
            border:1px solid #A4A4A4 ;
            border-radius:5px;
            padding-left:8px;
        }
        /*#checked{*/
        /*    width: 120px;*/
        /*}*/
        /*#img_check{*/
        /*    height:30px;*/
        /*    vertical-align: middle;*/
        /*}*/
        #btn_sub{
            width: 100px;
            height: 30px;
            background-color: #0080FF;
            border: 1px solid #0080FF;
        }
    </style>
</head>
<body>
<div class="rg_layout">
    <div class="rg_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>
    </div>
    <div class="rg_center">
        <div class="rg_form">
            <form action="/register" method="post">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="Email">邮箱</label></td>
                        <td class="td_right"><input type="email" name="Email" id="Email" placeholder="请输入邮箱"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入真实姓名"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="tel">手机号</label></td>
                        <td class="td_right"><input type="number" name="tel" id="tel" placeholder="请输入手机号"></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <input type="submit" id="btn_sub" value="注册" onclick="sub()">
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div class="rg_right">
        <p>已有账户?<a href="login.html">立即登录</a></p>
    </div>
</div>
</body>

2.登录页面 login.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0px;
           }
        body{
            background-image: url("img/login.png");
            background-size: 100%;
        }
        .box{
            width: 400px;
            height: 300px;
            margin:200px auto;
            display:block;
            position: relative;
        }

        .btn_style{
            width: 100px;
            height: 30px;
            display: block;
            position:absolute;

            text-decoration:none;
            text-align:center;
            line-height:30px;

            color: #fff;
            background-color: #058;
        }
        #btn_reset:HOVER {
            background-color: #047;
        }
        #btn_login:hover{
            background-color: #047;
        }
        #btn_reset{
            right:50px;
        }
        #btn_login{
            margin-left: 50px;
        }
    </style>

    <script type="text/javascript">
        function register() {
            window.location.href="register.html";
        }
    </script>

</head>
<body>
<div align="center" class="box">
    <form id="form"method="post" action="/login">
        userName:<input type="text" name="username" id="username" placeholder="请输入用户名"/><br>
        password&nbsp;:<input type="password" name="password" id="password" placeholder="请输入密码"/><br/>
        <tr>
            <td><input class="btn_style" id="btn_login" type="submit" value="登录"></td>
            <td><input type="button" id="btn_reset" class="btn_style" value="注册" onclick="register()"></td>
        </tr>
    </form>

</div>
</body>
</html>

3.实体类

package cn.frame.domin;


public class User {
    private String username;
    private String password;
    private String Email;
    private String name;
    private String tel;

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getEmail() {
        return Email;
    }

    public void setEmail(String email) {
        Email = email;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getTel() {
        return tel;
    }

    public void setTel(String tel) {
        this.tel = tel;
    }

}

4.Dao层UserDao类

package cn.frame.dao;

import cn.frame.domin.User;

import java.sql.*;

public class UserDao {

    private static final String driver="com.mysql.cj.jdbc.Driver";
    private static final String url="jdbc:mysql://localhost:3306/rg_log?serverTimezone=UTC&characterEncoding=utf-8&useSSL=false";
    private static String username="root";
    private static String password="hao20001010";

    public static void insert(User user) throws SQLException {
        String sql="insert into rgister values(?,?,?,?,?)";
        Connection connection = null;
        PreparedStatement statement = null;
        try {
            //加载驱动
            Class.forName(driver);
            connection = DriverManager.getConnection(url, username, password);
            //创建预编译的Statement
            statement = connection.prepareStatement(sql);
            //设置参数
            statement.setString(1,user.getUsername());
            statement.setString(2,user.getPassword());
            statement.setString(3,user.getEmail());
            statement.setString(4,user.getName());
            statement.setString(5,user.getTel());
            statement.executeUpdate();

        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            statement.close();
            connection.close();
        }

    }
    public boolean select(String username2,String password2) throws SQLException {
        Connection connection=null;
        Statement statement=null;
        
        String username1;
        String password1;
        String sql="select username,password from rgister";
        try {
            ResultSet rs = null;
            Class.forName(driver);
            connection = DriverManager.getConnection(url, username, password);
            statement= connection.createStatement();
            rs=statement.executeQuery(sql);
            while (rs.next()) {
                username1 = rs.getString("username");
                password1 = rs.getString("password");
                if (username1.equals(username2) && password1.equals(password2)) {
                    return true;
                }
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } finally {
            statement.close();
            connection.close();
        }
        return false;
    }
}

5.Servlet控制层(RegistServlet类,LoginServlet类,FailServlet类,SuccessServlet类)

package cn.frame.web.servlet;

import cn.frame.dao.UserDao;
import cn.frame.domin.User;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;


@WebServlet("/register")
public class RegistServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String Email = request.getParameter("Email");
        String name = request.getParameter("name");
        String tel = request.getParameter("tel");

        //SimpleDateFormat format=new SimpleDateFormat("yyyy-MM-dd");
        //Date date=format.parse(date);
        User user = new User();
        user.setUsername(username);
        user.setPassword(password);
        user.setEmail(Email);
        user.setName(name);
        user.setTel(tel);

        try {
            UserDao.insert(user);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}
package cn.frame.web.servlet;

import cn.frame.dao.UserDao;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;

@WebServlet("/login")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        UserDao userDao=new UserDao();
        try {
            if (userDao.select(username,password)){
                request.getRequestDispatcher("/success").forward(request,response);
            }else {
                request.getRequestDispatcher("/fail").forward(request,response);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }

    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

package cn.frame.web.servlet;

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

@WebServlet("/fail")
public class FailServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write("登录失败,用户名或密码错误");
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}
package cn.frame.web.servlet;

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

@WebServlet("/success")
public class SuccessServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write("恭喜你登录成功!");
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

6、总结
在这里插入图片描述
第一步:编写前端页面代码(register.html,login.html)
第二步:编写代码实现与数据库的交互(UserDao类)
第三步:使用Servlet接收表单数据(RegistServlet类,LoginServlet类)
第五步:将图片中的分隔线去掉,对于注册,可以将Servlet接收的数据封装到实体类User中,然后调用Dao层类中编写的insert()方法集合即可;对于登录可以通过调用Dao层类中编写的select()方法与接收的表单数据进行比对即可
重点在于第五步的使用

所用的技术:
Servlet、JDBC

posted on 2020-10-17 19:04  凸凸大军的一员  阅读(194)  评论(0编辑  收藏  举报