
Node.js (Backend)
Route
nodebackend/src/routes/EmployeeRoute.js
router.post('/create',EmployeeController.create);
Controller
nodebackend/src/controllers/EmployeeController.js
controllers.create = async (req,res) => {
// data
const { name, email, address, phone, role } = req.body;
// create
const data = await Employee.create({
name: name,
email: email,
address: address,
phone: phone,
roleId: role
})
.then(function(data){
return data;
})
.catch(error =>{
console.log("Errorazo "+error)
return error;
})
// return res
res.status(200).json({
success: true,
message:"Guardo exitosamente",
data: data
});
}
React.js ( Frontend )
appnode/src/module/form.js
State
constructor(props){
super(props);
this.state = {
campName: "",
campEmail:"",
campPhone:"",
campAddress:"",
selectRole:0
}
}
Render
render(){
return (
<div>
<div class="form-row justify-content-center">
<div class="form-group col-md-6">
<label for="inputPassword4">Name </label>
<input type="text" class="form-control" placeholder="Name" value={this.state.campName} onChange={(value)=> this.setState({campName:value.target.value})}/>
</div>
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" placeholder="Email" value={this.state.campEmail} onChange={(value)=> this.setState({campEmail:value.target.value})}/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputState">Role</label>
<select id="inputState" class="form-control" onChange={(value)=> this.setState({selectRole:value.target.value})}>
<option selected>Choose...</option>
<option value="1">Admin...</option>
<option value="2">Project Manager</option>
<option value="3">Programer</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="inputEmail4">Phone</label>
<input type="number" class="form-control" placeholder="Phone" value={this.state.campPhone} onChange={(value)=> this.setState({campPhone:value.target.value})}/>
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St" value={this.state.campAddress} onChange={(value)=> this.setState({campAddress:value.target.value})}/>
</div>
<button type="submit" class="btn btn-primary" onClick={()=>this.sendSave()}>Save</button>
</div>
);
}
Event
Evento para enviar y guardar datos a la base de datos en el servidor Node.js
sendSave(){
if (this.state.selectRole==0) {
alert("Seleccione el tipo de Role")
}
else if (this.state.campPhone=="") {
alert("Digite el campo de telefono")
}
else if (this.state.campName=="") {
alert("Digite el campo de Nombre")
}
else if (this.state.campEmail=="") {
alert("Digite el campo de email")
}
else if (this.state.campAddress=="") {
alert("Digite el campo de Direccion")
}
else {
const baseUrl = "http://localhost:3000/employee/create"
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(response.data.message)
}
}).catch(error=>{
alert("Error 34 "+error)
})
}
}

Excelente turorial me ha servido mucho, haber si nos ayudas con el editar y el modificar
Bueno, el fin de semana la hago. Disculpe la demora.