Question

我在react中创建一个简单的登录页面，它应该通过对节点js文件的ajax调用连接到数据库。

这是我拥有的节点js代码：

var express=require('express');
var app=express();
var db=require('./db');
var bodyParser=require('body-parser');
var server=require('http').Server(app);
app.set('port',process.env.PORT||8080);

app.use(bodyParser.json());

app.set('views','views');
app.set('view engine','html');

app.use(express.static('./public'));

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

app.use(express.json());
app.use(express.urlencoded());

app.post('/newuser',function(req,res){
    console.log(req.body.username);
    console.log(req.body.password);
})

来自react文件的ajax调用看起来像这样：

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import {MusicApp} from './music-app.js';

class Signup extends React.Component{

    constructor(props){
        super(props);
        this.state={
            isLoggedin:false
        }

        this.changePage=this.changePage.bind(this);
    }
    changePage(){

        var username=document.getElementById('username').value;
        var password=document.getElementById('password').value;
        var that=this;
        $.ajax({
            type:'POST',
            url:'/newuser',
            data:{
                username:username,
                password:password
            },
            success:function(){
                that.setState({
                    isLoggedin:true
                })
            }
        })

    }
    render(){
        if(this.state.isLoggedin){
            return(
                <MusicApp/>
                )
        }else{
            return(
                <div>
                <input type='text' id='username' placeholder='username'/>
                <input type='password' id='password' placeholder='password'/>
                <input type='button' id='signup' value='Signup' onClick={this.changePage}/>
                </div>

                )
        }
    }
}

ReactDOM.render(<Signup />,document.getElementById('container'));

的index.html

 <!DOCTYPE html>
<html>
<head>
    <title>
        todo-app 
    </title>
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">   
</head>
<body>
    <div id="container"> </div>

    <script type="text/javascript" src="http://localhost:8080/build/vendors.bundle.js"></script>
    <script type="text/javascript" src="http://localhost:8080/build/musicApp.bundle.js"></script> 
</body>
</html>

因此，当我在端口号8080上运行整个代码时，它为我找到了404找不到的xhr请求。我拥有的文件夹结构是这样的： ajax调用是通过signup.js进行的。我已完成npm install --save express和npm install --save body-parser

我错过了什么？

Answer 1

你表示服务器没有监听任何端口，它设置了端口，它没有监听它。

试试这个

const express=require('express');
const bodyParser=require('body-parser');
const app = express();
const db = require('./db');

const PORT = process.env.PORT || 8080;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));


app.set('views', 'views');
app.set('view engine', 'html');

app.use(express.static('./public'));

app.post('/newuser', function(req, res) {
    console.log(req.body.username);
    console.log(req.body.password);
    res.send({postedUserName: req.body.username});
});

if (!module.parent) {
  app.listen(PORT, () => {
    console.log(`Your application starts listening at Port ${PORT}`);
  });
}

xhr请求404节点并对js作出反应

1 个答案: