JavaWeb登录注册的Demo含源码注释适合初学者

最新推荐文章于 2024-07-01 22:34:48 发布

二手Java程序员

最新推荐文章于 2024-07-01 22:34:48 发布

阅读量1.7k

点赞数 3

分类专栏： Demo & 项目案例文章标签：数据库 java 服务器

本文链接：https://blog.csdn.net/a778203081/article/details/129968828

版权

Demo & 项目案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章展示了如何在JavaWeb环境中实现用户登录和注册功能。通过DAO层、实体类以及Druid数据库连接池进行数据库操作，包括用户信息的持久化和查询。当用户登录时，检查数据库中是否存在该用户，若无则引导至注册页面。注册成功后，用户信息被插入数据库，并重新引导回登录页面。

摘要由CSDN通过智能技术生成

数据库的涉及

需要手动插入几条数据

CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `name` varchar(50) NOT NULL,
  `phone` varchar(11) NOT NULL COMMENT '手机号',
  `qq` varchar(100) DEFAULT NULL COMMENT 'QQ',
  `age` tinyint(3) unsigned DEFAULT NULL COMMENT '年龄',
  `createtime` varchar(20) DEFAULT NULL,
  `sex` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `name` (`name`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8 COMMENT='系统用户表'

源码资源下载链接

如果需要开发工具私信联系

项目需要的配置环境

Tomcat9

目录结构

在这里插入图片描述

分别解释一下目录结构
Dao 操作数据层
pojo 实体类
service 服务器层
utils 工具类
web 层接收用户数据的数据

登录界面
在这里插入图片描述
进入主页面

注册界面
在这里插入图片描述

设计需求，用户登录数据库里有注册的用户学习就直接登录成功跳转到主界面
如果没有用户信息，就提示登录失败并提示用户注册，然后注册，注册成功后会再次跳转到登录界面，
并查看数据库会我们插入的有数据。

Dao包下
在这里插入图片描述

import com.hui.pojo.User;

public interface UserDao {
    /**
     *  持久层
     *
     * @param name 用户名
     * @param phone 手机好
     * @return 返回查询的数据
     * 登录校验功能
     */
    User login(String name, String phone);

    /**
     *
     * @param user 封装的是用户的注册信息
     * @return
     * 注册功能
     */
    int insert(User user);
}

import com.hui.Dao.UserDao;
import com.hui.pojo.User;
import com.hui.utils.DBUtil;

public class UserDaoIpl implements UserDao {

    /**
     *
     * @param name 用户名
     * @param phone 手机好
     * @return
     */
    @Override
    public User login(String name, String phone) {
        String SQl = "select * from user where name = ? and phone = ?";
        User result = DBUtil.selectOne(SQl,User.class,name,phone);
        return result;

    }

    /**
     *
     * @param user 封装的是用户的注册信息
     * @return
     */
    @Override
    public int insert(User user) {
       String SQL = "insert into user (name,phone,age,qq,sex,createtime) values (?,?,?,?,?,?);";
       int result = DBUtil.update(SQL,user.getName(),user.getPhone(),user.getAge(),user.getQq(), Integer.parseInt(user.getSex()),user.getCreatetime());
        return result;
    }
}

在这里插入图片描述

/**
 * @date 2023/3/28
 * @desc  使用lombok插件
 * 1.去插件商店搜索下载
 * 2.pom文件中 添加依赖
 * 3.使用相关的注解
 */
// 注解
//
//@Data
//@AllArgsConstructor
//@NoArgsConstructor

public class User {
//   private Integer id;
   private String name;
   private String phone;
   private String qq;
   private Integer age;
   private String sex;
   private String createtime;

   public User(String name, String phone, String qq, Integer age, String sex, String createtime) {
      this.name = name;
      this.phone = phone;
      this.qq = qq;
      this.age = age;
      this.sex = sex;
      this.createtime = createtime;

   }

   public User() {
   }

   public String getName() {
      return name;
   }

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

   public String getPhone() {
      return phone;
   }

   public void setPhone(String phone) {
      this.phone = phone;
   }

   public String getQq() {
      return qq;
   }

   public void setQq(String qq) {
      this.qq = qq;
   }

   public Integer getAge() {
      return age;
   }

   public void setAge(Integer age) {
      this.age = age;
   }

   public String getSex() {
      return sex;
   }

   public void setSex(String sex) {
      this.sex = sex;
   }

   public String getCreatetime() {
      return createtime;
   }

   public void setCreatetime(String createtime) {
      this.createtime = createtime;
   }

   @Override
   public String toString() {
      return "User{" +
              "name='" + name + '\'' +
              ", phone='" + phone + '\'' +
              ", qq='" + qq + '\'' +
              ", age=" + age +
              ", sex='" + sex + '\'' +
              ", createtime='" + createtime + '\'' +
              '}';
   }


}

在这里插入图片描述

import com.hui.Dao.Impl.UserDaoIpl;
import com.hui.Dao.UserDao;
import com.hui.pojo.User;
import com.hui.service.UserService;

public class UserServiceImpl implements UserService {
    /**
     * 事务层
     */
    UserDao userDao = new UserDaoIpl();
    @Override
    public User login(String name, String phone) {
        User result = userDao.login(name,phone);
        return result;
    }

    @Override
    public int insert(User user) {
        int result = userDao.insert(user);
        return result;
    }
}


import com.hui.pojo.User;

public interface UserService {

    /**
     * 事务层
     * @param name 用户输入的用户名
     * @param phone 用户输入的手机号
     * @return 返回查询结果
     * 校验登录操作
     */
    User login(String name, String phone);

    /**
     * 注册功能
     * @param user 封装的是页面传入的信息
     * @return
     */
    int insert(User user);
}

在这里插入图片描述


import com.alibaba.druid.pool.DruidDataSource;
import com.alibaba.druid.pool.DruidDataSourceFactory;

import java.io.InputStream;
import java.lang.reflect.Field;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;
import java.util.Properties;

public class DBUtil {

    static Properties properties = new Properties( );
    // 声明Druid连接池对象
    private static DruidDataSource druidDataSource;

    static {
        try {
            // 将配置文件读作输入流
            InputStream stream = DBUtil.class.getResourceAsStream("/db.properties");
            // properties对象加载流,即配置信息都在properties对象里面
            properties.load(stream);
            // 通过配置信息创建出druidDataSource数据源
            druidDataSource = (DruidDataSource) DruidDataSourceFactory.createDataSource(properties);
        } catch (Exception e) {
            e.printStackTrace( );
        }
    }

    /**
     * 通过DruidDataSource获得连接
     */
    public static Connection getConnection() {
        Connection conn = null;
        try {
            // 2 获得连接
            conn = druidDataSource.getConnection( );
        } catch (Exception e) {
            e.printStackTrace( );
        }
        return conn;
    }

    /**
     * 抽取关流的方法
     */
    public static void closeAll(Connection conn, Statement s) {
        if (conn != null) {
            try {
                conn.close( );
            } catch (SQLException e) {
                e.printStackTrace( );
            }
        }
        if (s != null) {
            try {
                s.close( );
            } catch (SQLException e) {
                e.printStackTrace( );
            }
        }
    }

    public static void closeAll(Connection conn, Statement s, ResultSet rs) {
        if (conn != null) {
            try {
                conn.close( );
            } catch (SQLException e) {
                e.printStackTrace( );
            }
        }
        if (s != null) {
            try {
                s.close( );
            } catch (SQLException e) {
                e.printStackTrace( );
            }
        }
        if (rs != null) {
            try {
                rs.close( );
            } catch (SQLException e) {
                e.printStackTrace( );
            }
        }
    }

    /**
     * 封装查询一个对象
     *
     * @param sql  有?的sql语句
     * @param t    要封装的实体类字节码文件
     * @param args 要给?赋值的值
     *             select * from tb_user where id = ?
     */
    public static <T> T selectOne(String sql, Class<T> t, Object... args) {
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        T target = null;
        Field[] fields = t.getDeclaredFields( );
        try {
            conn = getConnection( );
            ps = conn.prepareStatement(sql);
            for (int i = 0; i < args.length; i++) {
                ps.setObject((i + 1), args[i]);
            }

            rs = ps.executeQuery( );
            if (rs.next( )) {
                target = t.newInstance( );
                for (Field field : fields) {
                    String name = field.getName( );
                    // 因为ORM,所以属性名就是列名
                    Object value = rs.getObject(name);
                    if (value == null) {
                        continue;
                    }
                    field.setAccessible(true);
                    field.set(target, value);
                }
            }
        } catch (Exception e) {
            e.printStackTrace( );
        } finally {
            closeAll(conn, ps, rs);
        }
        return target;
    }


    public static <T> List<T> selectAll(String sql, Class<T> t, Object... args) {
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        T target = null;
        Field[] fields = t.getDeclaredFields( );
        ArrayList<T> list = new ArrayList<>( );
        try {
            conn = getConnection( );
            ps = conn.prepareStatement(sql);
            for (int i = 0; i < args.length; i++) {
                ps.setObject((i + 1), args[i]);
            }

            rs = ps.executeQuery( );
            while (rs.next( )) {
                target = t.newInstance( );
                for (Field field : fields) {
                    String name = field.getName( );
                    // 因为ORM,所以属性名就是列名
                    Object value = rs.getObject(name);
                    field.setAccessible(true);
                    if (value == null) {
                        continue;
                    }
                    field.set(target, value);
                }
                list.add(target);
            }
        } catch (Exception e) {
            e.printStackTrace( );
        } finally {
            closeAll(conn, ps, rs);
        }
        return list;
    }

    /**
     * 增删改设计成一个方法
     */
    public static int update(String sql,Object... args) {
        Connection conn = null;
        PreparedStatement ps = null;
        int num = 0;
        try {

            conn = getConnection( );
            ps = conn.prepareStatement(sql);
            for (int i = 0; i < args.length; i++) {
                ps.setObject((i + 1), args[i]);
            }

            num = ps.executeUpdate( );

        } catch (Exception e) {
            e.printStackTrace( );
        } finally {
            closeAll(conn, ps);
        }
        return num;
    }

    public static void main(String[] args) {
        System.out.println(getConnection());
    }
}

在这里插入图片描述

import com.hui.pojo.User;
import com.hui.service.Impl.UserServiceImpl;
import com.hui.service.UserService;

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 javax.servlet.http.HttpSession;
import java.io.IOException;

@WebServlet("/login")
public class UserLogin extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        String name = req.getParameter("name");
        String phone = req.getParameter("phone");
        UserService userService = new UserServiceImpl();
        User result =  userService.login(name,phone);

            // 重定向
        if(result!=null){
            //用户名 密码是正确的
            HttpSession session = req.getSession();
            // 把查询出来的用户信息 存到session 域对象中
            session.setAttribute("user",result);
            resp.sendRedirect(req.getServletContext().getContextPath() +"/main.jsp");
        }else if (result == null){
            // 密码或账号输入错误时，返回页面一个1，方便使用js判断
            String log = "用户名或手机号输入有误请重新输入";
            req.setAttribute("log",log);
            req.getRequestDispatcher("/index.jsp").forward(req,resp);
        }
    }
}

import com.hui.pojo.User;
import com.hui.service.Impl.UserServiceImpl;
import com.hui.service.UserService;
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("/register")
public class UserReqister extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        // 获取页面输入的数据
        String name = req.getParameter("name");
        String phone = req.getParameter("phone");
        String qq = req.getParameter("qq");
        Integer age = Integer.parseInt(req.getParameter("age"));
        String sex = req.getParameter("sex");
        String date = req.getParameter("date");
        // 封装思想
        User user = new User();
        user.setName(name);
        user.setPhone(phone);
        user.setQq(qq);
        user.setAge(age);
        user.setSex(sex);
        user.setCreatetime(date);

        System.out.println(user);
        UserService userService = new UserServiceImpl();
        int result = userService.insert(user);
        if (result == 1){
            req.setAttribute("user",user);
            req.getRequestDispatcher("/index.jsp").forward(req,resp);
        }else{
            req.getSession().setAttribute("user",user);
            resp.sendRedirect(req.getServletContext().getContextPath()+"/index.jsp");
        }
    }
}

在这里插入图片描述
图片存储的位置

前端页面

<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户登录</title>
</head>
<style>
    body{
        height: 100%;
        background:url(JavaWeb/html/wallhaven-6dmjy6.jpg) no-repeat center 0;
        background-size: 100%;
    }
    #d{
        border-radius: 25px;
        position: absolute;
        background-color: rgb(243, 106, 143);
        width: 350px;
        height: 400px;
        left: 40%;
        top: 30%;
        /*  实现透明 */
        filter: opacity(0.5);
    }
    #f{
        padding-left: 23%;
        padding-top: 25%;
    }
    #i1{
        border-radius: 25px;
        background-color: crimson;
    }
    #b1{
        border-radius: 25px;
        background-color: crimson;
        width: 50px;
    }
    #p1{
        font-size: 45px;
        color: rgb(249, 249, 7);
        /* 实现字体倾斜 */
        font-style:italic;
    }
