i'm new in react js, node js and express. I made a simple login form with username and password input form. In SignIn.js, i send username and password value to index.js ( node), but i can't get the value in index.js.

Here is the code :

SignIn.js

import Axios from 'axios';
import {
  DribbbleOutlined,
  TwitterOutlined,
  InstagramOutlined,
  GithubOutlined,
} from "@ant-design/icons";
function onChange(checked) {
  console.log(`switch to ${checked}`);
}
const { Title } = Typography;
const { Header, Footer, Content } = Layout;


export default class SignIn extends Component {
  constructor(props) {
    super(props)
    this.onChangeUsername = this.onChangeUsername.bind(this);
    this.onChangePassword = this.onChangePassword.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
    this.state = {
        name: '',
        email: ''
    }
}
onChangeUsername(e) {
    this.setState({ username: e.target.value })
}
onChangePassword(e) {
    this.setState({ password: e.target.value })
}
onSubmit(e) {
    e.preventDefault()

    
}

  render() {
    const onFinish = (values) => {
      
    const username = this.state.username;
    const password = this.state.password;

      Axios.post("http://localhost:3001/signin", {
        username : username,
        password : password,
      }).then((Response)=> {
        console.log(Response);
      });
    

      console.log("Success:", values);
    };

    const onFinishFailed = (errorInfo) => {
      console.log("Failed:", errorInfo);
    };
    return (
      <>
        <Layout className="layout-default layout-signin">
          <Header>
            <div className="header-col header-brand">
              <h5></h5>
            </div>
            <div className="header-col header-nav">
            <h5>TITLE HERE</h5>
            </div>
            <div className="header-col header-btn">
            </div>
          </Header>
          <Content className="signin">
            <Row gutter={[24, 0]} justify="space-around">
              <Col
                xs={{ span: 24, offset: 0 }}
                lg={{ span: 6, offset: 2 }}
                md={{ span: 12 }}
              >
                <Title className="mb-15">Sign In</Title>
                <Title className="font-regular text-muted" level={5}>
                  Enter your Username and password to sign in
                </Title>
                <Form
                  onFinish={onFinish}
                  onFinishFailed={onFinishFailed}
                  layout="vertical"
                  className="row-col"
                >
                  <Form.Item
                    className="username"
                    label="Username"
                    name="username"
                    id="username"
                    rules={[
                      {
                        required: true,
                        message: "Please input your Username!",
                      },
                    ]}
                    onChange={this.onChangeUsername}
                  >
                    <Input placeholder="Username" />
                  </Form.Item>

                  <Form.Item
                    className="username"
                    label="Password"
                    name="password"
                    id="password"
                    rules={[
                      {
                        required: true,
                        message: "Please input your password!",
                      },
                    ]}
                    onChange={this.onChangePassword}
                  >
                    <Input placeholder="Password" />
                  </Form.Item>

                  {/*<Form.Item
                    name="remember"
                    className="aligin-center"
                    valuePropName="checked"
                  >
                    <Switch defaultChecked onChange={onChange} />
                    Remember me
                  </Form.Item>*/}

                  <Form.Item>
                    <Button
                      type="primary"
                      htmlType="submit"
                      style={{ width: "100%" }}
                      
                    >
                      SIGN IN
                    </Button>
                  </Form.Item>
                  {/*<p className="font-semibold text-muted">
                    Don't have an account?{" "}
                    <Link to="/sign-up" className="text-dark font-bold">
                      Sign Up
                    </Link>
                  </p>*/}
                </Form>

Here is the code for index.js (node)

const { Result, message } = require('antd');
const express = require('express');
const app = express();
var cors = require('cors');

const mysql = require("mysql");

const db = mysql.createPool({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'wynadvm'
});

app.use(cors());

app.get('/', function (req, res) {
    res.send('hello');
  });

app.post('/signin', (req,res) => {
 
    const username = req.query.username;
    const password = req.query.password;
    db.query(
        "SELECT * from users where username = ? and password = ?",
        [username , password],
        (err,result) => {
            if(err) {
                res.send({err:err});
            }

            if(result.length > 0) {
                res.send('result.response');
                console.log(req.query.username);
               //return res.redirect('/UserHomePage');
               
            }
            else
            {
                res.send('{message : "Wrong Username/Password Combination"}');
                console.log(req.query.username);
                //return res.redirect('/dashboard');
                
            }
        }
    )
});

app.listen(3001,() => {
    console.log("running on port 3001");
});

my username and password const always show undefined in console log.

CodePudding user response：

You can use axios for making http requests to the backend.

You can learn more about axios from here: https://www.npmjs.com/package/axios

And below is an example of how you can submit login request using axios

axios.post('/signin', {
  username: 'Fred',
  password: 'Flintstone'
})
 .then(function (response) {
    console.log(response);
})
 .catch(function (error) {
    console.log(error);
});

CodePudding user response：

You are sending the data in body, but you are using query to get the username and password, that's why you are getting undefined, try using

const username = req.body.username;
const password = req.body.password;