5分钟教你用java做最简单的登录系统

目录

      前言

一. 项目需求和分析

二. 准备工作资源

三. 编写逻辑代码 

四. 测试及运行 

五. 反思总结 


前言

JavaWeb学了有一段时间了,学到了很多东西,但学归学,它是不是真正成为自己的了还真不好说。俗话说得好,如果你能用自己的语言给别人把一个晦涩难懂的东西讲清楚,那你就真的会了。故作此文,教大家搭建一个非常基础的登录系统,顺便巩固一下这段时间学的重要知识。 

 

一.项目需求和分析

1.用户登录:

1. 编写login.html登录页面:username $ password 两个输入框

2. 使用Druid数据库连接池技术,操作mysql,db1数据库中user表

3. 使用JdbcTemplate技术封装JDBC

4. 登录成功跳转到SuccessServlet展示:登录成功,username,欢迎你

5. 登录失败跳转到FailServlet展示:登录失败,用户名或密码错误

2.需求分析:     

 

二.  准备工作资源

1.工具:

* idea企业版(因为企业版才集成的有Tomcat服务器)

* 各种依赖jar包和驱动:

        链接:https://pan.baidu.com/s/1fKEaSDFllKVUR-QasSgA5g 提取码:lx4o 

* Mysql5.7:Mysql 8可能会遇到一些问题,版本不一样有些规则会修改,所以尽量按我的环境来,我都踩过这些坑

* jdk1.8或以上:如果提示有无效版本,你可以换高版本的jdk,我还有个jdk14换着用的

* Navicat for Mysql:根据自己喜好,可有可无,也可以用其他的可视化数据库操作软件

2.创建项目模块

 选择new->Module->Java Enterprise.

配置如下:只需要改这三项 :

                 JavaEE version改成Java EE 7

                 勾选Web Application,

                 取消Create web.xml的勾选就可以了,其他不用管,Next

 位置仅供参考

创建完成后先在web文件夹下创建俩文件夹用来存储依赖jar包和驱动包

这些依赖包并不能直接使用,我们要右键点击lib文件夹,或者我们把这些包全部选中再右键,然后add as library->Level选Module Library,这样这些jar包就生效了。啥,不知道add as library是啥东西,点右边吧 ——> 传送门,带你飞~ 

根据需求分析我们了db1数据库并创建user表,我添加了一条数据用于后面验证demo是否成功。

为了使用 druid数据库连接池技术 来操作数据库,我们引入druid.properties来配置数据库,放在src目录下即可。

(链接:https://pan.baidu.com/s/14gU_aEYped66A0wm_P4zJQ 提取码:v0se)

准备工作搞定~ 

三. 编写逻辑代码 

 1.编写登录页面(login.html)

明人不说暗话,咱也不会,咋也不整那么多花里胡哨的,有那个意思就行了。

放到web目录下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
<!--    action指定的路径为:虚拟目录+资源路径-->
    <form action="/login_demo2/loginServlet" method="post">
        用户名:<input type="text" name="username"><br>
        密码:<input type="password" name="password"><br>

        <input type="submit" value="登录">
    </form>
</body>
</html>

 2.编写用户实体类(User)

这里面装的都是用户的各个属性。为啥要这样写呢?单独把用户封装起来,然后用户操作数据库等操作单独写接口,这样才能高内聚,低耦合的效果。

放到src.cn.it.np.domain目录下(给你个完整项目路径,你看看就知道了)

package cn.it.np.domain;

/**
 * 用户的实体类(JavaBean)
 */
public class User {
    //用户id
    private int id;
    //用户名
    private String username;
    //密码
    private String password;

    public int getId() {
        return id;
    }

    public void setId(int 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;
    }

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

3.编写JDBC工具类(JDBCUtils)

由于用到了Druid和Template,为了封装和简化Mysql的操作,我们一般都会编写一个JDBC工具类,让我们更方便的获取连接池对象或Connection对象 ,用到了Druid的知识。

什么?你说你不知道什么叫Druid!点右边带你坐飞机 ——> 带你装b,带你飞

放到src.cn.it.np.util目录下

package cn.it.np.util;

import com.alibaba.druid.pool.DruidDataSourceFactory;

import javax.sql.DataSource;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.Properties;

/**
 * JDBC工具类 使用Druid
 */
public class JDBCUtils {

    private static DataSource ds;

    static {
        try {
        //1.加载配置文件
        Properties pro = new Properties();
        //使用ClassLoader加载配置文件,获取字节输入流
        InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
        pro.load(is);

        //2.初始化连接池对象
        ds = DruidDataSourceFactory.createDataSource(pro);

        } catch (IOException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }

    }

    //获取连接池对象
    public static DataSource getDataSource(){
        return ds;
    }

    //获取连接Connection对象
    public static Connection getConnection() throws SQLException {
        return ds.getConnection();
    }
}

4.编写数据库接口类(UserDao)

百度Dao如下:

DAO(Data Access Object)是一个数据访问接口,数据访问:顾名思义就是与数据库打交道。夹在业务逻辑与数据库资源中间。

它负责和数据库打交道,我们通过它来将用户实体类User和数据库连接起来实现判断用户账号密码是否在数据库中的操作。这里主要用到了Spring框架里的 JdbcTemplate,同时还用到了工具类JDBCUtils。什么?你说你不知道Template?快点击这里吧!——> 带你飞 

放到src.cn.it.np.dao目录下

package cn.it.np.dao;

import cn.it.np.domain.User;
import cn.it.np.util.JDBCUtils;
import org.springframework.dao.DataAccessException;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;

/**
 * 操作数据库中User表的类
 */
public class UserDao {
    //声明JDBCTemplate对象共用
    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());

    /**
     * 登录方法
     * @param loginUser 只有用户名和密码
     * @return user包含用户所有信息
     */
    public User login(User loginUser){
        try {
            //1.编写sql
            String sql = "select * from user where username = ? and password = ?";

            //2.调用template的query方法
//            User user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), loginUser.getUsername(), loginUser.getPassword());
            User user = template.queryForObject(sql,
                    new BeanPropertyRowMapper<User>(User.class), loginUser.getUsername(), loginUser.getPassword());

            return user;
        } catch (DataAccessException e) {
            e.printStackTrace();
            return null;
        }
    }
}

5.编写业务逻辑类(loginServlet、successServlet、failServlet) 

判断用户是否成功登陆及后续的跳转操作,用到了Servlet的请求与转发操作。

啥?你说你不知道?快飞吧 ——> 好,你飞了

loginServlet

package web.servlet;

import cn.it.np.dao.UserDao;
import cn.it.np.domain.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;

@WebServlet("/loginServlet")
public class loginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.设置字符编码
        req.setCharacterEncoding("utf-8");
        //2.接收user数据
        String username = req.getParameter("username");
        String password = req.getParameter("password");

        //3.封装成User对象
        User loginuser = new User();
        loginuser.setUsername(username);
        loginuser.setPassword(password);

        //4.判断与转发
        UserDao dao = new UserDao();
        User user = dao.login(loginuser);

        if(user != null){
            //登录成功
            //存储共享数据
            req.setAttribute("user",user);
            req.getRequestDispatcher("/successServlet").forward(req,resp);
        }else{
            //登录失败
            req.getRequestDispatcher("/failServlet").forward(req,resp);
        }

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req,resp);
    }
}

successServlet

package web.servlet;

import cn.it.np.domain.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;

@WebServlet("/successServlet")
public class successServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.获取request域中共享的user数据
        User user = (User)request.getAttribute("user");

        //2.页面打印
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write("欢迎" + user.getUsername() + "登录成功!");
    }
}

 failServlet

package 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("/failServlet")
public class failServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //页面打印
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write("登录失败");
    }
}

6.这中间我们还可以穿插单元检测比如我们写完UserDao这个类的时候,我们如何检测其是否正确,这时候就用到了单元检测。

只要在要检测部分前面加上注解 @Test 即可(说到这里可能有些小小白会无法运行,那肯定是你没有导包。idea很智能,点一下注解,alt+enter键回车就能自动导包了)

package cn.it.np.test;

import cn.it.np.dao.UserDao;
import cn.it.np.domain.User;
import org.junit.Test;


public class UserDao_Test {
    @Test
    public void testLogin(){
        User loginuser = new User();
        loginuser.setUsername("zhangsan");
        loginuser.setPassword("666");

        UserDao dao = new UserDao();
        User user = dao.login(loginuser);
        System.out.println(user);
    }
}

 然后点击左侧的播放按钮,如果成功输出user信息则说明UserDao模块是ok的。

 至此,项目基本完成,看看能不能运行吧!

四. 测试及运行 

这里要注意检查你的login.html页面,action必须指定为:虚拟目录+资源路径。这里我Tomcat部署项目时设置的虚拟目录为/login_demo2.

进入登陆页面 

 

登陆失败时: 

登陆成功时 

五. 反思总结 

 通过本次项目的学习和演示,我总结出以下一个登陆模块编写流程:

前端界面(login.html)-> 用户实体类(User)-> 数据库接口类(UserDao) -> 中间可穿插单元测试类(UserDao_Test等测试类) -> 用到什么工具类就写什么工具类(JDBCUtils)-> 逻辑类(按业务逻辑写完剩下的常规类)

经过多次bug的折磨,我明白要经常进行unit测试,要养成好习惯,希望大家能一起进步,成为大牛牛!


