React与后端交互的一种方式

最新推荐文章于 2024-04-27 20:07:47 发布

wuqingdeqing

最新推荐文章于 2024-04-27 20:07:47 发布

阅读量7.2k

点赞数

分类专栏：工作项目笔记文章标签： React Spring 前后端交互

本文链接：https://blog.csdn.net/wuqingdeqing/article/details/88781244

版权

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

19 篇文章 1 订阅

订阅专栏

上周工作中需要将一个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>

wuqingdeqing

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
React与后端交互的一种方式

上周工作中需要将一个react前端项目与spring的后端项目进行联调，但之前从未单独做过这种前后端分离的系统，虽然对react用法进行了基本学习，但开始始终没搞明白这种形式的系统前后端是如何交互的。后查看了公司其他系统的代码，发现一种可行的交互形式，特写此文以记之。前端向后端发请求，则和其他场景下的前后端交互一样，使用ajax或相应方式向对应的url发送请求即可。而后端向前端的res...
复制链接

扫一扫