时间戳

首页 > 解决方案 > 如何结合反应和表达

javascript - 如何结合反应和表达

问题描述

我分别处理我的客户端和服务器端代码。我现在设法让他们在同一个项目中同时工作，但我不知道如何让两者一起工作。我在客户端使用 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 上加载一个反应页面，我可以在其中将内容添加到列表中。

服务器.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 个页面？

我正在使用玉视图，所以我猜测我的服务器将不得不提供这些玉视图以及数据库数据。我应该忘记服务器端页面并将其视为对客户端的服务吗？

标签： javascriptreactjsexpresspug

解决方案

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

推荐阅读