</style>

<body>
<div id="d">
    <form action="login" method="post" id="f">
        <table >
            <!-- 账号输入框 -->
            <tr>
                <td>
                    <input type="text" name="name" style="font-size: 20px; color: black" placeholder="请输入用户名" size="16">
                </td>
            </tr>
            <!-- 密码输入框 -->
            <tr>
                <td>
                    <input type="text" name="phone" style="font-size: 20px; color: black;" placeholder="请输入手机号" size="16">
                </td>
            </tr>
            <tr>
                <th>
                    <p id="p1">欢迎回家</p>
                </th>
            </tr>
            <!-- 提交表单 & 注册 -->
            <tr>
                <th>
                    <input id="i1" type="submit" value="登录" style="width: 60px; height: 30px"/>
                </th>
                <td>
                    <a href="${pageContext.request.contextPath}/register.jsp" style="color: black" >
                        <strong>注册</strong>
                    </a>
                </td>
            </tr>
        </table>
    </form>
</div>
<div>
    <h1 style="align-content: center; color: crimson " > ${log} </h1>
</div>
</body>
</html>


<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>主页</title>
</head>
<body>
    <h1>
            欢迎 ${user.name}少爷回家！
    </h1>
</body>
</html>


<%@ page isELIgnored="false" language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>用户注册</title>
</head>
<style>
    #d1{
        width: 360px;
        height: 450px;
        margin-left: 650px;
        margin-top: 130px;
        padding-top: 100px;
        border-radius: 25px;
        background-color: pink;
        /*  实现透明 */
        filter: opacity(0.6);
    }
    form{
        padding-left: 30px;
    }
    body{
        height: 100%;

        background:url("JavaWeb/html/wallhaven-nrvm71.jpg") no-repeat center 0;;

    }
