javaweb登录功能的实现 小白也能懂 IDEA版本

我的IDEA是2020.3.2版本,如果版本不同可能会导致文件夹的结构不同。大家注意文件夹位置。

javaweb项目分为前端和后端,前端主要是HTML页面的设计,在这里我用的是很简单的表单标签和输入标签进行演示,大家可以在完成后进行美化。

1.我创建了一个名为Demo1的javaweb项目,在开始编写时需要对运行参数进行设置。点击导航栏处的tomcat,打开 Edit Configuration,将部分参数进行设置。
在这里插入图片描述
页面打开之后,找到Server处画红框的位置,将选项都改为 Update classes and resources,这样是会在你修改代码后自动更新资源,避免后期修改代码时不需要重启tomcat进行资源更新的情况。
在这里插入图片描述
再点开Deployment选项,查看Application context处的路径是怎么样的,这是我们访问项目时要在http://localhost:8080后加的路径,如果觉得过于繁琐可以修改。我这里原路径过长我就改成了项目名。
在这里插入图片描述
2.打开web.xml文件,在里面加入以下代码:

<welcome-file-list>
    <welcome-file>login.jsp</welcome-file>
</welcome-file-list>

在这里插入图片描述
3.导入数据库驱动包
WEB-INF下创建一个名为lib的文件夹,将数据库驱动jar包复制进去,右键文件夹,选择“Add as Library”
在这里插入图片描述

完成上述操作后点击OK进行应用就可以开始写代码啦~

一、登录功能的实现

1.前端页面

在webapp文件夹下创建一个名为login的JSP文件作为登录页面,在里面写入登录时想要获取的数据,我这里想要获取的数据是用户名和密码,代码如下:
登录页面:

<%--
  Created by IntelliJ IDEA.
  User: 86139
  Date: 2021/10/24
  Time: 14:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录页面</title>
</head>
<body>
<form action="UserServlet" method="post">
    <input type="hidden" name="method" value="login">    <%--后端获取这个属性用于判断前端请求的是登录还是注册--%>
    <label>
        用户名:<input type="text" name="username">
    </label><br><br>
    <label>
        密码:<input type="password" name="password">
    </label><br><br>
    <span style="color:red;font-size: 25px;">${requestScope.err}</span> <%-- 用于提示用户登录失败 --%>
    <button type="submit" value="">登录</button>
</form>
</body>
</html>

登录成功后进入的首页:

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
</head>
<body>
欢迎你
</body>
</html>

2.后端实现

在MySQL数据库中创建一个名为user的表,含有username、password字段。
在这里插入图片描述

在java文件夹下创建四个文件夹,分别是com.dao、com.model、com.servlet、com.service。
完成相应的业务逻辑处理,调用dao层。
dao:对于数据库的操作,都放到dao层,也就是dao里面通常是对数据库的增、删、改、查等操作。
service:完成相应的业务逻辑处理,调用dao层。
servlet:完成界面请求、对界面进行跳转等等。servlet调用service层。

在Servlet层中创建一个名为UserServlet的Servlet文件,由于登录注册功能使用post方式更好,所以在UserServlet.java中,可以将doGet()方法删除掉。login.jsp中form标签的action属性就填入UserServlet,表明向UserServlet发送表单数据
在这里插入图片描述
在这里将request、response参数改为全局参数,方便后期使用。UserServlet.java中的代码如下:

package com.servlet; 

/**
 * @Author cwx
 * @Date 2021/10/24 15:18
 * @Version 1.0
 */

import com.service.UserService;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet(name = "UserServlet", value = "/UserServlet")
public class UserServlet extends HttpServlet {
    HttpServletRequest request;
    HttpServletResponse response;
    UserService userService = new UserService();

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.request = request;
        this.response = response;

        // 获取客户端请求 判断是登录请求还是注册请求
        String method = request.getParameter("method");
        if (method.equals("login")){
            this.login();
        }
    }

    private void login() throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println("username:" + username + ",password:" + password);

        username = userService.login(username,password);

        if (username != null){
            /*
             *  用户名密码正确 -- 跳转到首页
             *  getRequestDispatcher("url") : 转发页面
             *  forword(request, response) : 执行
             */
            request.setAttribute("err",username);
            request.getRequestDispatcher("index.jsp").forward(request,response);
        } else {
            //登录失败 -- 跳转到登录页面
            // 向页面传递第一个数据:登录失败
            request.setAttribute("err","用户名或密码错误");
            request.getRequestDispatcher("login.jsp").forward(request,response);
        }
    }
}

在dao包中创建JDBC文件UserJDBC.java,写入操作数据库内容,数据库驱动、数据库名、用户名、密码根据自己的情况进行修改。

package com.dao;

import java.sql.*;

/**
 * @Author cwx
 * @Date 2021/10/24 15:45
 * @Version 1.0
 */
public class UserJDBC {
    Connection connection;
    Statement statement;
    ResultSet resultSet;

    public void setConnection(){
        try {
            Class.forName("com.mysql.jdbc.Driver");
            connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/java_jdbc", "root", "628050");
        }  catch (Exception throwable) {
            throwable.printStackTrace();
        }
    }

    public ResultSet show(){
        this.setConnection();
        try {
            statement = connection.createStatement();
            resultSet = statement.executeQuery("select * from user;");
        } catch (SQLException throwable) {
            throwable.printStackTrace();
        }
        return resultSet;
    }

    public void close(){
        try {
            if (connection != null) {
                connection.close();
            }
            if (statement != null) {
                statement.close();
            }
            if (resultSet != null) {
                resultSet.close();
            }
        } catch (SQLException troubles) {
            troubles.printStackTrace();
        }
    }
}

在service包中创建一个名为UserService.java的文件,写入内容

package com.service;

import com.dao.UserJDBC;

import java.sql.ResultSet;
import java.sql.SQLException;

/**
 * @Author cwx
 * @Date 2021/10/24 15:40
 * @Version 1.0
 */
public class UserService {

    UserJDBC userJDBC = new UserJDBC();

    public String login(String username, String password) {
        ResultSet resultSet = userJDBC.show();
        try {
            while (resultSet.next()){
                String db_name = resultSet.getString("username");
                String db_passwd = resultSet.getString("password");
                if (db_name.equals(username) && db_passwd.equals(password)){
                    return username;
                }
            }
        } catch (SQLException throwable) {
            throwable.printStackTrace();
        }
        return null;
    }
}

二、效果图

在这里插入图片描述
在这里插入图片描述


版权声明:本文为cwx2352265318原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。