javaweb学习的第7天（2021-11-13）--------登录功能的实现

最新推荐文章于 2022-07-18 16:15:38 发布
最新推荐文章于 2022-07-18 16:15:38 发布
阅读量2k 收藏 10
点赞数 2
分类专栏： javaweb 文章标签： javaweb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41709577/article/details/121303621
版权
这篇博客介绍了JavaWeb中登录功能的实现，包括JS事件驱动、DOM操作，以及如何通过Ajax进行异步用户名校验，以提升用户体验。在注册功能中，遇到的问题是错误提示信息无法清除，解决方案是通过JS函数实现在输入错误后清空提示。此外，还探讨了使用jQuery简化Ajax操作，并展示了jQuery实现异步校验的示例。
摘要由CSDN通过智能技术生成

javaweb学习的第7天（2021-11-13）--------登录功能的实现

JS里面的事件驱动。
在这里插入图片描述
基本只研究用户事件。
在这里插入图片描述
这个函数需要写在这里：
在这里插入图片描述
在这里插入图片描述

例子：
jsp页面的body标签：
在这里插入图片描述
jsp页面的head标签：
在这里插入图片描述

相当于点击这个按钮会触发一个方法的调用，这个方法是定义在head标签里面。
效果：
在这里插入图片描述

常用的事件：
1、onload：加载完毕的事件
2、onclick：鼠标点击
3、obblur：失去焦点事件
4、onfocus：获取焦点事件
5、onmouseover：鼠标移进来
6、onmouseout：鼠标移出去

JS里面的BOM：
在这里插入图片描述
在这里插入图片描述
window对象：
在这里插入图片描述
alert()是window这个对象提供的。

用的最多的就是Window对象里面的子对象document
window.doucument里面的window可以省略。

BOM VS DOM

在这里插入图片描述

BOM就是DOM里面的其中一个对象document
使用document可以获取到当前这个jsp页面的每一个元素。

想实现的功能：
点击button，之前是alert弹窗信息，现在是更换一行话：

现在：
在这里插入图片描述
点了button之后：
在这里插入图片描述
代码：
body标签：
在这里插入图片描述
head标签：
在这里插入图片描述

升级难度：
实现的效果：
刚开始：
在这里插入图片描述
现在：
点击按钮后。
复杂事情这句话进入文本框，复杂事情被替换拼搏…
在这里插入图片描述

代码：
body标签：
在这里插入图片描述
在这里插入图片描述

粗略学习了以下js之后，重新回到之前的那个需求：
目前问题：
当我第一次输入密码输入错误的时候。第二次再准备去输入的时候，后面这个提示错误信息一直还在，希望后期我第二次输入的时候，这个信息可以没了。
在这里插入图片描述

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

注册功能的实现：

在这里插入图片描述

注册失败的定义：
用户名已经在数据库里面存在了。

1、注册页面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>regist</title>
    <style>
        span{
            color:red;
        }
    </style>
    <script type="text/javascript">
        function disappear(){
            var s1 = document.getElementById("s1");
            s1.innerHTML="";
        }
    </script>

</head>
<body>
<form action="regist" method="post">
    <h1>欢迎注册</h1>
    用户名称：<input id="text01" type="text" name="username" onclick="disappear();">
    <span id="s1">${requestScope.registFailMsg}</span>
    <br>
    用户密码：<input type="password" name="password">
    <br>
    确认密码：<input type="password" name="repassword">
    <br>
    <input type="submit" name="regist" value="注册">
</form>

</body>
</html>

2、RegistServlet代码：

package com.rtl.login.servlet;

import com.rtl.bean.User;
import com.rtl.dao.UserDao;
import com.rtl.daoImpl.UserDaoImpl;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;

public class RegistServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        UserDao userDao = new UserDaoImpl();
        User user = userDao.getUserByName(username);
        if(user!=null){
            //注册失败：
            request.setAttribute("registFailMsg","用户名已经存在！请重新注册");
            request.getRequestDispatcher("regist.jsp").forward(request,response);
        }else{
            user = new User();
            user.setUname(username);
            user.setUpwd(password);
            //注册成功：
            userDao.insert(user);
            response.sendRedirect("login.jsp");
        }

    }
}

3、接口：UserDao

package com.rtl.dao;

import com.rtl.bean.User;

public interface UserDao {
    User getUserByNameAndPwd(String uName,String uPwd);
    User getUserByName(String uName);
    void insert(User user);
}

4、接口的实现类：

package com.rtl.daoImpl;

import com.rtl.bean.User;
import com.rtl.dao.UserDao;
import com.rtl.utils.ConnectionUtils;

import java.sql.*;

