React与后端交互的一种方式

最新推荐文章于 2025-07-08 15:29:53 发布

原创最新推荐文章于 2025-07-08 15:29:53 发布 · 7.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#React #Spring #前后端交互

工作项目笔记专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种前后端分离项目的联调方法。前端通过ajax等方式向后端发送请求，而后端通过配置中心获取前端资源路径，并在jsp页面引入前端打包后的js和css文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上周工作中需要将一个react前端项目与spring的后端项目进行联调，但之前从未单独做过这种前后端分离的系统，虽然对react用法进行了基本学习，但开始始终没搞明白这种形式的系统前后端是如何交互的。

后查看了公司其他系统的代码，发现一种可行的交互形式，特写此文以记之。

前端向后端发请求，则和其他场景下的前后端交互一样，使用ajax或相应方式向对应的url发送请求即可。

而后端向前端的response则是当时困扰我的一个问题，当时始终没搞清楚，spring的controller是以何种方式返回到react前端项目的。

我看到的一个其他系统中，是在后端spring项目中写一个jsp，在其中引入react项目打包后生成的js和css文件。此系统在打开首页的后端逻辑中，通过公司的配置中心中间件，获取到react发布打包后生成的js和css文件，此时通过正确的url，就能在浏览器成功打开首页了。

index.jsp代码如下，appWapper是react前端首页id，其中删除了部分公司敏感的资源信息：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%@ page isELIgnored="false" %>
<!DOCTYPE html>

<html lang="en">
<head>
    <title>Beacon</title>
    <meta charset="UTF-8">
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <title>Demeter</title>

    <c:forEach var="css" items="${css_files}">
        <link rel="stylesheet" href="${css}">
    </c:forEach>

</head>
<body class="custom-theme">
<div id="appWrapper"></div>
<script>
    window.hostUrl='';
</script>

<c:forEach var="js" items="${js_files}">
    <script src="${js}"></script>
</c:forEach>

</body>
</html>