Javaweb基础学习

web核心介绍
一、HTTP
- 1.1 HTTP介绍
- 1.2、HTTP请求数据格式
- 1.3、HTTP响应数据格式
二、Tomcat
- 2.1 简介
- 2.2 基本使用
- 2.3 Tomcat配置
- 2.4 Tomcat部署项目
- 2.5 Web项目结构
- 2.6 创建Maven Web项目
三、Servlet
- 3.1、Servlet简介&快速入门
- 3.2 创建Servlet步骤
- 3.3 Servlet执行流程和生命周期
- 3.4 Servlet方法介绍&体系结构
- 3.5 urlPattern配置
- 3.6 XML配置Servlet
四、Request（请求）
- 4.1 Request简介
- 4.2 Request继承体系
- 4.3 Request 获取请求数据
- 4.4、Request通用方式获取请求参数
- 4.5、请求参数中文乱码处理
- 4.6 Request请求转发
五、Response（响应）
- 5.1 设置响应数据功能介绍
- 5.2 Response的重定向
- 5.3 资源路径问题
- 5.4 Response响应字符数据
- 5.5 Response响应字节数据
六、小练习
- 6.1 登录页面
- 6.2 注册页面

web核心介绍

B/S架构: Browser/Server，浏览器/服务器架构模式，它的特点是，客户端只需要浏览器，应用程序的逻辑和数据都存储在服务器端。浏览器只需要请求服务器，获取Web资源，服务器把Web资源发送给浏览器即可
好处:易于维护升级:服务器端升级后，客户端无需任何部署就可以使用到新的版本

在这里插入图片描述

静态资源: HTML、CSS、JavaScript、图片等。负责页面展现
动态资源: Servlet、JSP等。负责逻辑处理
数据库: 负责存储数据
Web服务器: 负责解析HTTP协议，解析请求数据，并发送响应数据

一、HTTP

1.1 HTTP介绍

概念: HyperText Transfer Protocol，超文本传输协议，规定了浏览器和服务器之间数据传输的规则

HTTP协议特点:

基于TCP协议：面向连接，安全
基于请求-响应模型的：一次请求对应一次响应
HTTP协议是无状态的协议:对于事务处理没有记忆能力。每次请求-响应都是独立的。
缺点：多次请求间不能共享数据。-----> Java中使用会话技术(Cookie、Session)来解决这个问题
优点：速度快

1.2、HTTP请求数据格式

请求数据分为3部分:

请求行:请求数据的第一行。其中GET表示请求方式，/表示请求资源路径，HTTP/1.1表示协议版本
请求头:第二行开始，格式为key: value形式。
请求体: POST请求的最后一部分，存放请求参数

常见的HTTP请求头:

Host:表示请求的主机名
User-Agent:浏览器版本，例如Chrome浏览器的标识类似Mozilla/5.0 …Chrome/79，IE浏览器的标识类似Mozilla/5.0 (Windows NT …) like Gecko;
Accept:表示浏览器能接收的资源类型，如text/,image或者*/*表示所有;
Accept-Language:表示浏览器偏好的语言，服务器可以据此返回不同语言的网页;
Accept-Encoding:表示浏览器可以支持的压缩类型，例如gzip, deflate等。

GET请求和POST请求的区别

GET请求请求参数再请求行中，没有请求体。
POST请求请求参数在请求体中 GET请求请求参数大小有限制
POST没有

1.3、HTTP响应数据格式

响应数据分为3部分:

响应行:响应数据的第一行。其中HTTP/1.1表示协议版本，200表示响应状态码，OK表示状态码描述
响应头:第二行开始，格式为key: value形式
响应体:最后一部分。存放响应数据

常见的HTTP响应头:

Content-Type:表示该响应内容的类型，例如text/html,image/jpeg;
Content-Length:表示该响应内容的长度（字节数);
Content-Encoding:表示该响应压缩算法，例如gzip;
Cache-Control:指示客户端应如何缓存，例如max-age=300表示可以最多缓存300秒

状态码分类	说明
1xx	响应中——临时状态码，表示请求已经接受，告诉客户端应该继续请求或者如果它已经完成则忽略它
2xx	成功―—表示请求已经被成功接收，处理已完成
3xx	重定向——重定向到其它地方:它让客户端再发起一个请求以完成整个处理。
4xx	客户端错误—―处理发生错误，责任在客户端，如:客户端的请求一个不存在的资源，客户端未被授权，禁止访问等
5xx	服务器端错误—―处理发生错误，责任在服务端，如:服务端抛出异常，路由出错，HTTP版本不支持等

在这里插入图片描述

二、Tomcat

2.1 简介

Web服务器是一个应该程序(软件)，对HTTP协议的操作进行封装，使得程序员不必直接对协议进行操作，让web开发更加便捷。主要功能是“提供网上信息浏览眠务”
概念: Tomcat是Apache软件基金会一个核心项目，是一个开源免费的轻量级Web服务器，支持Servlet/JSP少量JavaEE规范。
JavaEE: Java Enterprise Edition，Java企业版。指Java企业级开发的技术规范总和。包含13项技术规范:JDBC、JNDI、EJB、RMI、JSP、Servlet、XML、JMS、Java IDL、JTS、JTA、JavaMail、JAF
Tomcat也被称为Web容器、Servlet容器。Servlet 需要依赖于Tomcat才能运行

2.2 基本使用

下载：官网下载
安装：绿色版，直接解压即可
卸载：直接删除目录即可
启动：双击: bin\startup.bat

在这里插入图片描述

关闭：

直接×掉运行窗口:强制关闭
双击bin\shutdown.bat:正常关闭
Ctrl+C:正常关闭 (建议使用)

2.3 Tomcat配置

配置：

修改启动端口号：conf/server.xml
在这里插入图片描述

注意：HTTP协议默认端口号为80，如果将Tomcat端口号改为80，则将来访问Tomcat时，将不用输入端口号

启动时可能出现的问题
1.端口号冲突:找到对应程序，将其关闭掉

2.启动窗口一闪而过:检查JAVA HOME环境变量是否正确配置

2.4 Tomcat部署项目

Tomcat部署项目:
将项目放置到webapps目录下，即部署完成
一般JavaWeb项目会被打成war包，然后将war包放到webapps目录下，Tomcat会自动解压缩war文件

2.5 Web项目结构

Maven Web项目结构：开发中的项目
部署的JavaWeb项目结构：开发完成，可以部署的项目
编译后的Java字节码文件和resources的资源文件，放到WEB-INF下的classes目录下
pom.xml中依赖坐标对应的iar包，放入WEB-INF下的lib目
录下

2.6 创建Maven Web项目

使用骨架
1.选择Web项目骨架，创建项目
2.删除pom.xml中多余的坐标
3.补齐缺失的目录结构
不适用骨架
1.选择web项目骨架，创建项目
2.pom.xml中添加打包方式为war
3.补齐缺失的目录结构: webapp

== 通过插件进行创建web项目==

讲下面代码放置于pom.xml 添加Tomcat插件

<build>
	<plugins>
		<!-- Tomcat 插件-->
		<plugin>
			<groupld>org.apache.tomcat.maven</groupld>
			<artifactld>tomcat7-maven-plugin</artifactld>
			<version>2.2</version>
		</plugin>
	</plugins>
</build>

使用Maven Helper插件快速启动项目，选中项目，右键–> Run Maven --> tomcat7:run

在这里插入图片描述

三、Servlet

3.1、Servlet简介&快速入门

Servlet是Java提供的一门动态 web资源开发技术
Servlet是JavaEE规范之一，其实就是一个接口，将来我们需要定义Servlet类实现Servlet接口，并由web服务器运行Servlet

3.2 创建Servlet步骤

1. 首先导入Servlet依赖包

    <dependencies>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>

注意：在导包的时候要记到导入 <scope>provided</scope> 要不然在运行的时候会报错

创建:定义一个类，实现Servlet接口，并重写接口中所有方法，并在service方法中输入一句话

public class ServletDemo1 implements Servlet {
	public void service()
}

配置:在类上使用@WebServlet注解，配置该Servlet的访问路径

@WebServlet("/demo1")
public class ServletDemo1 implements Servlet {

}

访问:启动Tomcat，浏览器输入URL 访问该Servlet
http://localhost:8080/tomcat1_war/login

3.3 Servlet执行流程和生命周期

Servlet由谁创建? Servlet方法由谁调用?

Servlet由web服务器创建，Servlet方法由web服务器调用。

服务器怎么知道servlet中一定有service方法?

因为我们自定义的Servlet，必须实现Servlet接口并复写其方法，而Servlet接口中有service方法

生命周期：

解释：

对象的生命周期指一个对象从被创建到被销毁的整个过程

Servlet运行在servlet容器(web服务器)中，其生命周期由容器来管理，分为4个阶段:

加载和实例化：默认情况下，当Servlet第一次被访问时，由容器创建servlet对象

非默认情况下可以该改变创建时机

@WebServlet (urlPatterns = "/demo",loadOnStartup =1)

负整数：第一次被访问时创建Servlet对象
0或正整数：服务器启动时创建Servlet对象，数字越小优先级越高

初始化：在Servlet实例化之后，容器将调用servlet的init()方法初始化这个对象，完成一些如加载配置文件、创建连接等初始化的工作。该方法只调用一次
请求处理：每次请求Servlet时，Servlet容器都会调用servlet的service()方法对请求进行处理。
服务终止：当需要释放内存或者容器关闭时，容器就会调用servlet实例的destroy()方法完成资源的释放。在destroy()方法调用之后，容器会释放这个Servlet实例，该实例随后会被Java的垃圾收集器所回收

3.4 Servlet方法介绍&体系结构

初识化方法，在Servlet被创建的时候执行，就只执行一次

 @Override
    public void init(ServletConfig servletConfig) throws ServletException {
        System.out.println("在初始创建的时候就执行该方法，就执行一次，init…………");
    }

提供服务的方法，每次调用Servlet的时候都会调用该方法

@Override
    public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
        System.out.println("当每次访问Servlet的时候就会执行一次，service…………");
    }

销毁方法，当Servlet被销毁时，调用该方法。在内存释放或服务器关闭时销毁Servlet


    @Override
    public void destroy() {
        System.out.println("当该Servlet销毁的时候就执行一次，一共执行一次，destory…………");
    }

获取ServletConfig对象

ServletConfig getServletConfig()

获取Servlet信息

String getServletInfo()

体系结构：
在这里插入图片描述

我们将来开发B/S架构的web项目，都是针对HTTP协议所以我们自定义Servlet，会继承HttpServlet

继承的HttpServlet就是人家封装好的Servlet对象，便于我们web开发

HttpServlet使用方法：

继承HttpServlet
重写doGet()–> 请求方式：get 和 doPost()方法–>请求方式：post
通过重写的方法来进行不同请求方式的获取数据方式

HttpServlet原理：

import javax.servlet.*;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.security.interfaces.RSAKey;

public class ServletDom2 implements Servlet {

    @Override
    public void init(ServletConfig servletConfig) throws ServletException {
        System.out.println("创建时调用，只调用一次");
    }

    @Override
    public ServletConfig getServletConfig() {
        return null;
    }

    @Override
    public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
        //将其进行强制转换
        HttpServletRequest req = (HttpServletRequest) servletRequest;
        HttpServletResponse res =(HttpServletResponse) servletResponse ;
        //获取到请求的方式
        String method = req.getMethod();

        //通过不同请求方式来进行判断
        if ("GET".equals(method)){
            System.out.println("get………………");
            doGet(req,res);
        }else if ("POST".equals(method)){
            System.out.println("post…………");
            doPost(req, res);

        }

    }

    protected void doPost(HttpServletRequest req, HttpServletResponse res) {
    }

    protected void doGet(HttpServletRequest req, HttpServletResponse res) {

    }

    @Override
    public String getServletInfo() {
        return null;
    }

    @Override
    public void destroy() {

    }
}

3.5 urlPattern配置

Servlet要想被访问，必须配置其访问路径(urlPattern)

一个Servlet,，可以配置多个urlPattern

@WebServlet(urlPatterns = {"/demo1", "/demo2"}) //这两个路径都可以访问到这个页面

urlPattern配置规则

精确匹配
配置路径：@WebServlet(urlPatterns = “/user/select”)
访问路径：localhost:8080/web-demo/user/select
目录匹配
配置路径：@WebServlet(urlPatterns = "/user/")
访问路径：localhost:8080/web-demo/user/
扩展名匹配
配置路径：@WebServlet(urlPatterns = “*.do”)
访问路径：localhost:8080/web-demo/aaa.do
localhost:8080/web-demd/bbb.do
任意匹配 -->尽量不要使用这个配置，因为主要是因为会替换源文件的默认访问，会导致静态资源等无法访问到
配置路径：@WebServlet(urlPatterns = “/”)
@WebServlet(urlPatterns = “/*”)
访问路径：localhost:8080/web-demo/hehe
localhost:8080/web-demo/hehe

和/*区别:

当我们的项目中的Servlet配置了“/”，会覆盖掉tomcat中的DefaultServlet，当其他的url-pattern都匹配不上时都会走这个Servlet
当我们的项目中配置了“/*”，意味着匹配任意访问路径
注：不要使用这两个路径，会覆盖掉DefaultServlet，导致无法加载出静态资源

优先级:
精确路径>目录路径>扩展名路径>/* >/

3.6 XML配置Servlet

Servlet 从3.0版本后开始支持使用注解配置，3.0版本前只支持XML配置文件的配置方式
步骤
1.编写Servlet类
2.在web.xml中配置该Servlet

<servlet>
	<servlet-name>demo5</servlet-name>
	<servlet-class>com.Smulll.web.servlet.servletDemo5</servlet-class>
</servlet>
<servlet-mapping>
	<servlet-name>demo5</servlet-name>
	<url-pattern>/demo5</url-pattern>
</servlet-mapping>

四、Request（请求）

4.1 Request简介

Request：获取请求数据

在这里插入图片描述

4.2 Request继承体系

在这里插入图片描述

Tomcat需要解析请求数据，封装为request对象，并且创建request对象传递到service方法中
使用request对象，查阅JavaEE API文档的 HttpServletRequest 接口

4.3 Request 获取请求数据

一般分为三个部分：

请求行

String getMethod()：获取请求方式:GET
String getContextPath()：获取虚拟目录(项目访问路径):/request-demo
StringBuffer getRequestURL()：获取URL(统一资源定位符): http://localhost:8080/request-demo/req1
String getRequestURI()：获取URI(统一资源标识符): /request-demo/req1
String getQueryString()：获取请求参数(GET方式) :username=zhangsan&password=123

//1. 获取到请求数据的方法
        String method = req.getMethod();
        System.out.println(method);

        //2. 获取到虚拟地址
        String contextPath = req.getContextPath();
        System.out.println(contextPath);

        //3.获取到访问地址
        String uri = req.getRequestURI();
        System.out.println(uri);

        //4.完整地址
        StringBuffer url = req.getRequestURL();
        System.out.println(url);


        //5. 获取到后面用户后面的值
        String queryString = req.getQueryString();
        System.out.println(queryString);

请求头：

String getHeader(String name)：根据请求头名称，获取值

请求体：username=superbaby&password=123

ServletlnputStream getInputStream()：获取字节输入流
BufferedReader getReader()：获取字符输入流

4.4、Request通用方式获取请求参数

请求参数获取方式：

GET方式：

String getQueryString()

POST方式

BufferedReader getReader()

由于不同的请求方式，出现不同的获取方式过于复杂，所以就创建了统一的获取数据方法

Map<String, String[ ]> getParameterMap()：获取所有参数Map集合
String[ ] getParameterValues(String name)︰根据名称获取参数值（数组)
String getParameter(String name)：根据名称获取参数值（单个值)

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;
import java.io.Reader;
import java.util.Map;

@WebServlet("/req1")
public class RequestDom1 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1. 通过获取到所有的key值
        Map<String, String[]> map = req.getParameterMap();
        for (String key : map.keySet()) {
            System.out.print(key +": ");

            //2. 通过key值来获取到参数值
            String[] strings = map.get(key);
            for (String value : strings) {
                System.out.println(value + " ");
            }
            System.out.println();
        }



        //2. 通过名称来获取到当前的数据
        String username = req.getParameter("username");
        String password = req.getParameter("password");

        System.out.println(username);
        System.out.println(password);


        // 3. 通过获取到数组组合
        String[] values = req.getParameterValues("hobby");
        for (String value : values) {
            System.out.println(value);
        }

    }
}

4.5、请求参数中文乱码处理

请求参数如果存在中文数据，则会乱码

解决方案：

POST：设置输入流的编码
req.setCharacterEncoding(“UTF-8”);
通用方式（GET/POST）：先编码，再解码
new String(username.getBytes(“ISO-8859-1”),“UTF-8”);
URL编码
1.将字符串按照编码方式转为二进制
2.每个字节转为2个16进制数并在前边加上%

 @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        String username = req.getParameter("username");

        String s = new String(username.getBytes(StandardCharsets.ISO_8859_1), StandardCharsets.UTF_8);
        System.out.println(s);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        String username = req.getParameter("username");
        System.out.println(username);
    }

4.6 Request请求转发

请求转发：在服务器内部的一种资源跳转方式

简单理解为：
在这里插入图片描述

实现方式：

req.getRequestDispatcher("资源B路径").forward(req,resp);

请求转发资源间共享数据: 使用Request对象
1.void setAttribute(String name, Object o)：存储数据到request域中
2.Object getAttribute(String name)：根据key，获取值
3.void removeAttribute(String name)：根据key，删除该键值对

请求转发特点

浏览器地址栏路径不发生变化
只能转发到当前服务器的内部资源
一次请求，可以在转发的资源间使用request共享数据

req3

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("/req3")
public class RequestDom3 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置键值对和值
        req.setAttribute("msg","hello Request!!");

        System.out.println("req3");
        //跳转req4进行解析数据
        req.getRequestDispatcher("/req4").forward(req,resp);
    }
}

req4

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("/req4")
public class RequestDom4 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取到键值对的值
        Object msg = req.getAttribute("msg");
        System.out.println(msg);

        System.out.println("req4");
    }
}

五、Response（响应）

5.1 设置响应数据功能介绍

响应数据被分为三部分：

响应行： HTTP/1.1 200 oK

void setStatus(int sc)∶设置响应状态码

响应头 : Content-Type: text/html

void setHeader(String name,String value)∶设置响应头键值对

响应体 : <html><head>head><body></body></html>

PrintWriter getWriter():获取字符输出流
ServletOutputStream getOutputStream():获取字节输出流

5.2 Response的重定向

概念： 重定向就是一种资源跳转方式
在这里插入图片描述
实现方法：

原始方法：

        //1. 定义响应的状态码
        resp.setStatus(302);
        //2. 设置状态头
        resp.setHeader("location","/tomcat1/resp2");

简洁方法：

String contextPath = req.getContextPath();//获取到虚拟路径
        resp.sendRedirect(contextPath+"/resp2");

重定向特点：

浏览器地址栏路径发生变化
可以重定向到任意位置的资源(服务器内部、外部均可)
两次请求，不能在多个资源使用request共享数据

5.3 资源路径问题

通过使用的对象进行判断：

浏览器使用资源路径： 需要添加虚拟路径
服务端使用资源路径：不需要虚拟路径

在这里插入图片描述

5.4 Response响应字符数据

使用:

通过Response对象获取字符输出流

PrintWriter writer = resp.getWriter();

写数据

writer.write("aaa");

注意:

该流不需要关闭，随着响应结束，response对象销毁，由服务器关闭
中文数据乱码:原因通过Response获取的字符输出流默认编码:ISO-8859-1

package Response;

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;
import java.io.PrintWriter;

@WebServlet("/resp3")
public class ResponseDom3 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1. 设置其的编码方式于读写内容的方式
        resp.setContentType("text/html;charset=UTF-8");

        //2. 获取输出流
        PrintWriter writer = resp.getWriter();
        writer.write("<h1>你好！！！！！ response</h1>");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    }
}

5.5 Response响应字节数据

使用:

通过Response对象获取字符输出流

ServletOutputStream outputStream = resp.getOutputStream();

写数据

outputStream.write(字节数据);

package Response;

import org.apache.commons.io.IOUtils;

import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.OutputStream;

@WebServlet("/resp4")
public class ResponseDom4 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 1. 创建一个字节输出流
        FileInputStream fis = new FileInputStream("E://a.png");

        // 2. 创建一共字节输出流
        ServletOutputStream os = resp.getOutputStream();
        /*byte[] bytes = new byte[1024];
        int len;
        // 3. 写入数据
        while ((len = fis.read())!= -1){
            os.write(bytes,0,len);
        }*/

        IOUtils.copy(fis,os);

        fis.close();
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    }
}