public class UserDaoImpl implements UserDao {
    @Override
    public User getUserByNameAndPwd(String uName, String uPwd) {
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        User user = null;
        try{
            conn = ConnectionUtils.getConn();
            String sql = "SELECT id,uname,upwd FROM user WHERE uname=? AND upwd=?";
            ps = conn.prepareStatement(sql);
            ps.setString(1,uName);
            ps.setString(2,uPwd);
            rs = ps.executeQuery();
            if(rs.next()){
                user = new User();
                user.setId(rs.getInt(1));
                user.setUname(rs.getString(2));
                user.setUpwd(rs.getString(3));
                return user;
            }
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            if(conn!=null){
                try {
                    ConnectionUtils.closeConn();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(ps!=null){
                try {
                    ps.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(rs!=null){
                try {
                    rs.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }
        return user;
    }

    @Override
    public User getUserByName(String uName) {
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        User user = null;
        try{
            conn = ConnectionUtils.getConn();
            String sql = "SELECT id,uname,upwd FROM user WHERE uname=?";
            ps = conn.prepareStatement(sql);
            ps.setString(1,uName);
            rs = ps.executeQuery();
            if(rs.next()){
                user = new User();
                user.setId(rs.getInt(1));
                user.setUname(rs.getString(2));
                user.setUpwd(rs.getString(3));
                return user;
            }
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            if(conn!=null){
                try {
//                    conn.close();
                    ConnectionUtils.closeConn();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(ps!=null){
                try {
                    ps.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(rs!=null){
                try {
                    rs.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }
        return user;
    }

    @Override
    public void insert(User user) {
        try{
            Connection conn = ConnectionUtils.getConn();
            String sql ="INSERT INTO USER(uname,upwd) VALUES(?,?)";
            PreparedStatement ps = conn.prepareStatement(sql);
            ps.setString(1,user.getUname());
            ps.setString(2,user.getUpwd());
            ps.executeUpdate();
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            try {
                ConnectionUtils.closeConn();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}

5、配置文件web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd"
         version="5.0">

    <servlet>
        <servlet-name>login</servlet-name>
        <servlet-class>com.rtl.login.servlet.LoginServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>login</servlet-name>
        <url-pattern>/login</url-pattern>
    </servlet-mapping>

    <servlet>
        <servlet-name>regist</servlet-name>
        <servlet-class>com.rtl.login.servlet.RegistServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>regist</servlet-name>
        <url-pattern>/regist</url-pattern>
    </servlet-mapping>
</web-app>

现在就是： 如果我们注册时候，表单里面由很多个选项，如果注册失败了，全部要重新填写会非常的困难。所以我们希望我在每次只要填写的时候，就知道这个选项我填对了没？ 这个技术叫做Ajax

异步的js和XML
在不发生页面跳转，实现异步载入内容并改变内容的技术。
Ajax里面最重要的对象：
XmlHttpRequest对象
1、XmlHttpRequest对象的获取
2、XmlHttpRequest对象的方法：
open，
send，
3、XmlHttpRequest对象的属性：
readyState=4的时候，代表请求已经处理完毕，且响应已经就绪。
但是还要判断i请求是否成功了。

Ajax校验用户名

获取异步请求对象XmlHttpRequest
这个方法直接抽象出来，写在js的代码里面
在jsp页面的head标签里面。
在这里插入图片描述
在这里插入图片描述

如何获取对象xhr？
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

现在准备使用Ajax技术实现，当你输完用户名之后，准备输入用户密码的时候，就已经把用户名拿到数据库进行校验。
使用失去焦点事件onblur()

在用户名称这个这里绑定onblur()

前端代码：
在这里插入图片描述
在这里插入图片描述

后端服务器代码：

package com.rtl.login.servlet;

import com.rtl.bean.User;
import com.rtl.dao.UserDao;
import com.rtl.daoImpl.UserDaoImpl;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;

public class CheckUserNameServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String username = request.getParameter("username");
        UserDao userDao = new UserDaoImpl();
        User user = userDao.getUserByName(username);
        String msg = "";
        if(user == null){
            //没有重名
            msg = "√";
        }else{
            //重名了
            msg = "已存在，请更换！";
        }
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().println(msg);

    }
}

3、配置文件web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd"
         version="5.0">

    <servlet>
        <servlet-name>login</servlet-name>
        <servlet-class>com.rtl.login.servlet.LoginServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>login</servlet-name>
        <url-pattern>/login</url-pattern>
    </servlet-mapping>

    <servlet>
        <servlet-name>regist</servlet-name>
        <servlet-class>com.rtl.login.servlet.RegistServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>regist</servlet-name>
        <url-pattern>/regist</url-pattern>
    </servlet-mapping>


    <servlet>
        <servlet-name>checkUserName</servlet-name>
        <servlet-class>com.rtl.login.servlet.CheckUserNameServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>checkUserName</servlet-name>
        <url-pattern>/checkUserName</url-pattern>
    </servlet-mapping>
</web-app>

之前使用的原生的Xhr对象去发送异步请求。现在使用jQuery框架来实现。

使用jQuery来实现所有js的操作。

介绍如何使用jQuery：

1、导入jQuery的库
https://www.jq22.com/jquery-info122#google_vignette
在这里插入图片描述
在web目录右键
new directory
在这里插入图片描述
新建目录scripts，将.js文件拷贝进去
在这里插入图片描述
在代码里面引入
head标签里面写上这样的代码：

<script type="text/javascript" src="scripts/jquery.min.js"></script>

在这里插入图片描述
一般这个代码在jsp页面的比较靠前的位置。

jQuery语法1：
在这里插入图片描述
在这里插入图片描述

$(function (){
        alert("页面加载完毕！！！");
      });

只要你这个页面加载完毕就会执行。
因为window.onload()就是这个功能。

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>

使用jQuery来实现功能。
在这里插入图片描述
点击这个按钮，将这个文字显示在alert来。

body标签：

 <input type="button" name="测试jQuery" id="b1">

head的script标签：

 $(function (){
        // alert("页面加载完毕！！！");
        $("#b1").click(function (){
          var msg = $("#span01").html();
          alert(msg);
        });
      });

在这里插入图片描述

实现功能：
在这里插入图片描述
上面的文字进入文本框里面来
在这里插入图片描述
在这里插入图片描述

将jQuery对象转为DOM对象：
在这里插入图片描述
#s1里面 s1是id

DOM对象转为jQuery对象
在这里插入图片描述

使用jQuery之前：
在这里插入图片描述
click方法在这里：
在这里插入图片描述

使用jQuery之后
在这里插入图片描述
click方法定义在这里：
在这里插入图片描述

使用jQuery实现将HTML代码和js代码解耦合了。

使用jQuery完成用户名的异步校验。

之前使用Ajax里面原生的XMLHttpRequest对象实现的。
来看看之前的实现方式：
在这里插入图片描述
script标签：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

使用jQuery对Ajax的支持技术

$.get $.post都是对$.ajax的实现

有上进心的阿龙
关注
专栏目录
javaweb学习的第6天（2021-11-12）--------登录功能的实现
有上进心的阿龙
11-12 3604
javaweb学习的第6天（2021-11-12）--------登录功能的实现 思想： 根据前端登陆表单里面传过来的username和password值，去mysql数据库里面查询 select * from user where username=? and password=? 看看查出来的数据是null还是有值来判断登陆是否成功。 使用普通的JDBC的方式。 1、创建后台用户表user 2、创建java bean package com.rtl.bean; public class User
B站---【狂神说Java】JavaWeb入门到实战---笔记
热门推荐
bell_love的博客
04-23 18万+
JavaWebJava Web 1、基本概念web开发： ·web，网页的意思，www.baidu.com· 静态web 。html,sss 。提供给所有人看的数据始终不会发生变化！ 动态web 。淘宝，几乎是所有的网站； 。提供给所有人看的数据始终会发生变化，每个人在不同的时间，不同的地点看到的信息各不相同！ 。技术栈：Servlet/ISP，ASP，PHP ...
2021-11-4原生Web开发流程-登录功能实现
qq_44632449的博客
11-04 191
1.项目搭建 1.搭建一个maven web项目 2.配置Tomcat 3.测试项目是否启动成功 4.导入需要的依赖：jsp、servelt、mysql驱动、jstl、standard 5.创建项目结构目录 6.编写实体类 ORM映射：表-类映射 7.编写基础公共类 1.数据库配置文件 db.properties driver、url、username、password 2.编写数据库的公共类 1.读取db.properties资源 获取 driver、url、username、password 2.获取数
javaweb07 jquery+ajax技术实现异步请求登录
Wantfly9951的博客
02-09 407
login.jsp页面 实现ajax异步发送请求 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%--设置识别EL表达式--%> <%@page isELIgnored="false" %> <%--导入jstl的包 否则无法使用--%> <%@ taglib uri="http://java.sun.com
JAVA异步Web服务实现
weixin_37632716的博客
03-15 768
public void submitFuture(final HttpServletRequest req,final Callable<CompletableFuture> task) throwsException{ final String uri = req.getRequestURI(); final Map<String,String[]> params = req.getParameterMap(); final AsyncContext asyncCont
javaweb进阶-ajax异步基础
m0_51500007的博客
02-15 522
Ajax基础 一、全局刷新和局部刷新 全局刷新：整个浏览器被新的数据覆盖。在网络中传输大量的数据。浏览器需要加载，渲染页面。 局部刷新：在浏览器的内部，发起请求，获取数据，改变页面中的部分内容。 其余的页面无需加载和渲染。网络中传输的数据量少，速度快，给用户的感觉好。 ajax是用来做局部刷新的技术。局部刷新使用的核心对象是异步对象（XMLHttpRequest） 这个异步对象是存在于浏览器内存中的，使用JavaScript语法创建和使用XMLHttpRequest对
java 实现session的退出登录
hello world
01-22 2452
html页面 <a href="javascript:void(0)" onclick="logout()">退出登录</a> js文件 // 退出登录 function logout() { $.ajax({ async: false, type: "POST", url: '/logout', contentType: "application/x-www-form-urlencoded; charset=
day12_javaweb_javascript_day12-xml_energy7fo_
10-03
"day12_javaweb_javascript_day12-xml_energy7fo_" 提供的资源包主要涵盖了JavaWeb开发中的JavaScript和XML技术，是作者个人学习过程中的一个阶段性的总结，虽然标注为“day2”，但可以推测整个系列应该包含更多天的...
《JavaWeb》期末项目考核要求-电子公告板系统.docx
07-01
### JavaWeb期末项目考核知识点详解 #### 一、项目背景与目标 《JavaWeb》期末项目考核要求学生完成一个电子公告板系统。该项目旨在检验学生对JavaWeb技术栈的掌握程度，包括前后端开发能力、数据库设计与实现、...
瓦客新闻系统是一款基于Java-webmysql开发的新闻一体化系统
08-08
瓦客新闻系统是一款专为新闻发布和管理设计的Java Web应用程序，它利用了Java语言和MySQL数据库的强大功能，为用户提供了一站式的新闻管理解决方案。这款系统由纯JDBC和Servlet技术构建，强调简洁与实用性，无需依赖...
（仿牛客社区项目）Java开发笔记2.4：实现登录，退出功能
weixin_45700663的博客
07-18 2066
（仿牛客社区项目）Java开发笔记2.4：实现登录，退出功能
java中退出按钮的设置_java中通过按钮退出用户界面
weixin_33121737的博客
02-24 2020
今天写了一段代码,但是无法通过建立的按钮退出界面,问题在代码中,代码如下:importjavax.swing.*;importjava.awt.*;importjava.awt.event.*;importjava.sql.*;classloginextendsJFrame...今天写了一段代码,但是无法通过建立的按钮退出界面,问题在代码中,代码如下:import javax.swing.*;im...
java如何实现按钮退出功能_java中实现退出按钮功能的实现已经布局管理器的使用...
weixin_39664995的博客
03-02 2464
java中实现退出按钮功能的实现以及几种布局方式的简述------三种方法今天看了布局管理器，写了如下代码：import java.awt.*;import java.awt.event.*;class myFrame {public static void main(String args[]){Frame f=new Frame("my first");Button btn1=new Butt...
登录 退出功能 java_使用Java servlet实现自动登录退出功能
weixin_31146939的博客
02-13 891
UserDao.java从数据库中查询用户名与密码//登录public User login(User user) throws SQLException {QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource());String sql = "select from user where username = ? and p...
java做登陆界面事件处理_【java】java swing初识：事件触发登陆界面
weixin_42467445的博客
02-25 313
【java】java swing初识：事件触发登陆界面【java】java swing初识：事件触发&登陆界面欢迎大家到我的个人主页点击打开链接，一起交流、学习，一起进步~1.界面输出字符：hello world！package vaniot.com;import javax.swing.*;public class HelloWorld {public static void creat...
input的失焦事件处理
weixin_42180591的博客
10-22 4487
input元素上进行obblur事件绑定： <input class="customer_name" placeholder="请输入姓名" v-model="name" @blur="onBlur"/> 具体实现方法： methods: { onBlur: function () { console.log('blur...') setTimeout(function () { var scrollHeight = document.docum
php+js登陆功能,js实现ajax的用户简单登入功能
weixin_33586063的博客
03-25 266
本文实例为大家分享了js实现ajax的用户简单登入的具体代码，供大家参考，具体内容如下原生js实现ajaxhtml页面ajax登录用户名：密码：window.onload = function(){var btn = document.getElementById('btn');btn.onclick = function(){var username = document.getElementB...
Java Web实现简单的登录功能
m0_61643713的博客
12-20 8075
用Java+jsp实现简单的用户登录功能,适合新手写登录功能。
JavaWeb用户信息管理系统-创建登录业的务持久层
赵广陆
07-06 699
1 创建用户查询数据库的接口 public interface UserLoginDao { public Users selectUsersByUserPwd(String username,String userpwd); } 2 创建实现类 public class UserLoginDaoImpl implements UserLoginDao { /** * 用户登录的数据库查询 */ Users user = null; @Ove
校园订餐系统源码分享-计算机专业毕业设计
- **支付处理**：系统需要提供在线支付功能，如集成第三方支付接口。 - **订单管理**：管理员可以查看、审核和管理所有订单。 - **评论与反馈**：用户可以对所订餐品进行评价。 #### 5. 安全性和性能优化： - **...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值