使用React.js和Express.js將表單數據發布到服務器

Question

---

介紹

我只是從MERN Stack開始，目前正在嘗試將數據從RegisterModal.js中的表單發布到server.js

index.html文件從呈現App.js的index.js獲取其內容，並根據單擊的按鈕呈現不同的組件。 （這是我的理解）

其中之一是RegisterModal.js，我嘗試將數據從此表單發布到server.js

這兩個文件的代碼都位於下面，我的項目結構如下。 （其余代碼位於github http://github.com/yenvanio/testapp上 ）

---

錯誤

我收到的錯誤是“無法發布到/ register”，並且控制台顯示找不到錯誤。

---

項目結構

 - .idea
 - build
 - node_modules
 - public
   -  index.html
   -  server.js
 - src
   - components
      - AdminLoginModal.js
      - PopUp.js
      - RegisterModal.js
      - UserLoginModal.js
   - App.js
   - index.js
 - package.json

---

碼

server.js

var express = require('express');
var cors = require('cors');
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var app = express();

var schema = new Schema({
    user: [
        {
            username: String,
            password: String,
            email: String,
        }
    ]

}, {
    collection: 'users'
});

var Model = mongoose.model('Model', schema);
mongoose.connect('mongodb://localhost:27017/dbName');

app.use(bodyParser.urlencoded({
    extended:true
}));

app.use(bodyParser.json());

app.post("/register", function(request, response){
   var username = request.body.username;
   var password = request.body.password;
   var email = request.body.email;
   console.log("Post Received: %s %s %s", username, password, email);
});

var port = process.env.API_PORT || 3000;
// app.use('/api', router);
app.listen(port, function(){
    console.log("Running on port 3000")
})

RegisterModal.js

import React, { Component } from 'react';

class RegisterModal extends Component
{
    render() {
        return(
            <div>
                <form method="post" action="/register">
                    Email Address:<br/>
                    <input type="text" name="email"/><br/>
                    Username:<br/>
                    <input type="text" name="username"/><br/>
                    Password:<br/>
                    <input type="password" name="password"/><br/>
                    <input type="submit" value="Register"/>
                </form>
             </div>
        );
    }
}

export default RegisterModal;

Answer 1

您的代碼看起來不錯。

實際上，我可以復制粘貼它，並且可以正常運行。

您確定：

• 您已經重新啟動了節點進程（以包括對server.js所做的更改）？
• 節點進程在與加載HTML頁面相同的域/端口上進行偵聽？