Restful api 在用于 React 应用程序的节点中

Question

我想在节点中为 React 应用程序创建 restful api。在我的应用程序中，我使用了 webpack、babel 和 react js。所以 package.json 的入口点是 index.js（即 webpack 的输出）。所以我无法理解如何使用节点在同一项目中创建 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>

Answer 1

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

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

Answer 2

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

https://github.com/visionmedia/superagent

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

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

Answer 3

您可以运行两台服务器，一台带有 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/');
});

所以这是我的一个项目的示例，这是用于开发构建的 'middleware' 文件。使用此设置，如果您的 api 路线看起来像这样 http://localhost:3000/api/users 您的 ajax url 获得用户将只是 /users

例如

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

Restful api 在用于 React 应用程序的节点中

Restful api in node for react application

javascript

node.js

reactjs

webpack

webpack-dev-server