JavaWeb 前后端分离

news2024/11/25 23:32:14

AJax

1. 前端视图

ajax\src\main\webapp\ajax-register.html

<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <form class="form-horizontal" role="form">
        <div>
            <tr>
                <td>账号</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                </td>
                <br>
                <span id="username_err" class="err_msg" style="display:none">用户名已存在</span>
            </tr>
        </div>
        <div>
            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="text" id="password">
                </td>
            </tr>
        </div>
    </form>

    <script>
        // 1.给用户输入框绑定失去焦点事件
        document.getElementById("username").onblur = function () {
            // alert("TTT");
            // 2.发送ajax请求
            // 获取参数
            var username = this.value;
            // 2.1.创建核心对象
            const xhttp = new XMLHttpRequest();

            // 2.2.发送请求
            // 通过selectUserservlet向servlet.java发送usernema数据
            xhttp.open("GET", "http://localhost:8080/ajax/selectUserservlet?username=" + username);
            // 传两个参数：
            // xhttp.open("GET", "http://localhost:8080/ajax/selectUserservlet?username=test2&username2=test2");
            xhttp.send();

            // 2.3.获取响应
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    //判断
                    if (this.responseText == "true") {
                        // 用户名已存在
                        // 将展示（display）启用，显示提示信息
                        document.getElementById("username_err").style.display = '';
                    }
                    else {
                        // 用户名不存在
                        // 将展示（display）关闭，清除提示信息
                        document.getElementById("username_err").style.display = 'none';
                    }
                }
            };
        }
    </script>
</body>
</html>

2. 后端

ajax\src\main\java\com\mercurows\web\servlet\servlet.java

package com.mercurows.web.servlet;

import java.io.IOException;

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

@WebServlet("/selectUserservlet")
public class servlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 1.接受用户名
        String username = req.getParameter("username");

        System.out.println(username);

        // 2.调用service查询user对象
        boolean flag = true;

        // 3.标记响应
        resp.getWriter().write("" + flag);
    }

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

3. 请求链接如何确定？

xhttp.open("GET", "http://localhost:8080/ajax/selectUserservlet");

上述不带参数传递的请求连接为:http://localhost:8080/ajax/selectUserservlet

具体步骤：

用tomcat打开项目

一开始默认进来是这样的：image-20230713122716531

又因为要跳转到后端的servlet的servlet.java页面，通过上面的注解 **@WebServlet(“/selectUserservlet”)**知道请求链接后面应该跟随selectUserservlet

image-20230713123709201

若想传递参数则需要修改链接为：

http://localhost:8080/ajax/selectUserservlet?username=" + username

此时后端接受参数方法为：

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

4. 项目结构

image-20230713132643922

Axios

0. 导入js文件

去网上找到axios.js并导入项目中

image-20230713134538221

然后在前端中导入

<script src="js/axios.js"></script>

1. 前端视图

ajax\src\main\webapp\axios-demo.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>

    <body>
        <script src="js/axios.js"></script>

        <!-- 1.get方式 -->
        <!-- <script>
            axios({
                method:"get",
                url:"http://localhost:8080/ajax/axiosServlet?username=zhangsan"
            }).then(function (resp){
                alert(JSON.stringify(resp.data));
            })
        </script> -->

        <!-- 2.post方式 -->
        <script>
            axios({
                method:"post",
                url:"http://localhost:8080/ajax/axiosServlet",
                data:"username=zhangsan"
            }).then(function (resp){
                alert(JSON.stringify(resp.data));
            })
        </script>
    </body>
</html>

2. 后端

ajax\src\main\java\com\mercurows\web\servlet\AxiosServlet.java

package com.mercurows.web.servlet;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet{

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse res) throws IOException {
        System.out.println("get..");
        // 1.接受用户名
        String username = req.getParameter("username");

        // 2.响应数据
        // res.getWriter().write("hello axios");
        System.out.println(username);
        Map<Object,Object> data1 = new HashMap<>();
        data1.put("name", "Alice");
        data1.put("age", 12);
        data1.put("measurements", new int[] { 60, 70, 70 });

        JSONObject object = JSONObject.fromObject(data1); //创建Json对象
        //将json对象转化为字符串在终端输出
        System.out.print(object.toString());
        //把json数据返回给浏览器：
        res.getWriter().write(object.toString());
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse res) throws IOException {
        System.out.println("pos..");
        this.doGet(req,res);
    }
}

3. 确定请求链接

参考AJax中的方法

**注意：**上面后端中使用JSONObject了传递JSON数据，可参考博客：简单的后端传送json格式至前端正确处理方法

4. 项目结构

image-20230713161105117

Servlet优化

情景想象：对于Student实体对象有添加(add)、查找(select)等方法，按照我旧的设计方法，会设计两个servlet类：AddStudentServlet、SelectALLStudentServlet。如果后面后续又出现了更多操作，这使得servlet类的管理出现不便。这时我可以采取与MyBatis类似的处理方法进行映射，见：MyBatis简单入门。Student专门写个成一个StudentServlet类，然后原本的AddStudentServlet、SelectALLStudentServlet写成里面的成员方法。

1.自定义servlet类重写service方法

自定义继承了HttpServlet类的子类，并且重写protected void service(HttpServletRequest req, HttpServletResponse resp)方法–根据请求链接来决定是调用doGet还是doPost之类的，源码可以见：源码，重写了该方法之后也就可以做到无需写doGet、doPost等方法。

ajax\src\main\java\com\mercurows\web\servlet\BaseServlet.java

package com.mercurows.web.servlet;

import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

// @WebServlet("/selectUserservlet")
// 替换HttpServlet，根据请求的最后一段路径来进行分发
public class BaseServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 1.1获取请求路径，即浏览器输入栏的链接
        String uri = req.getRequestURI();
        // System.out.println(uri);
        // 1.2获取最后一段路径，即StudentServlet中的成员方法名
        //这里的方法名即指
        int index = uri.lastIndexOf('/');
        String methodName = uri.substring(index + 1);
        // System.out.println(methodName);

        // 2.执行方法
        // 2.1 获取TeacherServlet、StudentServlet字节码对象Class
        // 谁调用该方法，该方法中的this就是谁
        Class<? extends Object> cls = this.getClass();
        cls.getMethods();

        // 2.2获取方法Method对象
        try {
                // 方法名称、方法参数对应的class
            Method method = cls.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
            // 2.3参数：调用方法的类，该方法对应的参数
            method.invoke(this, req, resp);
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (SecurityException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (IllegalArgumentException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
    }
}

2. 映射servlet的类

与以往编写servlet类要继承HttpServlet类一样，这里因为BaseServlet继承了HttpServlet，所以直接继承BaseServlet即可，如：

ajax\src\main\java\com\mercurows\web\servlet\StudentServlet.java

package com.mercurows.web.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/student/*")
public class StudentServlet extends BaseServlet {

    public void selectAll(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("Student selectAll..");
    }

    public void add(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("Student add..");
    }
    
    public void del(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("Student del..");
    }    
}

这里的@WebServlet("/student/*")表示通配符，表示当要执行StudentServlet中任一方法时(如selectAll方法，则路径应该是：/student/selectAll)便会见控制权转交给对应方法。

3. 具体执行流程

运行tomcat打开项目浏览器：image-20230713172507702

假如要执行StudentServlet中的成员方法，则具体路径为：http://localhost:8080/ajax/student/selectAll

**具体的：**当我在浏览器中输入http://localhost:8080/ajax/student/del时，执行流程如下

  1. 请求由服务器接收，并传递给与路径匹配的Servlet，即BaseServlet。
  2. BaseServlet的service方法被调用，传入HttpServletRequest和HttpServletResponse对象。
  3. 在service方法内部，通过req.getRequestURI()获取请求的URI，即/ajax/student/del。
  4. 然后，通过uri.lastIndexOf('/')获取最后一个斜杠的索引，这里是14。
  5. 使用uri.substring(index)截取最后一段路径，即/del，并将其存储在methodName变量中。
  6. methodName现在包含要执行的方法名。
  7. BaseServlet的service方法执行完毕，控制权传递回StudentServlet。
  8. StudentServlet继承自BaseServlet，因此它会继承service方法。
  9. service方法在StudentServlet中未被重写，因此将调用BaseServlet中的service方法。
  10. BaseServlet的service方法将执行上述步骤来解析URI，并确定要执行的方法名为/del。
  11. service方法输出/ajax/student/del和/del的日志信息。
  12. service方法执行完毕，请求处理完成。

总结：请求首先由BaseServlet接收并解析URI，然后确定要执行的方法名为/del。然后控制权传递给StudentServlet，但由于StudentServlet没有重写service方法，因此将继续执行BaseServlet中的service方法。

4. 多个映射servlet的类

假如，现在又多了TeacherServlet.java，同理也只需要继承BaseServlet.java即可，而且BaseServlet.java不需要做出任何修改。

ajax\src\main\java\com\mercurows\web\servlet\TeacherServlet.java

package com.mercurows.web.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/teacher/*")
public class TeacherServlet extends BaseServlet {
    public void selectAll(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("teacher selectAll..");
    }
    public void add(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("teacher add..");
    }
}

5. 项目结构

image-20230713173922734

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/750431.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

数据库主从同步

数据库主从同步

目录 一、准备工作1.1 安装或关闭以下服务1.2 本次安装环境 2、主数据库配置2.1主数据库配置2.2创建用户2.3查看信息 三、从主数据库配置3.1从数据库配置3.2连接主服务器3.3测试 4、其他4.1连接完毕后发现Slave_IO_Running值异常&#xff0c;4.2报错Error connecting to source…
阅读更多...
第一阶段-第七章 Python的函数进阶

第一阶段-第七章 Python的函数进阶

目录 一、函数多返回值  1.学习目标  2.多个返回值的语法  3.本节的代码演示 二、函数多种传参方式  1.学习目标  2.函数参数种类&#xff08;位置参数、关键字参数、缺省参数、不定长参数&#xff08;位置传递、关键字传递&#xff09;&#xff09;  3.本节的代码…
阅读更多...
一条命令解决端口占用，开启mysql

一条命令解决端口占用，开启mysql

注&#xff1a;最后有面试挑战&#xff0c;看看自己掌握了吗 文章目录 端口占用开启mysql 端口占用 如果发现 8080 端口被占用可以使用命令 sudo lsof -t -i:8080 | sudo xargs kill -9 查找并杀死相应的进程。 开启mysql 打开命令提示符或终端。如果您已经安装了MySQL&…
阅读更多...
【雕爷学编程】Arduino动手做（161）---16路PWM舵机驱动板PCA9685

【雕爷学编程】Arduino动手做（161）---16路PWM舵机驱动板PCA9685

37款传感器与执行器的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&am…
阅读更多...
HTML语法

HTML语法

文章目录 前言HTML 文件基本结构常见标签标签种类特殊符号图片链接a链接 双标签链接 列表表格 &#xff1a;表单多行文本域: 前言 HTML是有标签组成的 <body>hello</body>大部分标签成对出现. 为开始标签, 为结束标签. 少数标签只有开始标签, 称为 “单标签”. 开…
阅读更多...
第二章：类和对象（中）

第二章：类和对象（中）

系列文章目录 文章目录 系列文章目录前言类的6个默认成员函数构造函数概念特性 析构函数概念特性 拷贝构造函数概念特征 赋值运算符重载运算符重载赋值运算符重载赋值运算符重载格式赋值运算符只能重载成类的成员函数不能重载成全局函数用户没有显式实现时&#xff0c;编译器会…
阅读更多...
【物理】模拟粒子在电场和磁场中的轨迹研究（Matlab代码实现）

【物理】模拟粒子在电场和磁场中的轨迹研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
Mysql的分库分表策略

Mysql的分库分表策略

一.水平切分 水平切分又称为 Sharding 策略&#xff0c;它是将同一个表中的记录拆分到多个结构相同的表中。 当一个表的数据不断增多时&#xff0c;Sharding 是必然的选择&#xff0c;它可以将数据分布到集群的不同节点上&#xff0c;从而缓存单个数据库的压力。 Sharding 策…
阅读更多...
后端（五）：JVM

后端（五）：JVM

目录 JVM 中的内存区域划分 JVM 的类加载机制 1. 加载 2. 验证 3. 准备 4. 解析 5. 初始化 JVM 中的垃圾回收策略 找&#xff0c;确认垃圾 1. 引用计数 2. 可达行分析 释放”垃圾“对象 1. 标记清除 2. 复制算法 3. 标记整理 分代算法 JVM也就是我们俗称的八股…
阅读更多...
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面

Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面

Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面 虽然说IE6除了部分要求苛刻的需求以外已经被可以不考虑了&#xff0c;但是WIN7自带的浏览器IE8还是需要支持的。 本文这个方法主要的优点&#xff0c;个人觉得就是准备少&#xff0c;不需要上网寻找大量的图片做素材&…
阅读更多...
2003-Can‘t connect to Mysql server on ‘xxx‘ (10060 “Unknown error“)

2003-Can‘t connect to Mysql server on ‘xxx‘ (10060 “Unknown error“)

Navicat连接 阿里云 服务器MySQL5.7数据库报错 解决办法&#xff1a; 进入数据库执行以下sql 1.允许root用户远程连接 GRANT ALL PRIVILEGES ON *.* TO root% IDENTIFIED BY 数据库密码 WITH GRANT OPTION; 2.刷新权限 FLUSH PRIVILEGES;3.执行quit退出数据库 quit; 4.…
阅读更多...
PVE虚拟化平台之安装Ubuntu Desktop系统

PVE虚拟化平台之安装Ubuntu Desktop系统

PVE虚拟化平台之安装Ubuntu Desktop系统 一、Ubuntu介绍1.1 Ubuntu简介1.2 Ubuntu版本1.3 ubuntu命名规则 二、上传镜像到PVE2.1 检查PVE环境2.2 上传镜像到PVE 三、新建虚拟机3.1 设置虚拟机名称3.2 操作系统设置3.3 系统设置3.4 磁盘设置3.5 cpu设置3.6 内存设置3.7 网络设置…
阅读更多...
sprinboot摄影跟拍预定管理系统

sprinboot摄影跟拍预定管理系统

摄影跟拍预定管理方面的任务繁琐,以至于每年都在摄影跟拍预定管理这方面投入较多的精力却效果甚微,摄影跟拍预定管理系统的目标就是为了能够缓解摄影跟拍预定管理工作方面面临的压力,让摄影跟拍预定管理方面的工作变得更加高效准确。 本项目在开发和设计过程中涉及到原理和技术…
阅读更多...
怎么给pdf文件加密?pdf文档如何加密

怎么给pdf文件加密?pdf文档如何加密

在数字化时代&#xff0c;保护个人和机密信息的重要性越来越受到关注。PDF&#xff08;Portable Document Format&#xff09;是一种广泛使用的文件格式&#xff0c;用于共享和存储各种类型的文档。然而&#xff0c;由于其易于编辑和复制的特性&#xff0c;保护PDF文件中的敏感…
阅读更多...
springboot书籍学习平台

springboot书籍学习平台

本项目在开发和设计过程中涉及到原理和技术有: B/S、java技术和MySQL数据库等等.
阅读更多...
送呆萌的她一个皮卡丘（Python实现）

送呆萌的她一个皮卡丘（Python实现）

目录 1 呆萌的她 2 思维需要革新 3 送她的一个漂亮皮卡丘 4 Python完整代码奉上 1 呆萌的她 又是一季春风暖阳下, 你是一湾一湾羞涩的春波。 静静感受着&#xff0c; 你垂下的枝膊 在我的脸上轻轻抚摸 一对春燕,低低掠过 涟漪乍起&#xff0c;是你浅浅的笑窝...... 2 思维需…
阅读更多...
[Error] invalid preprocessing directive #inclued问题解决

[Error] invalid preprocessing directive #inclued问题解决

错误代码 报错内容 [Error] invalid preprocessing directive #inclued 错误原因 #inclued写错了应该写成#include
阅读更多...
elementUI 非表单格式的校验

elementUI 非表单格式的校验

在普通表单中对输入框、选择框都有校验案例。 但是在自定义非空中如何进行校验官网并没有说明 关键代码 clearValidate 方法清除校验 this.$refs.formValue.clearValidate(signinimg) 使用案例 <template><div class"stylebg"><Tabs icons"el-…
阅读更多...
[QT编程系列-6]：C++图形用户界面编程，QT框架快速入门培训 - 3- QT窗体设计 - 自定义菜单栏

[QT编程系列-6]：C++图形用户界面编程，QT框架快速入门培训 - 3- QT窗体设计 - 自定义菜单栏

目录 3. QT窗体设计 3.1 自定义菜单 3.1.1 设计目标​编辑 3.1.2 创建过程​编辑 3. QT窗体设计 3.1 自定义菜单 3.1.1 设计目标 3.1.2 创建过程 在Qt中&#xff0c;Windows窗口和Widget窗口是两种不同的窗口类型&#xff0c;它们在创建方式、功能和用途上有所区别。 创建…
阅读更多...
【React】- 组件生命周期连续渲染两次问题

【React】- 组件生命周期连续渲染两次问题

最近在整理生命周期相关的知识内容&#xff0c;然后发现一个奇怪的现象&#xff0c;即组件的生命周期会运行2次&#xff01;经过确认不是代码问题&#xff0c;于是开始找度娘&#xff0c;终于找到其原因-React中的严格模式&#xff0c;在这里记录一下 一、问题重现 如图所示&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023