как совмещать реагировать и выражать - PullRequest
Новая
       11

как совмещать реагировать и выражать

0 голосов
/ 30 мая 2018

Я работал над кодом клиента и сервера отдельно.Теперь мне удалось заставить их работать одновременно в одном и том же проекте, но я не знаю, как сделать две работы вместе.Я использую javascript / node / реагировать / redux / webpack на стороне клиента и node / express / jade на стороне сервера.

index.js 

import React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import { BrowserRouter as Router, Route } from 'react-router-dom';

import store from "./store/index";
import App from "./components/App";
import Home from './components/_HomePage';
import User from './components/_AboutPage';

render(
  <Provider store={store}>
    <App/>
  </Provider>,
  document.getElementById("app")
);

это загружает страницу реакциина порту 3000, где я могу добавить материал в список.

server.js 

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var index = require('./server/routes/index');
var users = require('./server/routes/users');
var catalog = require('./server/routes/catalog');

var db = require('./db/db');

var app = express();


// view engine setup
app.set('views', path.join(__dirname, 'server/views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
//app.use(express.json());
//app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'server/public')));

app.use('/', index);
app.use('/users', users);
app.use('/catalog', catalog);

// Connect to MySQL on start
db.connect(db.MODE_PRODUCTION, function(err) {
  if (err) {
    console.log('Unable to connect to MySQL.')
    process.exit(1)
  } else {
    app.listen(3001, function() {
      console.log('Listening on port 3001...')
    })
  }
})

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

этот файл загружает сервер на порт 3001, который также можно открыть как веб-страницу.Он соединяет мою серверную часть с базой данных MySQL и представляет информацию на веб-странице.

Итак, теперь у меня есть эти 2 веб-страницы, которые могут работать одновременно, но как мне создать 1 страницу из этого?

Я использую нефритовые представления, поэтому я предполагаю, что мой сервер должен будет предоставить эти нефритовые представления вместе с данными базы данных.И я должен забыть о боковой странице сервера и просто относиться к ней как к услуге на стороне клиента?

Ответы [ 2 ]

0 голосов
/ 30 мая 2018

Вы можете использовать Express для бэкэнда (Rest API) и React для внешнего интерфейса (вы можете получить доступ к API с помощью пакета, такого как Axios, superagent и т. Д.)

0 голосов
/ 30 мая 2018

Если я правильно понял вопрос, вам нужно написать приложение Express как приложение RESTful (заставить его возвращать JSON), затем выполнить вызовы API с помощью React, а затем обработать ответ.В этом есть что-то еще, но это более или менее работает.Вот простое руководство по созданию REST API https://www.codementor.io/olatundegaruba/nodejs-restful-apis-in-10-minutes-q0sgsfhbd

...