IOUtils工具类使用

导入坐标

<dependency>
	<groupld>commons-io</groupld>
	<artifactld>commons-io</artifactld>
	<versign>2.6</version>
</dependency>

使用

IOUtils.copy(输入流,输出流);

六、小练习

6.1 登录页面

html页面：

<%--
  Created by IntelliJ IDEA.
  User: LENOVO
  Date: 2023/8/17
  Time: 10:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<div style="text-align: center">
    <form action="login" method="get" id="loginForm">
        姓名：<input type="text" name="uname" id="uname"> <br>
        密码：<input type="password" name="upassword" id="upassword" > <br>
        验证码: <input type="text" name="verify" id="verify"><br>
        <img src="https://ts4.cn.mm.bing.net/th?id=OIP-C.rHuc8SKa0wLVwCqqA27uIwHaEt&w=313&h=199&c=8&rs=1&qlt=90&o=6&dpr=1.6&pid=3.1&rm=2" height="30px;" width="45px">
        <span id="msg" style="color: red ; font-size:12px;" ></span><br>
        <button type="button" id="loginBtn">登录</button>
        <button type="button" id="registerBtn">注册</button>
    </form>
</div>
</body>
<script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    $("#loginBtn").click(function(){
        //获取到用户名和密码和邮箱
        var uname = $("#uname").val();
        var upassword =$("#upassword").val();
        var verify =$("#verify").val();

        //判断他们是否为空
        if(isNull(uname)){
            $("#msg").html("当前用户名不能为空");
            return;
        }
        if(isNull(upassword)){
            $("#msg").html("当前密码不能为空");
            return;
        }
        if(isNull(verify)){
            $("#msg").html("当前邮箱不能为空");
            return;
        }

        //如果都不为空就提交数据
        $("#loginForm").submit();

    });
    //创建一个方法来验证所获取到的物质是否为空
    function isNull(str){
        if(str = null || str.trim() == ""){
            return true;
        }
        return false;
    }

