如何将 Reagent 添加到 Node JS API
How to add Reagent to Node JS API
我有一个简单的 Node JS 应用程序,可以为 API 提供服务。我可以 node main.js
获取服务器 运行ning 并调用 localhost:3000/api/names
成功获取名称列表。我想在此基础上使用 Reagent/Cljs。
我可以在 localhost:3030
上 运行 获得 Reagent 应用程序。我的问题是,如何从 Reagent 应用程序 API 调用 Node 应用程序?还是我的架构全错了?我应该结合这两个应用程序吗?如果是,如何结合?
我试过组合它们,但 Reagent 想要 运行 在 Ring 上,而 Node 应用程序想要 运行 在节点服务器上。所以我仍然没有在两者之间进行交流。我试过 the Quick Start guide, but this isn't quite same situation. I've also given this approach 一次都无济于事。将这些部分放在一起以便我可以将 API 响应数据从 Node 应用程序带到 Reagent 应用程序的最简单方法是什么?或者有没有办法在我缺少的 Reagent 应用程序中调用 API 调用?
是的,您需要在浏览器中的代码运行和服务器上的代码运行之间进行通信。
基本方法是使用XHR。客户应该做这样的事情:
(ns foo
(:require [goog.net.XhrIo :as xhr]))
(xhr/send "/api/names"
(fn [e]
(prn (.. e -target getResponseText))))
或者还有一个使用非常广泛的库cljs-http
(ns foo
(:require
[cljs.core.async :refer [<!]]
[cljs-http.client :as http])
(:require-macros
[cljs.core.async.macros :refer [go]]))
(go (let [response (<! (http/get "data.edn"))]
(prn (:status response))
(prn (:body response))))
它使用 core.async 将结果 return 通过频道发送给您。不过你真的不需要关心它来使用它,除了要注意 go
块中的事情将会发生 'later'.
对于高级用法,您可以使用 sente
创建 websockets
网页的一个重要考虑因素是它们只能在为该页面提供服务的同一端口上对同一主机执行 XHR。因此,如果您在 localhost:3030 托管您的 API,则该页面必须从 localhost:3030 提供,以便您能够与其通信。 (这称为同源策略)。
您在问题中声明您的 API 在端口 3000 上,而 Reagent 应用程序从 3030 提供服务。由于同源策略,这将不起作用。有一个称为 CORS Cross Origin Resource Sharing 的标准,从技术上讲你可以使用它,但实际上不要这样做。而是从与 API.
相同的服务器提供 HTML/Javascript
这对您来说意味着您需要确保在构建 Reagent 应用程序时,包含最终 JavaScript 的 HTML 页面需要由同一台服务器提供服务服务于您的 API。通常这是将 HTML 和 JavaScript 放入服务器上的资源文件夹中的问题。
我有一个简单的 Node JS 应用程序,可以为 API 提供服务。我可以 node main.js
获取服务器 运行ning 并调用 localhost:3000/api/names
成功获取名称列表。我想在此基础上使用 Reagent/Cljs。
我可以在 localhost:3030
上 运行 获得 Reagent 应用程序。我的问题是,如何从 Reagent 应用程序 API 调用 Node 应用程序?还是我的架构全错了?我应该结合这两个应用程序吗?如果是,如何结合?
我试过组合它们,但 Reagent 想要 运行 在 Ring 上,而 Node 应用程序想要 运行 在节点服务器上。所以我仍然没有在两者之间进行交流。我试过 the Quick Start guide, but this isn't quite same situation. I've also given this approach 一次都无济于事。将这些部分放在一起以便我可以将 API 响应数据从 Node 应用程序带到 Reagent 应用程序的最简单方法是什么?或者有没有办法在我缺少的 Reagent 应用程序中调用 API 调用?
是的,您需要在浏览器中的代码运行和服务器上的代码运行之间进行通信。
基本方法是使用XHR。客户应该做这样的事情:
(ns foo
(:require [goog.net.XhrIo :as xhr]))
(xhr/send "/api/names"
(fn [e]
(prn (.. e -target getResponseText))))
或者还有一个使用非常广泛的库cljs-http
(ns foo
(:require
[cljs.core.async :refer [<!]]
[cljs-http.client :as http])
(:require-macros
[cljs.core.async.macros :refer [go]]))
(go (let [response (<! (http/get "data.edn"))]
(prn (:status response))
(prn (:body response))))
它使用 core.async 将结果 return 通过频道发送给您。不过你真的不需要关心它来使用它,除了要注意 go
块中的事情将会发生 'later'.
对于高级用法,您可以使用 sente
创建 websockets网页的一个重要考虑因素是它们只能在为该页面提供服务的同一端口上对同一主机执行 XHR。因此,如果您在 localhost:3030 托管您的 API,则该页面必须从 localhost:3030 提供,以便您能够与其通信。 (这称为同源策略)。
您在问题中声明您的 API 在端口 3000 上,而 Reagent 应用程序从 3030 提供服务。由于同源策略,这将不起作用。有一个称为 CORS Cross Origin Resource Sharing 的标准,从技术上讲你可以使用它,但实际上不要这样做。而是从与 API.
相同的服务器提供 HTML/Javascript这对您来说意味着您需要确保在构建 Reagent 应用程序时,包含最终 JavaScript 的 HTML 页面需要由同一台服务器提供服务服务于您的 API。通常这是将 HTML 和 JavaScript 放入服务器上的资源文件夹中的问题。