index.js

Question

我分别在我的客户端和服务器端代码上工作。我现在设法让他们在同一个项目中同时工作，但我不知道如何让两个人一起工作。我在客户端使用javascript / node / react / 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数据库，并在网页上显示信息。

所以现在我有这两个可以同时运行的网页，但是如何从中创建1个页面呢？

我正在使用玉视图，因此我猜测我的服务器将不得不将这些玉视图与数据库数据一起提供。我应该忘记服务器端页面，只是把它作为服务对待客户端？

Answer 1

如果我正确理解了这个问题，您需要将Express应用程序编写为RESTful应用程序（让它返回JSON），然后使用React进行API调用，然后呈现响应。它还有很多，但它的工作方式或多或少。这是一个关于创建REST API https://www.codementor.io/olatundegaruba/nodejs-restful-apis-in-10-minutes-q0sgsfhbd

的简单教程

Answer 2

您可以将Express用于后端（Rest API）和React用于前端（您可以使用Axios，superagent等软件包访问API）

如何结合反应和表达

index.js

server.js

2 个答案: