Rest API CRUD – Node.js + express + React.js + MySQL Part 6: Update

Node.js (Backend)

Route

nodebackend/src/routes/EmployeeRoute.js

router.post('/update/:id', EmployeeController.update);

Controller

nodebackend/src/controllers/EmployeeController.js

controllers.update = async (req,res) => {
  // parameter get id
  const { id } = req.params;
  // parameter POST
  const {name, email, address, phone, role } = req.body;
  // Update data
  const data = await Employee.update({
    name:name,
    email:email,
    address:address,
    phone:phone,
    roleId:role
  },
  {
    where: { id: id}
  })
  .then( function(data){
    return data;
  })
  .catch(error => {
    return error;
  }) 
  res.json({success:true, data:data, message:"Updated successful"});
}

React.js ( Frontend )

appnode/src/module/edit.js

<button type="submit" class="btn btn-primary" onClick={()=>this.sendUpdate()}>Update</button>

Funcion de un boton update para enviar datos a actualizar

sendUpdate(){
    //  get parameter id
    let userId = this.props.match.params.id;
    // url de backend
    const baseUrl = "http://localhost:3000/employee/update/"+userId
    // parametros de datos post
    const datapost = {
      name : this.state.campName,
      email : this.state.campEmail,
      phone : this.state.campPhone,
      address : this.state.campAddress,
      role  : this.state.selectRole
    }

    axios.post(baseUrl,datapost)
    .then(response=>{
      if (response.data.success===true) {
        alert(response.data.message)
      }
      else {
        alert("Error")
      }
    }).catch(error=>{
      alert("Error 34 "+error)
    })

   }
Etiquetas:,
Un comentario

Añadir un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *