Соединение фронтэнда и бэкенда MERN

Question

Как реагирующий клиент подключается к серверу через экспресс? Во многих уроках рассказывается о Superagent и axios, что добавляет мне путаницы. Есть ли какие-либо ресурсы на маршрутизации на стороне сервера в контексте реакции? благодарю вас

Answer 1

В стеке MERN необязательно думать о всем стеке как об одном объекте. Сервер Mongo, ReactJS и NodeJS могут работать независимо друг от друга. И давайте для простоты понимания, скажем, все они находятся на отдельных серверах. То есть мы можем иметь Mongo на одном сервере, ReactJS на другом сервере и NodeJS с экспрессом на третьем сервере, тогда это также будет приложение стека MERN.

Как работает приложение MERN следующим образом

Например, у нас есть приложение, которое отображает сведения обо всех учениках в классе. Сначала в приложении React скажем, что вы выбрали класс, а затем интерфейс React отправит запрос на сервер nodejs. Запрос будет содержать конкретное имя класса. Теперь nodejs отправит запрос в базу данных mongo с просьбой предоставить подробную информацию об учениках этого класса, которую он отправит обратно на сервер узла. Затем сервер узла отправит подробности внешнему интерфейсу и обновит его.

Если вы запрашиваете соединение как таковое, соединения вообще не может быть, кроме запроса данных. Вместо того, чтобы использовать передний конец реагировать, вы можете использовать другой интерфейс, и он даст вам те же детали. React, Mongo и Node способны работать самостоятельно в своих областях.

Axios - это основанный на обещаниях HTTP-клиент для браузера и node.js.

Answer 2

Все элементы стека могут использоваться независимо: React, Node.Js и MongoDB. Они могут быть установлены на разных серверах, а связь осуществляется с помощью Fetch, Axios или любого другого инструмента.

Answer 3

Они полностью независимы. Используете ли вы axios, нативную выборку Javascript, jQuery AJAX и т. Д.... каждый из них запускается в браузере и делает запрос GET/POST к nodejs. Вы будете определять соответствующие маршруты GET/POST в nodejs, чтобы отвечать на эти запросы и возвращать данные ответов JSON для их использования.

Я бы начал с того, что забыл про реакцию вообще. Вместо этого создайте экспресс-API с различными маршрутами GET/POST, которые возвращают ответы JSON. Тест с простым клиентом, как почтальон. Как только у вас есть управление этим, начните с интерфейсной среды Javascript для использования этих сервисов.

Answer 4

Вот разрез моего экспресс + реагировать API:

var express = require('express');
var router = express.Router();

router.get('/', function (req, res) {
    res.render('index', {myjson: "myValue"});
})

module.exports = router;

По сути, я отправляю строку json в index.jsx, где отображается внешний интерфейс.

Также я поставил в экспресс как:

app.set('views', __dirname + '/views');
app.set('view engine', 'jsx');
app.engine('jsx', reactViews.createEngine());

Таким образом, экспресс-сервер знает, где находится React.

Оформить заказ на экспресс-реакцию двигателя.