Question

我想在节点中为react应用程序创建restful api。在我的应用程序中，我使用webpack，babel和反应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

您可以运行两个服务器，一个用于客户端应用程序和api的webpack-dev-server。因此，假设您在端口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网址将仅为/users

例如

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

Answer 2

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

前端选项：使用react-router等前端库
后端选项：直接在您的框架中编写您的预期响应，例如，在express

Answer 3

从客户端代码，AJAX将用于进行RESTful API调用。有一个很好的库可以解决AGAX中的一些丑陋问题：

https://github.com/visionmedia/superagent

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

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

在节点中用于反应应用的宁静api

3 个答案: