Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/415.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 将express连接到React网页包项目_Javascript_Node.js_Reactjs_Express_Webpack - Fatal编程技术网

Javascript 将express连接到React网页包项目

Javascript 将express连接到React网页包项目,javascript,node.js,reactjs,express,webpack,Javascript,Node.js,Reactjs,Express,Webpack,我正试图将express添加到我的React项目中,以便开始连接到数据库以存储表单信息。我对如何设置这个很迷茫。目前我正在使用webpack并创建一个dev服务器来呈现我的React视图。我的堆栈看起来像 网页包-反应-巴别塔-萨斯 React Router目前正在处理所有指向我页面的导航链接,我的本地主机上的导航链接运行方式与我希望的差不多。因此,现在我必须找到一种处理联系人表单数据的方法,并将其放入我为项目创建的mongoDB中。在过去,我制作了一个应用程序,使用带有把手和猫鼬的expres

我正试图将express添加到我的React项目中,以便开始连接到数据库以存储表单信息。我对如何设置这个很迷茫。目前我正在使用webpack并创建一个dev服务器来呈现我的React视图。我的堆栈看起来像

网页包-反应-巴别塔-萨斯

React Router目前正在处理所有指向我页面的导航链接,我的本地主机上的导航链接运行方式与我希望的差不多。因此,现在我必须找到一种处理联系人表单数据的方法,并将其放入我为项目创建的mongoDB中。在过去,我制作了一个应用程序,使用带有把手和猫鼬的express连接到mongoDB,所以我想让我们将express添加到项目中!我只是不知道如何将服务器连接到我的react应用程序中,以及它将如何与webpack dev服务器冲突等等

我安装了express react router views express mongoose—基本上是我认为需要启动并运行服务器的任何东西

有人知道如何将我的React项目(路由)链接到express服务器吗

我的webpack布局将所有JSX放入一个公共文件夹中的包中,其中包含一个新的index.html和bundle.js。其他所有东西(组件、路由器、sass)都位于我的应用程序文件夹中。到目前为止,我在我的应用程序文件夹中创建了一个服务器文件夹(是否应该在外部?),并创建了一个server.js文件。现在我完全不知道如何把这一切联系起来

server.js文件

import express from 'express';
import { Router, Route, Redirect, IndexRoute, Link, hashHistory } from 'react-router'; 
import ExpressReactRouter from 'express-react-router-views';
import routes from '../utils/Routes.js';


var express = require('express');

var app = express();
// Set the engine as .jsx or .js
app.engine('.jsx', ExpressReactRouter.engine({
  routes: routes
}));

// Set the view engine as jsx or js
app.set('view engine', 'jsx');

// Set the custom view
app.set('view', ExpressReactRouter.view);

app.get('/public/', function(req, res) {
  // You can replace req.url with the view path that you've set on the routes file
  res.render(req.routes);
});
webpack.config.js文件

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');


var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    './app/App.js'
  ],
  output: {
    path: __dirname + '/public',
    filename: "bundle.js"
  },
  plugins: [HTMLWebpackPluginConfig],
  devServer: {
       inline:true,
       contentBase: './public',
       port: 3333
     },
  module: {
    loaders: [{ 
         test: /\.js$/, 
         exclude: /node_modules/, 
         loader: "babel-loader"
      },
        {
              test: /\.scss$/,
              loader: 'style!css!sass'
            }]
  }
};

您可以使用“react router”中的匹配功能,它可以帮助您在服务器端使用react路由。请看一看这个项目,我认为它很清楚如何使用它


您可以使用“react router”中的匹配功能,它可以帮助您在服务器端使用react路由。请看一看这个项目,我认为它很清楚如何使用它


似乎使用express w/webpack,我的网站最终会有两个本地主机服务器-这让我很困惑似乎使用express w/webpack,我的网站最终会有两个本地主机服务器-这让我很困惑