web前端方面知识小结，实现一个注册及登陆界面响应的接收处理并连接mysql（Mac环境下）

本文链接：https://blog.csdn.net/asfsaf21/article/details/113823968

本文总结了在Mac上使用Tomcat服务器搭建web项目的过程，包括服务器的下载安装配置、IDEA中创建web工程、前端HTML界面设计（登陆与注册页面）、XML配置以及Servlet接口实现，特别强调了登陆响应和数据处理，确保JDBC包正确导入以避免运行错误。

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

1.tomcat服务器的下载安装配置

2.idea中建立web工程项目，并部署tomcat

3.在webapp包下编写前端网页的界面，配置xml文件。

1）登陆界面

<%--
  Created by IntelliJ IDEA.
  User: lemt
  Date: 2021/2/15
  Time: 12:08 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<style type="text/css">
    body{
        background-size: 1800px;
    }
</style>
<head>
    <title>Sign</title>
</head>
<body background="IMG_1554.JPG">
    <table align="center">
            <h1 align="center">Hello User</h1><br>
           <hr color="black">
        <form action="http://localhost:52013/LJY/xx/xx" method="get">
            <tr>
                <td>用户名</td>
                <td><input type="text" name="username"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="text" name="password"></td>
            </tr>
            <tr>
                <td><input type="submit"></td>
                <td><a  href="Login.jsp">点击注册账号</a> </td>
            </tr>
        </form>
     </table>
</body>
</html>

2）注册界面

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>JSP - Login_sign</title>
    <style type="text/css">
        body{
            background-size: 300px;
        }
    </style>
</head>
<body background="IMG_1156.JPG">
</h1>
<h1 align="center">Hello User</h1>
<br>
<hr>
<form action="hello" method="get">
    <table style="margin: 0 auto;">
        <tr>
            <td>用户名</td>
            <td><label for="username"></label><input id="username" type="text" name="username"></td>
        </tr>
        <tr>
            <td><span id="spanUsername" style="color: brown; size: 12px"></span></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><label for='pwd'></label><input id='pwd' type="password" name="password"></td>
        </tr>
        <tr>
            <td>确认密码</td>
            <td><label for="configPwd"></label><input id="configPwd" type="password"></td>
        </tr>
        <tr>
            <td><span id="conSpan" style="color: #a52a2a; size: 12px"></span> </td>
        </tr>
        <tr>
            <td>Emile</td>
            <td><label for="emile"></label><input id="emile" type="text" name="emile"></td>
        </tr>
        <tr>
            <td><span id="spanEmile" style="color: brown; size: 12px"></span></td>
        </tr>
        <tr>
            <!--性别---->
            <td><label>
                <input type="radio" name="sex" value="1" checked>
            </label>男</td>
            <td><label>
                <input type="radio" name="sex" value="0">
            </label>女</td>
        </tr>
        <!--表单提交按钮--前端需要验证密码，用户名是否正确-->
        <tr>
            <td><input id="button" type="button" value="点击注册" ></td>
            <td><input type="reset" value="清空表单"></td>
        </tr>
    </table>
</form>
</body>
</html>
<script type="text/javascript">
    window.onload=function (){
        //用户名合法判断
        const c1=document.getElementById('username')
        const c2=document.getElementById('spanUsername')
        const isOK = /^(([a-zA-Z0-9]){4,16})$/;
        c1.onblur=function (){
            if (!isOK.test(c1.value)){
                c2.innerText='用户名只能由数字字母组成的6-9位的字符串'
                c2.style.color='brown'
            }else if (c1.value !== ''){
                c2.innerText='用户名合法'
                c2.style.color='green'
            }
        }
        //密码和确认密码的一致性判断
        const c4=document.getElementById('pwd')
        const c5=document.getElementById('configPwd')
        const c6=document.getElementById('conSpan')
        c5.onblur=function (){
            if (c4.value === c5.value && c5.value !== ''){
                c6.innerText='与输入密码一致'
                c6.style.color='green'
            }else if (c5.value !== ''){
                c6.innerText='与输入密码不一致'
                c6.style.color='brown'
            }
        }
        //判断邮箱是否合法
        const c7=document.getElementById('emile')
        const c8=document.getElementById('spanEmile')
        const c9=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        c7.onblur=function (){
            if (c9.test(c7.value)){
                c8.innerText='合法的邮箱'
                c8.style.color='green'
            }else {
                c8.innerText='邮箱只能为xxxx@xxx.xx的形式'
                c8.style.color='brown'
            }
        }
        //如果 所有span的color === 'green' 则点击button可以提交
        const c10=document.getElementById('button')
        c10.onclick=function (){
            if (c2.style.color === 'green' && c6.style.color === 'green' && c8.style.color === 'green'){
                c10.type='submit'
                alert('注册成功')
            }
        }
    }
</script>

配置文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>Hi</servlet-name>
        <servlet-class>com.example.demo7.Hello</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>Hi</servlet-name>
        <url-pattern>/Hello</url-pattern>
    </servlet-mapping>

    <servlet>
        <servlet-name>Login</servlet-name>
        <servlet-class>com.example.demo7.Login_Servlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>Login</servlet-name>
        <url-pattern>/xx/xx</url-pattern>
    </servlet-mapping>
