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

专注API从业者

于 2024-06-26 16:05:49 发布

阅读量372

点赞数 5

分类专栏： API 经验分享电商平台文章标签： java 开发语言前端后端数据库大数据

本文链接：https://blog.csdn.net/2301_78159247/article/details/139991872

版权

经验分享同时被 3 个专栏收录

185 篇文章 0 订阅

订阅专栏

电商平台

167 篇文章 0 订阅

订阅专栏

API

24 篇文章 0 订阅

订阅专栏

在传统的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接口请求。在实际项目中，我们可以根据具体的需求和业务逻辑来扩展和优化代码，实现更加复杂和功能丰富的接口功能。同时，我们也可以考虑使用框架来简化开发流程，提高代码的可维护性和可扩展性。希望本文对您有所帮助。

序列图

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

sequenceDiagram
    participant Frontend
    participant Backend

    Frontend->>Backend: 发送GET请求 /user-info?name=John
    Backend->>Backend: 处

专注API从业者

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
java中前后端不分离的的方法如何做api接口请求

在传统的Java Web开发中，前后端通常是不分离的，即前端页面和后端API服务是在同一个项目中进行开发和部署的。在这种情况下，我们可以使用Servlet来处理前端的请求，并返回相应的数据。在本文中，我们将以一个简单的示例来演示如何在Java中实现不分离的前后端API接口请求。假设我们有一个需求，需要根据用户输入的姓名，返回该用户的年龄。首先，我们需要创建一个Servlet来处理用户的请求。我们可以继承HttpServlet类，并重写doGet方法来处理GET请求。
复制链接

扫一扫