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.pswp.cn/diannao/35621.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/35621.shtml
英文地址,請注明出處:http://en.pswp.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) 通知父組件——仍然保…