JavaWeb实现登录

最新推荐文章于 2024-05-10 21:41:13 发布

qq_54196404

最新推荐文章于 2024-05-10 21:41:13 发布

阅读量3.7k

点赞数 4

文章标签： java

本文链接：https://blog.csdn.net/qq_54196404/article/details/117794504

版权

本文介绍了如何使用JavaWeb实现登录功能，涉及IDEA、MySQL、MyBatis等工具和库的使用。首先，在数据库创建登录表，然后创建登录页面，通过jQuery绑定事件，获取输入并验证，最后详细阐述了连接数据库、配置MyBatis、Mapper接口和XML文件的步骤，实现登录功能。

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

使用工具及jar包

idea、MySQL、mybais的jar包、mysql-connector的jar包、jquery的js包、servlet-api.jar

准备步骤

在数据库中创建登录所需的表（如图：数据库：user_login;表:user）

第一步：创建简单登录页面（login.jsp,index.jsp）

思路：

1：给登录按钮绑定点击事件(通过id选择器绑定)

 2：获取用户姓名和密码的值 

3：判断账号是否为空如果账号为空，提示用户（span标签赋值），并且return 

4：判断密码是否为空如果密码为空，提示用户（span标签赋值），并且return 

5：如果都不为空，则手动提交

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户登录</title>
</head>
<body>
<div style="text-align: center">
    <form action="/login" method="post" id="loginForm">
        账号：<input type="text" name="uname" id="uname"><br>
        密码：<input type="password" name="upwd" id="upwd"><br>
        <span id="msg" style="font-size: 12px;color: #ff0000"></span><br>
        <button type="button" id="loginBtn">登陆</button>
        <button type="button">注册</button>
    </form>
</div>
</body>
<%--引入Jquery 的js 文件--%>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $("#loginBtn").click(function () {
        //2:获取用户账号和密码
        var uname = $("#uname").val();
        var upwd = $("#upwd").val();
        //3.2：判断姓名是否为空
        if (isEmpty(uname)){
            //为空，提示用户
            $("#msg").html("用户姓名不可为空");
            return;
        }
        //4:判断密码是否为空
        if (isEmpty(upwd)){
            //为空，提示用户
            $("#msg").html("用户密码不能为空");