Login and Register

2021-10-01

自己实现一波，用户的登录和注册功能：

1. 简单的登录以及注册界面的实现

登录界面代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#login-box {
				width: 30%;
				margin: 0px auto;
				margin-top: 15%;
				background-color: #00000080;
				text-align: center;
				padding: 20px 50px;
			}

			#login-box h1 {
				color: white;
			}
			#login-box button {
				border: 0;
				width: 150px;
				height: 30px;
				margin-top: 18px;
				font-size: 18px;
				color: white;
				border-radius: 25px;
				background-image: linear-gradient(to right,#00dbde 0%,#fc00ff 100%);/* 为按钮设置渐变色 */
			}
			input {
				width: 200px;
				border: 0;
				font-size: 18px;
				background-color: #ffffff00;
				color:white;
				padding: 5px 10px;
				border-bottom: 5px solid white;
			}
			body {
				background: url("../img/bj4.png");
				background-size: 100% auto;
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
		<form action="#" method="post">
			<div id="login-box">
				<h1>Login</h1>
				<div class="form">
					<div class="item">
						<i></i>
						<input type="text" name="username">
					</div>
					<div class="item">
						<i></i>
						<input type="password" name="password">
					</div>
				</div>
				<button type="submit">Login</button>
				<button type="submit">Regist</button>
			</div>
		</form>
	</body>
</html>

效果图：

注册界面代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#login-box {
				width: 30%;
				margin: 0px auto;
				margin-top: 15%;
				background-color: #00000080;
				text-align: center;
				padding: 20px 50px;
			}

			#login-box h1 {
				color: white;
			}
			span { 
				text-align: right;
				color: white;
			}
			#login-box button {
				border: 0;
				width: 150px;
				height: 30px;
				margin-top: 18px;
				font-size: 18px;
				color: white;
				border-radius: 25px;
				background-image: linear-gradient(to right,#00dbde 0%,#fc00ff 100%);/* 为按钮设置渐变色 */
			}
			input {
				width: 200px;
				border: 0;
				font-size: 18px;
				background-color: #ffffff00;
				color:white;
				padding: 5px 10px;
				border-bottom: 5px solid white;
			}
			body {
				background: url("../img/bj4.png");
				background-size: 100% auto;
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
		<form action="#" method="post">
			<div id="login-box">
				<h1>Register</h1>
				<div class="form">
					<div class="item">
						<i></i>
						<span>用户名：</span>
						<input type="text" name="username">
					</div>
					<div class="item">
						<i></i>
						<span>密码：</span>
						<input type="password" name="password">
					</div>
					<div class="item">
						<i></i>
						<span>确认密码：</span>
						<input type="password" name="password">
					</div>
					<div class="item">
						<i></i>
						<span>邮箱：</span>
						<input type="text" name="password">
					</div>
					<div class="item">
						<i></i>
						<span>验证码：</span>
						<input type="text" name="password">
					</div>
				</div>
				<button type="submit">Regist</button>
			</div>
		</form>
	</body>
</html>

效果图：

2. 创建数据库以及表格

sql代码：

DROP DATABASE IF EXISTS myproject;
CREATE DATABASE myproject;
USE myproject;
CREATE TABLE t_user(
`id` INT PRIMARY KEY AUTO_INCREMENT,
`username` VARCHAR(20) NOT NULL UNIQUE,
`password` VARCHAR(32) NOT NULL,
`email` VARCHAR(200)
);
INSERT INTO t_user(`username`,`password`,`email`) VALUES('admin','admin','admin@atguigu.com');
SELECT * FROM t_user;

3. 编写数据库表格对应的JavaBean对象

package com.myProject1.pojo;

/**
 * @author yhc
 *
 */
public class User {
    private Integer id;
    private String username;
    private String password;
    private String email;

    public User(Integer id, String username, String password, String email) {
        this.id = id;
        this.username = username;
        this.password = password;
        this.email = email;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    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) {
        this.email = email;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", email='" + email + '\'' +
                '}';
    }
}

4. 编写JDBCUtils工具类

4.1 需要导入的jar包

druid-1.1.9.jar

mysql-connector-java-5.1.7-bin.jar

4.2 在src下编写jdbc配置文件

username=root
password=123456
url=jdbc:mysql://localhost:3306/myproject
driverClassName=com.mysql.jdbc.Driver
initialSize=5
maxActive=10

4.3 编写JDBCUtils工具类

package com.myProject1.utils;

import com.alibaba.druid.pool.DruidDataSource;
import com.alibaba.druid.pool.DruidDataSourceFactory;
import javax.sql.DataSource;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.Properties;

/**
 * @author yhc
 *
 */
public class JDBCUtils {
    private static DataSource dataSource;


    static {
        try {
            Properties properties = new Properties();
            InputStream inputStream = JDBCUtils.class.getClassLoader().getResourceAsStream("jdbc.properties");
            properties.load(inputStream);
            dataSource = (DruidDataSource)DruidDataSourceFactory.createDataSource(properties);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 获取连接
     * @return 若返回值为null说明获取失败
     */
    public static Connection getConnection(){
       Connection connection = null;
        try {
            connection = dataSource.getConnection();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return connection;
    }

    public static void close(Connection conn){
        try {
            conn.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }

    }
}

4.4 编写测试类

package com.atguigu.test;

import com.myProject1.utils.JDBCUtils;
import org.junit.jupiter.api.Test;


/**
 * @author yhc
 * 
 */
public class JDBCUtilsTest {

    @Test
    public void getConnection() {
        System.out.println(JDBCUtils.getConnection());
    }
}

5.编写BaseDao类

导入DBUtils的jar包
BaseDao代码：

package com.myProject1.Dao;

import com.myProject1.utils.JDBCUtils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.ResultSetHandler;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.apache.commons.dbutils.handlers.ScalarHandler;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;

/**
 * @author yhc
 * 针对数据库的通用操作
 */
public abstract class BaseDao {
    private QueryRunner queryRunner = new QueryRunner();

    /**
     * 增删改
     * @param sql sql语句
     * @param args 占位符
     * @return 返回-1 说明执行失败
     */
    public int update(String sql,Object... args){
        Connection conn = JDBCUtils.getConnection();
        try {
            return queryRunner.update(conn,sql,args);
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            JDBCUtils.close(conn);
        }
        return -1;
    }

    /**
     * 返回值为一个对象
     * @param type
     * @param sql
     * @param args
     * @param <T>
     * @return 返回null说明没有找到
     */
    public <T> T queryForOne(Class<T> type,String sql,Object... args){
        Connection conn = JDBCUtils.getConnection();
        try {
            return queryRunner.query(conn, sql,new BeanHandler<T>(type),args);
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            JDBCUtils.close(conn);
        }
        return null;
    }

    /**
     * 返回值为多个对象
     * @param type
     * @param sql
     * @param args
     * @param <T>
     * @return
     */
    public <T> List<T> queryForList(Class<T> type, String sql, Object... args){
        Connection conn = JDBCUtils.getConnection();
        try {
            return queryRunner.query(conn, sql,new BeanListHandler<T>(type),args);
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            JDBCUtils.close(conn);
        }
        return null;
    }

    public Object queryForSingleValue(String sql,Object... args){
        Connection conn = JDBCUtils.getConnection();
        try {
            return queryRunner.query(conn,sql,new ScalarHandler(),args);
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            JDBCUtils.close(conn);
        }
        return null;
    }
}

6. 编写UserDao以及测试

6.1 UserDao接口

package com.myProject1.Dao;

import com.myProject1.pojo.User;

/**
 * @author yhc
 *
 */
public interface UserDao {

    
    public User queryByUsername(String username);

    public User queryByUsernameAndPassword(String username,String password);

    public boolean saveUser(User user);
}

6.2 编写UserDaoImpl

package com.myProject1.Dao;

import com.myProject1.pojo.User;

/**
 * @author yhc
 *
 */
public class UserDaoImpl extends BaseDao implements UserDao{
    @Override
    public User queryByUsername(String username) {
        String sql = "select id, username, password, email from t_user where username = ?";
        return  queryForOne(User.class,sql,username);
    }

    @Override
    public User queryByUsernameAndPassword(String username, String password) {
        String sql = "select id,username, password ,email from t_user where username = ? and password = ?";
        return queryForOne(User.class,sql,username,password);
    }

    @Override
    public int saveUser(User user) {
        String sql = "insert into t_user(`username`,`password`,`email`) values(?,?,?)";
        return update(sql,user.getUsername(),user.getPassword(),user.getEmail());
    }
}

6.3编写测试类

package com.myProject1.test;

import com.myProject1.Dao.UserDao;
import com.myProject1.Dao.UserDaoImpl;
import com.myProject1.pojo.User;
import org.junit.jupiter.api.Test;

import static org.junit.jupiter.api.Assertions.*;

/**
 * @author yhc
 * @creat 2021-&{MONTH}-&{DAY}21:30
 */
class UserDaoTest {

    UserDao userDao = new UserDaoImpl();
    @Test
    void queryByUsername() {
        System.out.println(userDao.queryByUsername("admin"));
    }

    @Test
    void queryByUsernameAndPassword() {
        System.out.println(userDao.queryByUsernameAndPassword("admin","admin"));
    }

    @Test
    void saveUser() {
        System.out.println(userDao.saveUser(new User(null,"hhh","123456","yhc@qq.com")));
    }
}

7. 编写UserService

package com.myProject1.service;

import com.myProject1.pojo.User;

/**
 * @author yhc
 *
 */
public interface UserService {
    public User login(User user);

    public void register(User user);

    public boolean existsUserName(String username);
}

UserServiceImpl:

package com.myProject1.service;

import com.myProject1.Dao.UserDao;
import com.myProject1.Dao.UserDaoImpl;
import com.myProject1.pojo.User;

/**
 * @author yhc
 *
 */
public class UserServiceImpl implements UserService{
    private UserDao userDao = new UserDaoImpl();
    @Override
    public User login(User user) {
        return userDao.queryByUsernameAndPassword(user.getUsername(),user.getPassword());
    }

    @Override
    public void register(User user) {
        userDao.saveUser(user);
    }

    @Override
    public boolean existsUserName(String username) {
        if(userDao.queryByUsername(username) == null){
            return false;
        }else {
            return true;
        }
    }
}

8. web层

8.1 编写RegistServlet

package com.myProject1.web;

import com.myProject1.pojo.User;
import com.myProject1.service.UserService;
import com.myProject1.service.UserServiceImpl;

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

/**
 * @author yhc
 *
 */
public class RegisterServlet extends HttpServlet {
    private UserService userService = new UserServiceImpl();
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取请求的参数
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        String email = req.getParameter("email");
        String code = req.getParameter("code");

        //验证验证码是否正确
        if("abcde".equalsIgnoreCase(code)){
            //正确，验证用户名是否可用
            if(userService.existsUserName(username)){
                //不可用 请求转发到注册页面
                System.out.println("用户名：" + username + "不可用!");
                req.getRequestDispatcher("/pages/register.html").forward(req,resp);
            }else {
                //可用 请求转发到注册成功页面
                //保存用户
                userService.register(new User(null,username,password,email));

                //跳转回注册成功页面
                req.getRequestDispatcher("/pages/register_success.html").forward(req,resp);
            }
        }else {
            System.out.println("验证码：" +  code + "错误！");
            req.getRequestDispatcher("/pages/register.html").forward(req,resp);
        }
    }
}

8.2 regist.html中的变化

<head>
	<meta charset="utf-8">
	<base href="http://localhost:8080/myProject1/">
	<title></title>
	<link type="text/css" rel="stylesheet" href="static/style.css">
</head>

8.3 loginServlet的实现

package com.myProject1.web;

import com.myProject1.pojo.User;
import com.myProject1.service.UserService;
import com.myProject1.service.UserServiceImpl;

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

/**
 * @author yhc
 *
 */
public class loginServlet extends HttpServlet {
    private UserService userService = new UserServiceImpl();
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.获取请求的参数
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        User login = userService.login(new User(null, username, password, null));
        if(login == null){
            //登陆失败
            req.getRequestDispatcher("pages/login.html").forward(req,resp);
        }else{
            req.getRequestDispatcher("pages/login_success.html").forward(req,resp);
        }

    }
}

<head>
	<meta charset="utf-8">
	<base href="http://localhost:8080/myProject1/">
	<title></title>
	<link type="text/css" rel="stylesheet" href="static/style.css">
</head>

web.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>RegisterServlet</servlet-name>
        <servlet-class>com.myProject1.web.RegisterServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>RegisterServlet</servlet-name>
        <url-pattern>/registerServlet</url-pattern>
    </servlet-mapping>

    <servlet>
        <servlet-name>loginServlet</servlet-name>
        <servlet-class>com.myProject1.web.loginServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>loginServlet</servlet-name>
        <url-pattern>/loginServlet</url-pattern>
    </servlet-mapping>
</web-app>

9.小结

简单的实现了一下登录和注册功能，bug还有很多(比如确认密码时的验证)，再复习一段时间后优化一波。（主要是html,css,js还没有学多少，做的页面太丑了）。

用到的技术有：

html
css
servlet
xml
jdbc