как получить данные в nodejs, полученные от внешнего интерфейса в reactjs? - PullRequest
Новая
       75

как получить данные в nodejs, полученные от внешнего интерфейса в reactjs?

0 голосов
/ 03 августа 2020

Я начинаю в reactjs и nodejs, и я думаю, что я успешно отправляю данные из внешнего интерфейса в бэкэнд, но теперь я хочу получить и отобразить полученные данные из интерфейса в консоли , но я не знал, как это сделать, кто-нибудь поможет мне в этой ситуации? Потому что, когда я печатаю что-то в консоли, например console.log (data) , в этот раз он отображает некоторые журналы в консоли, но я хочу отображать полученные данные в консоли

demoLogin. js

// this is frontend in reactjs

    import React, { Component } from 'react'
    import axios from 'axios'
    
    class Login extends Component {
    constructor(props) {
      
      super(props)
      
      this.state = {
            username:'',   
            password:''
            
      }
    }
    
    usernameHandler=event=>{
      this.setState({
        username:event.target.value,
        
      })
    }
    passwordHandler=event=>{
      this.setState({
      password:event.target.value
      })
    }
    submitHandler=event=>{
      let data = {
        username: this.state.username,
        password: this.state.password,
        
    };
      event.preventDefault()
            console.log(this.state)
            axios.post('http://localhost:8080/note', data,{
          headers: {'Content-Type':'application/json'}
        })
                .then(res => {
                    console.log(res)
                })
    
        
    }
      render() {
        const {username, password}=this.state
            return (
            <div className="custom_wrapper">
                <div className="custom_form-wrapper">
                  <h1>SIGN IN INTO YOUR ACCOUNT</h1>
                  <form onSubmit={this.submitHandler} >
                    <div className="custom_username" >
                      <label htmlFor="username">User Name</label>
                      <input className='custom_input'
                        placeholder="example@email.com"
                        type="text"
                        name="username"
                        value={username}
                        onChange={this.usernameHandler}
                      /><br></br>
                      
                    
                      <label htmlFor="password">Password</label>
                      <input className='custom_input'
                        placeholder="password"
                        type="password"
                        name="password"
                        value={password}
                        onChange={this.passwordHandler}
                      />
                      <button type="submit" >Login</button>
                    </div>
                    
                    </form>
                    
                </div>
              </div>
            )
        }
    }
    export default Login

сервер. js

//this is backend in nodejs

    var restify=require('restify')
    const corsMiddleware = require('restify-cors-middleware2');
    const { data } = require('jquery');
    var server=restify.createServer() //server created
    
    server.use(
        function crossOrigin(req,res,next){
          res.header("Access-Control-Allow-Origin", "*");
          res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
          res.setHeader('Access-Control-Allow-Credentials', true); // If needed
          res.header("Access-Control-Allow-Origin", "*");
          res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
          res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
          return next();
        }
      );
    const cors = corsMiddleware({
      preflightMaxAge: 5, //Optional
      origins: ['*'],
      allowHeaders: ['*'],
      exposeHeaders: ['*']
    })
    
    server.pre(cors.preflight)
    server.use(cors.actual)
    server.use(restify.plugins.bodyParser());
    //get data from login form
    function userCreation(req, res, next) {
      console.log('data received...')
      console.log(res.json(data))
      return next();
    }
    
    server.post('/note', userCreation);  
    server.listen(8080, function(){
        console.log("server started...")
    })

1 Ответ

0 голосов
/ 04 августа 2020

Просто создайте aa GET запрос на этот URL, который вы POST ed. 

import axios from 'axios'

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      username: ''
    }

    this.handleClick = this.handleClick.bind(this)
  }

  handleClick () {
    axios.get('http://localhost:8080/note')
      .then(response => this.setState({username: response.data.name}))
  }

  render () {
    return (
      <div className='show_my__username'>
        <button className='button' onClick={this.handleClick}>Click Me</button>
        <p>{this.state.username}</p>
      </div>
    )
  }
}
...