简单的测试帖不工作,node.js

时间:2017-12-22 13:16:44

标签: node.js reactjs

我开始学习React和Node.js.我创建了一个非常简单的表单,并尝试以传统方式(同步,没有ajax)提交它用于学习目的。在src目录中,我有一个表单的目录,以及我提交表单的node.js文件的另一个目录(模型)。当我点击提交所有我得到的是“不能POST /model/controller.js”。我google了一下,什么都没发现。只是试图让基础知识失败。谢谢你的帮助。

'src / login / Login.js'中的表单

class Login extends React.Component {
render() {
    return (
        <form method="POST" action="/../model/controller.js" className="commonform" id="ajaxform" name="ajaxform">
        <h2>Please Sign In</h2>
        <Para class="usernotify" text= "test"/>
        <Input name="email" />
        <Input name="password" />
        <Button name="Sign In" id="ajaxSubmit"/>
        </form>
    );

}
}

我提交给'src / model / controller.js'的服务器页面

var http = require('http'); 
http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write('Hello');
    res.end();
  }).listen(8080); 

2 个答案:

答案 0 :(得分:0)

假设您的'src/model/controller.js正在运行一个http服务器并且正在/model/controller收听有关POSTS请求的信息,请执行此类表格,例如来自文档https://reactjs.org/docs/forms.html

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};

    this.handleSubmit = this.handleSubmit.bind(this);
  }


  handleSubmit(event) {
    // Post your data here using something like axios
    axios.post('http://localhost/model/controller', {
      ...your_data
    })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });


    //prevent form from being submitted automatically
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        ....
      </form>
    );
  }
}

答案 1 :(得分:0)

您好在控制器中的AppreciateCo已经添加了服务器但是缺少post方法,请添加类似的内容。

var express = require('express');
var app = express();
app.post('/api/users', function(req, res) {
  var user_id = req.body.id;
  var token = req.body.token;

  res.send(user_id + ' ' + token);
});

您还需要更改html表单中的操作,它不应该是像controller.js这样的js文件,它应该是控制器端点,在我的情况下是/ api / users。

我的建议是将您的节点js作为端口8080上的单独模块运行,然后将您的操作更改为http://localhost:8080/api/users

的POST请求