[英]POST form data to server using React.js and Express.js
我只是从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;
您的代码看起来不错。
实际上,我可以复制粘贴它,并且可以正常运行。
您确定:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.