java中 前后端不分离的的方法 如何做api接口请求

在传统的Java Web开发中,前后端通常是不分离的,即前端页面和后端API服务是在同一个项目中进行开发和部署的。在这种情况下,我们可以使用Servlet来处理前端的请求,并返回相应的数据。

在本文中,我们将以一个简单的示例来演示如何在Java中实现不分离的前后端API接口请求。假设我们有一个需求,需要根据用户输入的姓名,返回该用户的年龄。

首先,我们需要创建一个Servlet来处理用户的请求。我们可以继承HttpServlet类,并重写doGet方法来处理GET请求。具体代码如下:

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;public class UserInfoServlet extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {String name = request.getParameter("name");int age = getAgeByName(name); // 根据姓名获取年龄的方法response.setContentType("application/json");PrintWriter out = response.getWriter();out.println("{ \"name\": \"" + name + "\", \"age\": " + age + " }");}private int getAgeByName(String name) {// 根据姓名查询年龄的逻辑,这里简单模拟返回一个固定值return 30;}
}

在上面的代码中,我们创建了一个UserInfoServlet类,其中重写了doGet方法来处理GET请求。我们首先从请求中获取参数name,然后调用getAgeByName方法获取对应的年龋,最后将结果以JSON格式返回给前端。

接下来,我们需要在web.xml中配置Servlet的映射关系。具体代码如下:

<servlet><servlet-name>UserInfoServlet</servlet-name><servlet-class>com.example.UserInfoServlet</servlet-class>
</servlet><servlet-mapping><servlet-name>UserInfoServlet</servlet-name><url-pattern>/user-info</url-pattern>
</servlet-mapping>

在web.xml中,我们将UserInfoServlet映射到/user-info路径,这样前端就可以通过发送GET请求到/user-info来获取用户信息。

最后,我们来编写一个简单的前端页面来发送请求并展示结果。具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>User Info</title>
</head>
<body><input type="text" id="name" placeholder="Enter your name"><button onclick="getUserInfo()">Get Info</button><div id="result"></div><script>function getUserInfo() {var name = document.getElementById("name").value;fetch("/user-info?name=" + name).then(response => response.json()).then(data => {document.getElementById("result").innerText = "Name: " + data.name + ", Age: " + data.age;});}</script>
</body>
</html>

在上面的代码中,我们创建了一个简单的HTML页面,其中包含一个输入框用于输入姓名,一个按钮用于发送请求,以及一个用于展示结果的div。当用户点击按钮时,我们通过fetch API发送GET请求到/user-info路径,并将结果展示在页面上。

最后,我们可以启动一个Tomcat服务器来部署我们的应用,并访问前端页面来测试接口请求。通过输入不同的姓名,我们可以看到对应的年龄信息被返回并展示在页面上。

通过上面的示例,我们演示了如何在Java中实现不分离的前后端API接口请求。在实际项目中,我们可以根据具体的需求和业务逻辑来扩展和优化代码,实现更加复杂和功能丰富的接口功能。同时,我们也可以考虑使用框架来简化开发流程,提高代码的可维护性和可扩展性。希望本文对您有所帮助。

序列图

下面是一个简单的序列图,展示了前端页面发送请求到后端服务器的过程:

sequenceDiagramparticipant Frontendparticipant BackendFrontend->>Backend: 发送GET请求 /user-info?name=JohnBackend->>Backend: 处

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

react开发嵌入react-monaco-editor代码编辑器的方法

Next.js中使用react开发嵌入react-monaco-editor代码编辑器的方法&#xff08;支持语法高亮&#xff09; 安装 (base) PS D:\ai-ui> npm install react-monaco-editoradded 1 package, changed 1 package, and audited 1030 packages in 6s273 packages are looking for f…

《数字图像处理》实验报告五

一、实验任务与要求 实现一个自适应局部降噪滤波器&#xff1b;在一幅测试版图像中加入运动模糊和高斯噪声&#xff0c;产生一幅退化图像&#xff0c;采用 deconvwnr 函数实现逆滤波及维纳滤波。 二、实验报告 &#xff08;一&#xff09;实现一个自适应局部降噪滤波器 1、自…

ajax请求接口不设置请求头可以请求成功,但是设置请求头之后就跨域,已解决

遇到这个问题我们不要着急找后端&#xff0c;先通过控制台看看有没有报错&#xff0c;控制台的列表是不会有这个红色报错的&#xff0c;所以我们要看下图&#xff1a; 点击这个红色&#xff0c;然后在下面会出现一些信息 很明显是这个请求头timestamp的请求头被屏蔽了&#xff…

Linux C语言程序中线程本地存储变量的内存分配和使用

在多线程中&#xff0c;有一种叫线程本地存储&#xff08;Thread-Local Storage&#xff0c;TLS&#xff09;的变量&#xff0c;它是每个线程有且只有一份自己的副本&#xff0c;对于这个线程来说&#xff0c;它是全局变量&#xff0c;可被所有函数共用&#xff1b;因为每个线程…

单机、集群和分布式

目录 1.概述 2.单机服务器 单机版的服务器的性能&#xff0c;设计上的瓶颈&#xff1f; 3.集群 解决瓶颈1&#xff1a; 没有解决瓶颈2&#xff1a; 没有解决瓶颈3&#xff1a; 集群的优点&#xff1f; 集群的缺点&#xff1f; 4.分布式 分布式的优点&#xff1f; 分…

c++笔记提高效率-emplace函数

在C中&#xff0c;标准库容器的emplace方法是一种高效的插入操作&#xff0c;用于在容器中直接构造元素。与insert和push方法相比&#xff0c;emplace方法可以避免不必要的复制或移动操作&#xff0c;因为它直接在容器内部构造元素。下面详细介绍各容器的emplace方法及其用法。…

java常用类(2)

目录 1.String概述 1.1 字符串的不变性 1.2 创建String对象两种方式的区别 1.3 字符串中的构造方法 1.4 字符串判断功能的方法 1.5 字符串获取功能的方法 1.6 字符串转换功能的方法 1.7 字符串替换功能的方法 2.StringBuffer 2.1 构造方法 2.2 插入方法 2.2.1 app…

a-table单元格指定合并以及表格双击编辑以及未填写指定验证功能

文章目录 a-table单元格指定合并以及表格双击编辑以及未填写指定验证功能一、 a-table单元格指定合并1. a-table2. columns3. 图例 二、a-table 表格双击编辑以及未填写验证1. a-table2. js3. 图例 a-table单元格指定合并以及表格双击编辑以及未填写指定验证功能 一、 a-table…

从零开始精通Onvif之加密与认证

&#x1f4a1; 如果想阅读最新的文章&#xff0c;或者有技术问题需要交流和沟通&#xff0c;可搜索并关注微信公众号“希望睿智”。 概述 安全是Onvif规范的核心部分&#xff0c;它涵盖了加密和认证两大领域。在Onvif标准下&#xff0c;安全措施主要包括&#xff1a;设备访问控…

大模型AI技术实现语言规范练习

人工智能技术可以为语言规范练习提供多种有效的解决方案&#xff0c;帮助学习者更有效地掌握语言规范。以下是一些常见的应用场景。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1. 智能纠错 利用自然语言处理技术&#xff0c;可以…

DC/AC电源模块一种效率与可靠性兼备的能源转换解决方案

DC/AC电源模块都是一种效率与可靠性兼备的能源转换解决方案 DC/AC电源模块是一种能够将直流电源&#xff08;DC&#xff09;转换为交流电源&#xff08;AC&#xff09;的设备。它在现代电子设备中扮演着非常重要的角色&#xff0c;因为许多设备需要交流电源才能正常运行。无论…

树形结构的勾选、取消勾选、删除、清空已选、回显、禁用

树形结构的勾选、取消勾选、删除、清空已选、回显、禁用 基本页面&#xff1a; 分为上传文件和编辑的页面 代码实现要点&#xff1a; 上传文件页面&#xff1a; 点开选择范围弹窗&#xff0c;三个radio单选框都为可选状态&#xff0c;默认显示的是第一个单选框&#xff08;按…

开源C++版AI画图大模型框架stable-diffusion.cpp开发使用初体验

stable-diffusion.cpp是一个C编写的轻量级开源类AIGC大模型框架&#xff0c;可以支持在消费级普通设备上本地部署运行大模型进行AI画图&#xff0c;以及作为依赖库集成的到应用程序中提供类似于网页版stable-diffusion的功能。 以下基于stable-diffusion.cpp的源码利用C api来…

人工智能的未来:畅想智能新时代

人工智能正在改变我们的世界&#xff0c;它将带我们走向何方&#xff1f; 著名神经科学家、Numenta 公司创始人杰夫•霍金斯 Jeff Hawkins 在其著作《人工智能的未来》中&#xff0c;描绘了一幅人工智能发展的光明图景。他认为&#xff0c;人工智能将超越人类智能&#xff0c;…

理解Gobrs-Async相对于CompletableFuture的优势

Gobrs-Async框架针对复杂应用场景下的异步任务编排&#xff0c;提供了一些传统Future或CompletableFuture所不具备的特性和能力&#xff0c;以下是它能够解决的问题和相对于CompletableFuture的优势&#xff1a; 1. **全链路异常回调**&#xff1a; - Gobrs-Async允许为任务…

关于地图点击的操作

_this.map.dragging.disable(); //地图拖拽 _this.map.doubleClickZoom.disable(); //禁止双击放大地图 _this.map.scrollWheelZoom.disable(); //禁止鼠标滑轮滚动放大缩小地图 _this.map.dragging.enable(); //e…

备份和镜像TrinityCore

相比重新安装&#xff0c;省去了编译的过程&#xff0c;同时还能保留以前的人物、装备等。 注意&#xff0c;若不想重新编译安装&#xff0c;则需要创建一样的目录、账户等&#xff0c;以减少不必要的麻烦。 首先备份数据: mysql备份和导入方法见&#xff1a;使用dump备份my…

视觉与味蕾的交响:红酒与艺术的无界狂欢,震撼你的感官世界

在浩瀚的艺术海洋中&#xff0c;红酒以其不同的魅力&#xff0c;成为了一种跨界整合的媒介。当雷盛红酒与艺术相遇&#xff0c;它们共同呈现出一场特别的视觉盛宴&#xff0c;让人沉醉在色彩与光影的交织中&#xff0c;感受红酒与艺术的无界碰撞。 雷盛红酒&#xff0c;宛如一件…

AI作画Prompt不会写?Amazon Bedrock Claude3.5来帮忙

最新上线的Claude3.5 Sonnet按照官方介绍的数据来看&#xff0c;在多方面超越了CPT-4o&#xff0c;是迄今为止最智能的模型。 而跟上一个版本相比&#xff0c;速度是Claude 3 Opus的两倍&#xff0c;成本只有其五分之一。 Claude3.5 Sonnet不仅擅长解释图表、图形或者从不完…

vue3中子组件调用父组件事件

在 Vue 3 中&#xff0c;子组件调用父组件的事件&#xff08;或方法&#xff09;的方式与 Vue 2 类似&#xff0c;但 Vue 3 引入了 Composition API&#xff0c;这可能会改变你组织代码的方式。不过&#xff0c;基本的通信机制——通过自定义事件 ($emit) 通知父组件——仍然保…