用于反应应用程序的节点中的 Restful api答案

【问题标题】：Restful api in node for react application用于反应应用程序的节点中的 Restful api
【发布时间】：2016-08-19 09:21:16
【问题描述】：

我想在 node 中为 react 应用程序创建 restful api。在我的应用程序中，我使用 webpack、babel 和 react js。所以 package.json 的入口点是 index.js（即 webpack 的输出）。所以我无法理解如何使用 node.js 在同一个项目中创建一个 restful api。代码在这里。

webpack.config.js

var config = {
   entry: './main.js',

   output: {
      path:'./',
      filename: 'index.js',
   },

   devServer: {
      inline: true,
      port: 8080
   },

   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',

            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}

module.exports = config;

package.json

{
  "name": "reactmmpl",
  "version": "1.0.0",
  "description": "mmpl implementation with react js",
  "main": "index.js",
  "scripts": {
    "test": "testmmpl",
    "start": "webpack-dev-server --hot"
  },
  "keywords": [
    "mmpl",
    "meritain",
    "mobile"
  ],
  "author": "suyesh",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "express": "^4.14.0",
    "react": "^15.3.0",
    "react-dom": "^15.3.0",
    "react-router": "^2.6.1",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
}

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
import Login from "./lib/Login.jsx";


ReactDOM.render((
   <Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {Login} />
      </Route>
   </Router>

), document.getElementById('app'));

App.jsx

import React from 'react';
import Header from "./lib/Header.jsx";




class App extends React.Component {
   render() {
      return (
         <div>
            <div className="main-container" id="loginPage">
                <Header/>
                {this.props.children}
            </div>
         </div>
      );
   }
}



export default App;

index.html

<!DOCTYPE html>
<html lang = "en">

   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
      <link rel="stylesheet" type="text/css" href="/public/css/headerFooter.css" />
      <link rel="stylesheet" type="text/css" href="/public/css/content.css" />
   </head>

   <body>
      <div id = "app"></div>
      <script src = "index.js"></script>
   </body>

</html>

【问题讨论】：

为什么要在前端项目中运行后端代码？我意识到这可能更方便，但对我来说这很混乱。将其吐出到单独的 repo 和项目中

标签： javascript node.js reactjs webpack webpack-dev-server

【解决方案1】：

您可以运行两台服务器，一台使用 webpack-dev-server 用于客户端应用程序和用于 api。因此，假设您的快速服务器位于端口 3000 上，客户端应用服务器位于 9000 上，您需要做的就是代理这样的请求。

import webpack from 'webpack';
import WebpackDevServer from 'webpack-dev-server';
import config from '../webpack.config.dev.js';

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  contentBase: 'public/',
  hot: true,
  inline: true,
  quiet: false,
  historyApiFallback: true,
  proxy: {
    '*' : 'http://localhost:3000'
  }
}).listen(9000, 'localhost', (err, result) => {
  if (err) {
    return console.log(err);
  }
  console.log('Listening at http://localhost:9000/');
});

这是我的一个项目的示例，这是用于开发构建的“中间件”文件。使用此设置，如果您的 api 路由看起来像这样 http://localhost:3000/api/users，那么您获取用户的 ajax url 将只是 /users

例如。

fetch('/api/users', optionsObject);

【讨论】：

【解决方案2】：

您有 2 个选项来实现 RESTful API：

前端选项：使用像react-router这样的前端库
后端选项：直接在你的框架中写下你期望的响应，例如express

【讨论】：

【解决方案3】：

从客户端代码，AJAX 将用于进行 RESTful API 调用。有一个不错的库可以消除 AGAX 的一些丑陋之处：

https://github.com/visionmedia/superagent

即使共享大量相同的代码，您也可能会为服务器端和客户端分别设置入口点。 Express 框架将在您的服务器端代码中设置。下面的样板文件就是一个很好的设置示例：

这是一个展示客户端服务器交互的好例子： https://github.com/erikras/react-redux-universal-hot-example

【讨论】：

感谢您的回答。我可以调用restful api，但是如果你看到我的package.json react 在一个端口上运行并且为了创建restful api，我该如何配置表达这是我的疑问。