JavaEE(2)：前后端项目之间的交互
现在，在网页中通过超链接，表单就可以向后端发送请求，后端也可以正常响应内容。
以前通过表单访问后端的请求方式称为同步请求
同步请求
当网页与后端交互时，前端不能再进行其他操作
服务器端响应回来的内容，会把整个浏览器的内容覆盖掉
这种请求方式在前后端交互时，就不太友好了
现在的前后端交互请求，都是使用的是异步请求
举例说明：
前端注册网页(实现同步请求)：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function checkAccount(account){//同步请求，已经被抛弃了location.href = "http://127.0.0.1:8088/dormServer/register?account="+account;}function relogin(){location.href = "http://127.0.0.1:8848/webtest/login.html";}</script></head><body><form method="post">账号:<input type="text" name="account" value="" onblur="checkAccount(this.value)"/> <span id="msgid"></span><br/>密码:<input type="password" name="password" value=""/> <br/><input type="button" value="提交" onclick="relogin()"/></form></body>
</html>在注册界面输入好账号(已存在)后：
当鼠标焦点不在账号栏时：
页面直接被响应到的信息覆盖了，后续操作无法进行。所以同步请求就被无情抛弃了~
异步请求
同时可以做多件事情(前端与服务器交互时，不影响前端网页其他操作)
使用js中提供的XMLHttpRequest对象实现发送异步请求，和接收服务器响应
异步请求时，会出现跨域访问问题：浏览器默认不允许js对象接收来自其他服务器响应的内容。
举例说明：
将前端网页的方法中将异步代码实现：
function checkAccount(account){//异步请求，使用js对象发送请求var httpobj = new XMLHttpRequest();//封装请求地址和数据httpobj.open("get","http://127.0.0.1:8088/dormServer/register?account="+account,true);//发送请求httpobj.send();//接收响应httpobj.onreadystatechange = function(){//httpobj.responseText; 获得到响应的内容document.getElementById("msgid").innerHTML = httpobj.responseText;}}在注册界面输入好账号(已存在)后：
当鼠标焦点不在账号栏时，从后端响应回来的信息就会立刻附在账号栏后反馈给用户。
但如果有很多种需要实时为用户反馈信息的话，这种异步请求的实现代码就非常繁琐，在多个前端网页也显得非常冗余。
所以就有了axios框架去封装异步请求的代码，减少了代码的冗余。
axios
axios 是一个HTTP 的网络请求库.
<!-- 导入axios框架 -->
<script src="js/axios.min.js"></script>
然后注册网页的前端方法中的异步请求就会变成
function checkAccount(account){//axios框架对异步请求进行封装axios.get("http://127.0.0.1:8088/dormServer/register?account="+account).then((resp)=>{console.log(resp);document.getElementById("msgid").innerHTML = resp.data;//resp.data取出后端响应的内容});}极大减少了代码的数量，增加了代码的观赏性。
跨域问题
不同服务之间进行访问
只要请求协议，域名，端口其中一项不同，就属于跨域访问
在后端过滤器中响应时，告知前端本次响应是安全的，允许跨域访问
跨域问题是一个前端问题，也可以在后端解决，也可以在前端解决
配置跨域过滤器
public class CorsFilter implements Filter {public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)throws IOException, ServletException {HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;HttpServletRequest httpRequest = (HttpServletRequest) servletRequest;//允许携带Cookie时不能设置为* 否则前端报错httpResponse.setHeader("Access-Control-Allow-Origin", httpRequest.getHeader("origin"));//"origin"允许所有请求跨域,前期都是自己的浏览器访问自己的服务器，也可以使用回环地址httpResponse.setHeader("Access-Control-Allow-Methods", "*");//允许跨域的请求方法GET, POST, HEAD 等httpResponse.setHeader("Access-Control-Allow-Headers", "*");//允许跨域的请求头httpResponse.setHeader("Access-Control-Allow-Credentials", "true");//是否携带cookiefilterChain.doFilter(servletRequest, servletResponse);}
}在web.xml文件中配置注册跨域过滤器
<!--配置允许跨域过滤器--><filter><filter-name>corsfilter</filter-name><filter-class>com.ffyc.dormServer.filter.CorsFilter</filter-class></filter><filter-mapping><filter-name>corsfilter</filter-name><url-pattern>/*</url-pattern></filter-mapping>json
json javaScript object Notation javaScript对象表示法
两种不同的语言之间如何进行数据交互(例如C语言程序 与 java程序之间要进行数据交互)
json是一种公认的js识别的对象表示法，对于java而言就是一种特定格式的字符串
对象：{键:值,键:值} 例如：{name:jim,age:20} 集合：[{键:值,键:值}，{键:值,键:值}]
模拟json转换数据格式
1、写一个SearchServlet类
public class SearchServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String name = req.getParameter("name");//模拟从数据库根据名字查询学生所有信息，然后叫数据封装到一个学生对象中Student student = new Student();student.setNum(101);student.setName(name);student.setGender("男");student.setAge(20);PrintWriter printWriter = resp.getWriter();ObjectMapper objectMapper = new ObjectMapper();String jsonstr = objectMapper.writeValueAsString(student);printWriter.print(jsonstr);//打印响应一个学生对象}2、在web.xml文件中配置 SearchServlet
<servlet><servlet-name>search</servlet-name><servlet-class>com.ffyc.dormServer.web.SearchServlet</servlet-class></servlet><servlet-mapping><servlet-name>search</servlet-name><url-pattern>/search</url-pattern></servlet-mapping>在前端写一个search.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 导入axios框架 --><script src="js/axios.min.js"></script><script>function search(){var name = document.getElementById("nameid").value;axios.get("http://127.0.0.1:8088/dormServer/search?name="+name).then((resp)=>{if(resp.data.code == 200){console.log(resp.data);alert(resp.data.massage);document.getElementById("numid").innerHTML = resp.data.data.num;document.getElementById("nameid1").innerHTML = resp.data.data.name;document.getElementById("genderid").innerHTML = resp.data.data.gender;document.getElementById("ageid").innerHTML = resp.data.data.age;}else if(resp.data.code == 500){alert(resp.data.massage);}});}</script></head><body><input type="text" id="nameid"/><input type="button" value="搜索" onclick="search()"/><div>学号：<span id="numid"></span>姓名：<span id="nameid1"></span>性别：<span id="genderid"></span>年龄：<span id="ageid"></span></div></body>
</html>测试json：
打开search网页
输入张三后，后端的json就将从数据库得到的信息，转换成json的数据格式响应回前端并显示上去
相关文章：
JavaEE(2)：前后端项目之间的交互
现在，在网页中通过超链接，表单就可以向后端发送请求，后端也可以正常响应内容。 以前通过表单访问后端的请求方式称为同步请求 同步请求 当网页与后端交互时，前端不能再进行其他操作 服务器端响应回来的内容，会把整个浏…...
（已开源-CVPR 2024）YOLO-World: Real-Time Open-Vocabulary Object Detection
169期《YOLO-World Real-Time Open-Vocabulary Object Detection》 You Only Look Once (YOLO) 系列检测模型是目前最常用的检测模型之一。然而，它们通常是在预先定义好的目标类别上进行训练，很大程度上限制了它们在开放场景中的可用性。为了解决这一限制…...
Spring6梳理4——SpringIoC容器
以上笔记来源： 尚硅谷Spring零基础入门到进阶，一套搞定spring6全套视频教程（源码级讲解）https://www.bilibili.com/video/BV1kR4y1b7Qc 目录 4.1 前言 4.2 IoC容器 4.2.1 控制反转(IoC) 4.2.2 依赖注入 4.2.3 IoC容器在Spri…...
SpringBoot2：请求处理原理分析-FORM表单请求接口
一、RESTFUL简介 Rest风格支持（使用HTTP请求方式，动词来表示对资源的操作） 以前：/getUser 获取用户 /deleteUser 删除用户 /editUser 修改用户 /saveUser 保存用户 现在： /user GET-获取用户 DELETE-删除用户 PUT-修改…...
Monkey日志ANR、CRASH、空指针异常及其他异常数据分析
引言 在Android开发过程中，monkey测试是一种常用的随机测试手段，用于模拟用户的各种操作来发现应用中的稳定性问题。通过monkey测试生成的日志文件包含了丰富的信息，包括应用程序崩溃（Crash）、无响应（ANR&…...
Vue 3结合Element Plus中，实现一个级联选择器（Cascader）来展示省市区
在Vue 3结合Element Plus中，实现一个级联选择器（Cascader）来展示省市区（甚至到更细分的级别，如街道、小区等）的联动选择是一个常见的需求。Element Plus的Cascader组件非常适合这样的场景，因为它…...
使用卫星仿真软件STK的一些应用和思考（星地链路、星间链路）
目录 任务描述利用STK建模星地协同系统3个GEO高轨卫星240/20/1 Walker-Star Constellation 低轨卫星星座地面站或者地面设备 链路建模与数据提取处理星地链路星间链路数据读取的几种方法最麻烦的方法使用Matlab与STK互联接口使用大规模使用Chain 总结 任务描述 在一个星地协同…...
pytorch对不同的可调参数，分配不同的学习率
在 PyTorch 中，你可以通过为优化器传递不同的学习率来针对不同的可调参数分配不同的学习率。这通常通过向优化器传递一个字典列表来实现，其中每个字典指定特定参数组的学习率。下面是一个示例代码，展示了如何实现这一点： import …...
零基础学习Python（八）—— time模块、request模块、数据分析和自动化办公相关模块、jieba模块、文件操作和os相关模块的简单介绍
1. time模块 time()：获取当前时间戳，是一个数字 localtime()：返回一个time.struct_time对象，里面有年月日时分秒，还有星期几（0表示星期一）和今年的第几天 import timeprint(time.time()) pri…...
快速回顾-HTML5
HTML5-常用的标签：https://blog.csdn.net/TKOP_/article/details/111395865 <!-- HTML5:声明文档类型的标签 --> <!DOCTYPE html><!-- 用于声明网页的主要语言为简体中文 --> <!-- 帮助搜索引擎、浏览器等理解网页的语言内容，以便…...
视频技术未来展望：EasyCVR如何引领汇聚融合平台新趋势
随着科技的飞速发展，视频技术已成为现代社会不可或缺的一部分，广泛应用于安防监控、娱乐传播、在线教育、电商直播等多个领域。本文将探讨视频技术的未来发展趋势，并深入分析TSINGSEE青犀EasyCVR视频汇聚融合平台的技术优势，展现其…...
7个流行的开源数据治理工具
数字化时代，数据是已经成为最宝贵的资产之一。数据支撑着我们的政府、企业以及各类组织的所有流程，并为决策以及智能化服务提供支撑。大数据有大用途，但是也可能隐藏着巨大的风险，特别是如果我们对数据的情况不是很了解的时候&…...
js | XMLHttpRequest
是什么？ 和serve交互数据的对象；能够达到页面部分刷新的效果，也就是获取数据之后，不会使得整个页面都刷新；虽然名字是XML，但不限于XML数据。 怎么用？ function reqListener() {console.log(thi…...
2024国赛数学建模A题思路模型代码
2024国赛数学建模思路资料，思路获取见文末名片 数学建模感想 纪念逝去的大学数学建模：两次校赛，两次国赛，两次美赛，一次电工杯。从大一下学期组队到现在，大三下学期，时间飞逝，我的…...
使用SVD（奇异值分解）进行降维的奇妙之旅
在数据分析和机器学习的广阔天地中，降维技术占据着举足轻重的地位。当我们面对高维数据时，不仅计算成本高昂，而且容易遭遇“维度灾难”，即随着维度的增加，数据的稀疏性和距离度量失效等问题愈发严重。为了克服这些挑战…...
【C++ 第二十一章】特殊类的设计（学习思路）
1.请设计一个类，不能被拷贝 设计思路 拷贝只会使用在两个场景中：拷贝构造函数以及赋值运算符重载，因此想要让一个类禁止拷贝，只需让该类不能调用拷贝构造函数以及赋值运算符重载即可。 C98 的做法 将拷贝构造函数与赋值运算符…...
Java设计模式【命令模式】-行为型
1. 介绍 命令模式（Command Pattern） 是一种行为型设计模式，它将一个请求封装为一个对象，从而使我们可以用不同的请求对客户端进行参数化，并且支持请求的排队、记录日志以及撤销、重做等功能。命令模式将请求的发送者与…...
【HarmonyOS】一键扫码功能
【HarmonyOS】一键扫码功能 前言 鸿蒙在api10之后，对系统api的基础上，封装了较为复杂功能的开发工具包，统一称之为Kit。这些Kit根据功能定义的不同，划分为不同的种类Kit。如下图所示： 其实可以理解为集成在系统中的…...
Spring Boot应用中集成与使用多数据源
Spring Boot应用中集成与使用多数据源 1. 前言 通过定义和使用多个数据源，能在Spring Boot应用中实现更复杂的数据管理场景，比如读写分离、数据冗余等。 2. 准备工作 环境准备：确保已经准备好Spring Boot的开发环境。数据库准备ÿ…...
探索 JavaScript 中的 instanceof 关键字
在 JavaScript 这门灵活而强大的编程语言中，instanceof 是一个非常重要的操作符，它用于检测一个对象是否在其原型链的原型构造函数的 prototype 属性中出现。简而言之，instanceof 用于测试一个对象是否是其父类或者其原型链上某个构造函数的实…...
vscode里如何用git
打开vs终端执行如下： 1 初始化 Git 仓库（如果尚未初始化） git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...
Linux 文件类型，目录与路径，文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件：-（纯文本文件，二进制文件，数据格式文件） 如文本文件、图片、程序文件等。 目录文件：d（directory） 用来存放其他文件或子目录。 设备…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡（如 HAProxy、AWS NLB、阿里 SLB）发起上游连接时，将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后，ngx_stream_realip_module 从中提取原始信息…...
省略号和可变参数模板
本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...
Ubuntu Cursor升级成v1.0
0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开，快捷键也不好用，当看到 Cursor 升级后，还是蛮高兴的 1. 下载 Cursor 下载地址：https://www.cursor.com/cn/downloads 点击下载 Linux (x64) ，…...
GraphQL 实战篇：Apollo Client 配置与缓存
GraphQL 实战篇：Apollo Client 配置与缓存 上一篇：GraphQL 入门篇：基础查询语法 依旧和上一篇的笔记一样，主实操，没啥过多的细节讲解，代码具体在： https://github.com/GoldenaArcher/graphql…...
CppCon 2015 学习:Reactive Stream Processing in Industrial IoT using DDS and Rx
“Reactive Stream Processing in Industrial IoT using DDS and Rx” 是指在工业物联网（IIoT）场景中，结合 DDS（Data Distribution Service） 和 Rx（Reactive Extensions） 技术，实现 …...
Axure零基础跟我学：展开与收回
亲爱的小伙伴，如有帮助请订阅专栏！跟着老师每课一练，系统学习Axure交互设计课程！ Axure产品经理精品视频课https://edu.csdn.net/course/detail/40420 课程主题：Axure菜单展开与收回 课程视频：...
C++ Saucer 编写Windows桌面应用
文章目录 一、背景二、Saucer 简介核心特性典型应用场景 三、生成自己的项目四、以Win32项目方式构建Win32项目禁用最大化按钮 五、总结 一、背景 使用Saucer框架，开发Windows桌面应用，把一个html页面作为GUI设计放到Saucer里，隐藏掉运行时弹…...
Neo4j 完全指南：从入门到精通
第1章：Neo4j简介与图数据库基础 1.1 图数据库概述 传统关系型数据库与图数据库的对比图数据库的核心优势图数据库的应用场景 1.2 Neo4j的发展历史 Neo4j的起源与演进Neo4j的版本迭代Neo4j在图数据库领域的地位 1.3 图数据库的基本概念 节点(Node)与关系(Relat…...