Javaweb基础学习(3)

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请求头:

  1. Host:表示请求的主机名

  2. User-Agent:浏览器版本,例如Chrome浏览器的标识类似Mozilla/5.0 …Chrome/79,IE浏览器的标识类似Mozilla/5.0 (Windows NT …) like Gecko;

  3. Accept:表示浏览器能接收的资源类型,如text/,image或者*/*表示所有;

  4. Accept-Language:表示浏览器偏好的语言,服务器可以据此返回不同语言的网页;

  5. Accept-Encoding:表示浏览器可以支持的压缩类型,例如gzip, deflate等。

GET请求和POST请求的区别

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

1.3、HTTP响应数据格式

响应数据分为3部分:

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

常见的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

在这里插入图片描述

  • 关闭:
  1. 直接×掉运行窗口:强制关闭
  2. 双击bin\shutdown.bat:正常关闭
  3. 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项目==

  1. 讲下面代码放置于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>

  1. 使用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> 要不然在运行的时候会报错

  1. 创建:定义一个类,实现Servlet接口,并重写接口中所有方法,并在service方法中输入一句话
public class ServletDemo1 implements Servlet {
	public void service()
}
  1. 配置:在类上使用@WebServlet注解,配置该Servlet的访问路径
@WebServlet("/demo1")
public class ServletDemo1 implements Servlet {

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

3.3 Servlet执行流程和生命周期

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

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

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

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

生命周期:

解释:

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

  • Servlet运行在servlet容器(web服务器)中,其生命周期由容器来管理,分为4个阶段:
  1. 加载和实例化:默认情况下,当Servlet第一次被访问时,由容器创建servlet对象

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

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

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

  1. 初始化:在Servlet实例化之后,容器将调用servlet的init()方法初始化这个对象,完成一些如加载配置文件、创建连接等初始化的工作。该方法只调用一次

  2. 请求处理:每次请求Servlet时,Servlet容器都会调用servlet的service()方法对请求进行处理。

  3. 服务终止:当需要释放内存或者容器关闭时,容器就会调用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使用方法:

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

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)

  1. 一个Servlet,,可以配置多个urlPattern
@WebServlet(urlPatterns = {"/demo1", "/demo2"}) //这两个路径都可以访问到这个页面
  1. 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 获取请求数据

一般分为三个部分:

  1. 请求行
    在这里插入图片描述
  • 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);
  1. 请求头:
    在这里插入图片描述

String getHeader(String name):根据请求头名称,获取值

  1. 请求体: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,删除该键值对

请求转发特点

  1. 浏览器地址栏路径不发生变化
  2. 只能转发到当前服务器的内部资源
  3. 一次请求,可以在转发的资源间使用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 设置响应数据功能介绍

响应数据被分为三部分:

  1. 响应行 : HTTP/1.1 200 oK

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

  1. 响应头 : Content-Type: text/html

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

  1. 响应体 : <html><head>head><body></body></html>
  • PrintWriter getWriter():获取字符输出流
  • ServletOutputStream getOutputStream():获取字节输出流

5.2 Response的重定向

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

  1. 原始方法:
        //1. 定义响应的状态码
        resp.setStatus(302);
        //2. 设置状态头
        resp.setHeader("location","/tomcat1/resp2");
  1. 简洁方法:
String contextPath = req.getContextPath();//获取到虚拟路径
        resp.sendRedirect(contextPath+"/resp2");
  • 重定向特点:
  1. 浏览器地址栏路径发生变化
  2. 可以重定向到任意位置的资源(服务器内部、外部均可)
  3. 两次请求,不能在多个资源使用request共享数据

5.3 资源路径问题

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

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

在这里插入图片描述

5.4 Response响应字符数据

使用:

  • 通过Response对象获取字符输出流
PrintWriter writer = resp.getWriter();
  • 写数据
writer.write("aaa");

注意:

  1. 该流不需要关闭,随着响应结束,response对象销毁,由服务器关闭
  2. 中文数据乱码:原因通过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工具类使用
  1. 导入坐标
<dependency>
	<groupld>commons-io</groupld>
	<artifactld>commons-io</artifactld>
	<versign>2.6</version>
</dependency>
  1. 使用
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);
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值