从 React 连接到 Java 服务器答案

【问题标题】：Connect to Java Server from React从 React 连接到 Java 服务器
【发布时间】：2018-12-20 11:30:24
【问题描述】：

我正在使用 create-react-app 在 React 上开发 Web 应用程序的前端，并且我有一个嵌入式 Tomcat 服务器在另一台机器上运行，具有 ipaddress 和端口号。如何连接到该服务器？我正在使用create-react-app 的文件夹结构，那么我将在哪个文件夹中声明服务器地址？

服务器的 REST 端点被暴露并正在侦听特定的套接字。

【问题讨论】：

这取决于您要连接的服务器上运行的应用程序。它是一个 REST 应用程序吗？还是 SSH 服务器？
它是一个 REST 应用程序，一个嵌入式 tomcat 服务器。

标签： java reactjs create-react-app java-server

【解决方案1】：

您可以使用 REST 客户端库。例如： https://www.npmjs.com/package/react-rest-client

npm install --save react-rest-client

import React, { Component } from 'react'
import { Client, Endpoint, middleware } from 'react-rest-client'

export const onEnter = fn => event => { if(event.key === 'Enter') fn(event) }

class App extends Component {
  render = () => {
    return (
      <Client base='http://example.com'>
        <Endpoint
          path='todos'
          middleware={[middleware.handleJson()]}
          render={({ response, handlers }) => response ? (
          <div>
            <input type='text' onKeyPress={onEnter(event => {
              handlers.add({ text: event.target.value })
            })} />
            <ul>
              {response.data.map((todo, i) => (
                <li key={i}>
                  <input type='text' placeholder={todo.text} onKeyPress={onEnter(event => {
                    const handler = handlers.bind(todo.uuid)
                    handler.edit({ text: event.target.value })
                    event.target.value = ''
                  })} />
                  <input type='button' onClick={event => handlers.destroy(todo.uuid)}  value='Delete' />
                </li>
              ))}
            </ul>
          </div>
        ) : null} />
      </Client>
    )
  }
}

export default App

“我正在使用 create-react-app 的文件夹结构，那么我应该在哪里声明服务器地址？” - 这取决于应用程序。您可以对其进行硬编码或使其可配置。

【讨论】：

【解决方案2】：

正如您在问题中所说，您的服务器应用程序是一个 RESTFul Web 服务应用程序，因此查看控制器类并找出 Web 方法并找出每个 Web 服务调用的 url 端点。最好先阅读一下 RESTFul 服务，这将有助于您更好地理解它。

【讨论】：