</web-app>

4.编写Servlet接口的实现类（注意导包位置）

登陆界面请求响应的处理

package com.example.demo7;



import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.*;
import java.util.Date;

@WebServlet("/hello")
public class Hello extends HttpServlet {
    public void init() {
        Date d2=new Date();
        d2.setTime(d2.getTime());
        System.out.println("init ------> 被调用  ：  time  ：" +d2);
    }
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.setContentType("text/html");
        Date d2=new Date();
        d2.setTime(d2.getTime());
        System.out.println("do Get ------> 被调用  ：  time  ：" +d2);
        System.out.println(request.getQueryString());
        new Login_sign(request.getQueryString());
        PrintWriter printWriter=response.getWriter();
        printWriter.write("<html><head>");
        printWriter.write("<body><h1 align='center'>注册成功！</h1><br><a href='index.jsp' align='center'>是否跳转登陆界面</a></body>");
        printWriter.write("</head></html>");
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    }

    public void destroy() {

    }
}

解析表单提交的数据，并添加至数据库

package com.example.demo7;

import java.util.LinkedList;

public class Login_sign {
    public Login_sign(String str){
        LinkedList<String> massage = new LinkedList<>();
        int i=-1;
        while (i != str.length()) {
            i++;
            if (str.charAt(i) == '='){
                i++;
                StringBuilder stringBuilder=new StringBuilder();
                while (i != str.length() && str.charAt(i) != '&'){
                    stringBuilder.append(str.charAt(i++));
                }
                massage.add(stringBuilder.toString());
            }
        }
        new insert_into().insert(massage);
    }
}

package com.example.demo7;

import java.sql.Connection;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Date;
import java.util.LinkedList;

public class insert_into {
    static final String insert="insert into myweb_Login (username,password,emile,sex) values ('{','{','{','{')";
    public void insert(LinkedList<String> massage) {
        Date time=new Date();
        Connection connection=GetConnection.getConnection();
        Statement statement=null;
        try {
              statement= connection.createStatement();
              System.out.println("statement---------->......");
              statement.execute(getInsertSQL(insert,massage.removeFirst(),massage.removeFirst(),massage.removeFirst(),massage.removeFirst()));
              System.out.println("Run--------->......");
              time.setTime(time.getTime());
              System.out.println("已添加至数据库--------- time --> "+time);
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }finally {
            if (connection != null) {
                try {
                    connection.close();
                } catch (SQLException throwables) {
                    throwables.printStackTrace();
                }
            }
            if (statement != null) {
                try {
                    statement.close();
                } catch (SQLException throwables) {
                    throwables.printStackTrace();
                }
            }
        }
    }
    private String getInsertSQL(String ...args){
        StringBuilder str=new StringBuilder(args[0]);
        int j=1;
        for (int i = 0; i < str.length(); i++) {
            if(str.charAt(i)=='{'){
                str.replace(i,i+1,args[j]);
                i=i+args[j].length();
                j++;
            }
        }
        return str.toString();
    }
}

登陆响应

package com.example.demo7;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Date;

@WebServlet("/Login_Servlet")
public class Login_Servlet extends HttpServlet {
        public void init() {
            Date d2=new Date();
            d2.setTime(d2.getTime());
            System.out.println("init ------> 被调用  ：  time  ：" +d2);
        }
        public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {

        }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username=req.getParameter("username");
        String password=req.getParameter("password");
        String select01="select username from myweb_Login where username = '{'";
        String select02="select password from myweb_Login where password = '{'";
        PrintWriter out=resp.getWriter();
        resp.setCharacterEncoding("utf-8");
        Connection connection=GetConnection.getConnection();
        Statement statement=null;
        ResultSet resultSet=null;
        try {
            statement=connection.createStatement();
            resultSet=statement.executeQuery(getInsertSQL(select01,username));
            if (resultSet.next()){
                resultSet=statement.executeQuery(getInsertSQL(select02,password));
                if (resultSet.next()){
                    out.write("<script type='text/javascript'>alert('Good')</script>");
                }else {
                    out.write("<script type='text/javascript'>alert('NoGood')</script>");
                }
            }else {
                out.write("<script type='text/javascript'>alert('NoGood')</script>");
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }finally {
            if (connection != null) {
                try {
                    connection.close();
                } catch (SQLException throwables) {
                    throwables.printStackTrace();
                }
            }
            if (statement != null) {
                try {
                    statement.close();
                } catch (SQLException throwables) {
                    throwables.printStackTrace();
                }
            }
            if (resultSet != null) {
                try {
                    resultSet.close();
                } catch (SQLException throwables) {
                    throwables.printStackTrace();
                }
            }
        }
    }
    private String getInsertSQL(String ...args){
        StringBuilder str=new StringBuilder(args[0]);
        int j=1;
        for (int i = 0; i < str.length(); i++) {
            if(str.charAt(i)=='{'){
                str.replace(i,i+1,args[j]);
                i=i+args[j].length();
                j++;
            }
        }
        return str.toString();
    }
        public void destroy() {

        }
}