更新

        和之前的代码不完全一致,是重新写的,要注意的是这里没用UserDao写全,为了快速搭建我就写死了。你们需要可以用UserDao接口,方法和上面是一样的new User对象来接收。用了jsp简化书写,加入验证码验证功能。

checkCodeServlet 

package cn.it.np;

import javax.imageio.ImageIO;
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.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

@WebServlet("/checkCodeServlet")
public class checkCodeServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.定义图片宽高
        int width = 100;
        int height = 50;

        //2.创建一个对象,在内存中存图片
        BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);

        //3.美化图片,掏出画笔开始搞
        Graphics g = image.getGraphics();

        //4.先给图片填个色
        g.setColor(Color.orange);
        g.fillRect(0,0,width,height);

        //5.在图片的边缘画一画使图片效果更好
        g.setColor(Color.blue);
        g.drawRect(0,0,width-1,height-1);

        //7.制造干扰条纹
        Random ran = new Random();
        g.setColor(Color.gray);
        for(int i=0;i<8;i++){
            int x1 = ran.nextInt(width);
            int x2 = ran.nextInt(width);
            int y1 = ran.nextInt(height);
            int y2 = ran.nextInt(height);
            g.drawLine(x1,y1,x2,y2);
        }

        //6.画验证码字符
        StringBuilder sb = new StringBuilder();
        g.setColor(Color.black);
        String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

        for(int i=1;i<=4;i++){
            //创造不超过str长度的随机下标
            int index = ran.nextInt(str.length());
            //获得该随机下标对应的字符
            char ch = str.charAt(index);
            sb.append(ch);
            //在适当的位置画字符
            g.drawString(ch + "",width/5*i,height/2);
        }
        //用session存储验证码字符
        String str_checkCode = sb.toString();
        HttpSession session = req.getSession();
        session.setAttribute("checkCode",str_checkCode);

        //将图片输出到屏幕上
        ImageIO.write(image,"jpg",resp.getOutputStream());

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req,resp);
    }
}

loginServlet 

package cn.it.np;

import javax.imageio.ImageIO;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

@WebServlet("/loginServlet")
public class loginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.获取表单参数
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        String checkCode = req.getParameter("checkCode");

        //2.判断验证码和密码是否正确
        //获取验证码
        HttpSession session = req.getSession();
        String str_checkCode =(String) session.getAttribute("checkCode");
        //删除session中存储的验证码
        session.removeAttribute("checkCode");

        //验证码正确,判断账号密码是否正确
        if(str_checkCode != null && checkCode.equalsIgnoreCase(str_checkCode)){
            //账号密码也正确
            if(username.equals("zhangsan") && password.equals("666")){//使用UserDao接口
                //用session存储用户信息并转发到success.jsp页面
                session.setAttribute("username",username);
                resp.sendRedirect(req.getContextPath() + "/success.jsp");
            }else{
                //账号密码不正确
                req.setAttribute("fail","用户名或密码错误!");
                req.getRequestDispatcher(req.getContextPath() + "/login.jsp").forward(req,resp);

            }
        }else{
            //验证码不正确,跳转到login.jsp,提示验证码错误
            req.setAttribute("codeFail","验证码错误!");
            req.getRequestDispatcher(req.getContextPath() + "/login.jsp").forward(req,resp);
        }

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req,resp);
    }
}

login.jsp

<%@ page import="java.awt.image.BufferedImage" %>
<%@ page import="java.awt.*" %>
<%@ page import="java.util.Random" %>
<%@ page import="javax.imageio.ImageIO" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>login</title>
    <script>
        window.onload = function (ev) {
            document.getElementById("checkCode").onclick = function (ev1) {
                this.src = "/checkCodeServlet?time=" + new Date().getTime();
            }

        }
    </script>
    
    <style>
        div{
            color: red;
        }
    </style>
</head>
<body>
    <form action="/loginServlet" method="post">
        <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" name="username"></td>
            </tr>


            <tr>
                <td>密码</td>
                <td><input type="password" name="password"></td>
            </tr>

            <tr>
                <td>验证码</td>
                <td><input type="text" name="checkCode"></td>
            </tr>

            <tr>
                <td colspan="2"><img src="/checkCodeServlet" id="checkCode"></td>
            </tr>

            <tr>
                <td colspan="2">
                    <input type="submit" value="登录">
                </td>
            </tr>

        </table>
    </form>

    <div><%=request.getAttribute("fail") == null ? "" : request.getAttribute("fail")%></div>
    <div><%=request.getAttribute("codeFail") == null ? "" : request.getAttribute("codeFail")%></div>

</body>
</html>

success.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>success</title>
</head>
<body>
    <h1>欢迎你,<%=request.getSession().getAttribute("username")%>
</body></h1>

</html>

运行结果

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小小的香辛料

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值