</script>


</html>

servletLogin页面：

package com.huanglei.Serverlets;

import com.huanglei.mapper.UserMapper;
import com.huanglei.pojo.User;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

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;
import java.io.InputStream;
import java.io.PrintWriter;

@WebServlet("/login")
public class ServerletLogin extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.首先获取到传过来的数据
        String userName = req.getParameter("uname");
        String userPassword = req.getParameter("upassword");
        String  verify= req.getParameter("verify");

        //2.常规获取sqlsession
        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        SqlSession sqlSession = sqlSessionFactory.openSession();

        UserMapper mapper = sqlSession.getMapper(UserMapper.class);

        //通过查询来找到是否包含这个用户名
        User user = mapper.selectAll(userName);

        //添加数据响应

        //首先设置其编/解码规范
        resp.setContentType("text/html;charset=utf-8");

        //获取writer对象
        PrintWriter writer = resp.getWriter();
        //判断
        if (user == null){
            //响应数据
            writer.write("<h1>不存在该用户请重新输入</h1>");
            System.out.println("不存在该用户请重新输入");
            return;
        }

        //若存在该用户，通过查询找到该密码是否正确
        String userPassword1 = user.getUserPassword();

        //判断该用户密码是否正确
        if (!userPassword1.equals(userPassword)){
            writer.write("<h1>密码不正确，请重新输入</h1>");
            System.out.println("密码不正确，请重新输入");
            return;
        }

        writer.write("登陆成功！！！");
        System.out.println("登陆成功！！！");
    }


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