</style>

<body>
<div id="d1">
    <span style="padding-left: 90px; font-size: 40px; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">用户注册</span>
    <form action="register" method="post">
        <table style="align-content: center;">
            <tr>
                <td>
                    请输入用户名:
                </td>

                <td>
                    <input type="text" name="name"  >
                </td>
            </tr>

            <br>

            <tr>
                <td>
                    请输入手机号:
                </td>
                <td>
                    <input type="text" name="phone"  >
                </td>
            </tr>

            <br>

            <tr>
                <td>
                    请输入QQ号:
                </td>
                <td>
                    <input type="text" name="qq"  >
                </td>
            </tr>

            <br>

            <tr>
                <td>
                    请输入年龄:
                </td>
                <td>
                    <input type="text" name="age" >
                </td>
            </tr>

            <br>

            <tr>
                <td>
                    &nbsp;&nbsp;&nbsp; 男：<input type="radio" name="sex" value="1"> 女：<input type="radio" name="sex" value="0">
                </td>
            </tr>

            <br>

            <tr>
                <td>
                    请输入注册日期：
                </td>
                <td>
                    <input type="date" name="date" value="date">
                </td>
            </tr>

            <br>

            <tr>
                <td>
                    <input style=" height: 30px; width: 40px; margin-left: 100px; margin-top: 50px;" type="submit" value="提交">
                </td>
            </tr>
        </table>
    </form>
</div>

</body>
</html>

pom.xml文件配置

 <!-- 引入servlet依赖 -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
    </dependency>
    <!-- 引入jsp依赖 -->
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>javax.servlet.jsp-api</artifactId>
      <version>2.3.1</version>
    </dependency>
    <!--   数据库的连接   -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.47</version>
    </dependency>
<!--  DBUtil 数据库连接池  -->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.1.5</version>
    </dependency>

在这里插入图片描述

# 根据自己的数据库情况进行修改
url=jdbc:mysql://localhost:3306/java2301?useSSL=false
# 修该为自己的用户名密码
username=root
password=hui778203081
# ----- 加入druid的一些连接配置
driver=com.mysql.jdbc.Driver
#<!-- 初始化连接 -->
initialSize=10
#最大连接数量
maxActive=50
#<!-- 最小空闲连接 -->
minIdle=5
#<!-- 超时等待时间以毫秒为单位 60000毫秒/1000等于60秒 -->
maxWait=5000