6.2 注册页面

html：

<%--
  Created by IntelliJ IDEA.
  User: LENOVO
  Date: 2023/8/9
  Time: 9:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册界面展示</title>
</head>
<body>
<div style="text-align: center">
    <form action="register" method="post" id="FormRegister">
        用户名：<input type="text" name="rname" id="rname"> <br>
        密码：<input type="password" name="rpassword" id="r_password"> <br>
        确认密码: <input type="password" name="Rpassword" id="Rpassword"><br>
        邮箱: <input type="text" name="email" id="email"><br>
        <span id="msg" style="color: red ; font-size:12px;" ></span><br>
        <button type="button" id="registerBtn">注册</button>
    </form>
</div>
</body>
<script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
<script type="text/javascript" >

    function check() {
        //判断用户名长度是否超过8
        var name = $("#rname").val(); // trim去除空格
        if (name.length > 8  ) {
            $("#msg").html("用户名长度不能超过8");
            return false;
        }

        //用户名不能有数字
        for (var i = 0; i < name.length; i++) {
            var str = name.substring(i, i + 1);
            if (isNaN(str) === false) {
                $("#msg").html("用户名只能为字母或中文字符");
                return false;
            }
        }
            //判断密码是否大于6~12
            var password = $("#r_password").val();
            if (password.length < 6 || password.length > 12 ) {
                $("#msg").html("密码长度必须在6~12之间");
                return false;
            }
            //判断密码为数字+英文
            //邮箱中必须包含@ 和 .
            var email=$("#email").val();
            if(email.indexOf("@")===-1){
                $("#msg").html('邮箱中必须包含@');
                return false;
            }

            if(email.indexOf(".")===-1){
                $("#msg").html('邮箱中必须包含.');
                return false;
            }

        return true;
    }

    $("#registerBtn").click(function(){
        //获取到用户名和密码和邮箱
        var rname = $("#rname").val();
        var r_password =$("#r_password").val();
        var Rpassword =$("#Rpassword").val();
        var email =  $("#email").val();

        //判断他们是否为空
        if(isNull(rname)){
            $("#msg").html("当前用户名不能为空");
            return;
        }
        if(isNull(r_password)){
            $("#msg").html("当前密码不能为空");
            return;
        }
        if(isNull(Rpassword)){
            $("#msg").html("当前确认密码不能为空");
            return;
        }if(isNull(email)){
            $("#msg").html("当前邮箱不能为空");
            return;
        }if (r_password !== (Rpassword)){
            $("#msg").html("密码与确认密码不相符合！");
            return;
        }if (check()){
            alert("注册成功！！！")
            //若都不为空就提交
            $("#FormRegister").submit();
        }

    });

    //创建一个方法来验证所获取到的物质是否为空
    function isNull(str){
        if(str == null || str.trim() === ""){
            return true;
        }
        return false;
    }

</script>
</html>

serverletRegister：

package com.huanglei.Serverlets;

import com.huanglei.mapper.UserMapper;
import com.huanglei.pojo.User;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

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;
import java.io.InputStream;
import java.io.PrintWriter;

@WebServlet("/register")
public class ServletRegister extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.首先获取到其输入的数据信息
        String userName = req.getParameter("rname");
        String userPassword = req.getParameter("rpassword");
        String email = req.getParameter("email");

        //2. 首先判断其当中是否含有该用户
        // 常规获取sqlsession
        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        SqlSession sqlSession = sqlSessionFactory.openSession();

        UserMapper mapper = sqlSession.getMapper(UserMapper.class);

        //通过查询来找到是否包含这个用户名
        User user = mapper.selectAll(userName);

        //返回数据，设置解码规则
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter();

        //判断是否包含该用户
        if(user != null){
            writer.write("已经存在该用户");
            return;
        }

        //不存在该用户，创建User类存储数据，将数据加入到数据库
        User user1 = new User();
        user1.setUserEmail(email);
        user1.setUserName(userName);
        user1.setUserPassword(userPassword);
        user1.setUserId(null);

        mapper.addTables(user1);
        sqlSession.commit();
        sqlSession.close();
    }

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