
NodeJS + Express
Controller
src/controllers/CustomerController.js
const controller = {} // import model var Customers = require('../models/Customers'); controller.get = async (req,res) => { try { const { id } = req.params; const response = await Customers.findOne({ where: { id: id } }) .then(function(data){ const res = { success: true, data: data } return res; }) .catch(error => { const res = { success: false, message: error } return res; }) res.json(response); } catch (e) { const response = { succes: false, message: e.message } res.json(response) } } module.exports = controller;
Routes
src/routes/api.js
const express = require('express'); const router = express.Router(); //import controller const customerController = require('./../controllers/CustomerController'); router.get('/customer/get/:id', customerController.get); module.exports = router;
React
Form
src/views/js/components/customer/Edit.js
import React, { useEffect, useState } from 'react'; import customerService from "../../services/Customer" function Edit(props){ const [ id, setId ] = useState(null); const [ name, setName ] = useState(null); const [ email, setEmail ] = useState(null); const [ address, setAddress ] = useState(null); const [ phone, setPhone ] = useState(null); useEffect(()=>{ async function fetchDataCustomer(){ let id = props.match.params.id; const res = await customerService.get(id); if (res.success&&res.data) { const data = res.data console.log(data); setId(data.id) setName(data.name) setEmail(data.email) setAddress(data.address) setPhone(data.phone) } } fetchDataCustomer(); },[]); return ( <div> <h4>Edit customer {id}</h4> <hr/> <div class="row"> <div class="col-md-6 mb-3"> <label for="firstName">Name</label> <input type="text" class="form-control" placeholder="Name" value={name} onChange={(event)=>setName(event.target.value)} /> </div> </div> <div class="row"> <div class="col-md-6 mb-3"> <label for="email">Email</label> <input type="text" class="form-control" placeholder="Email" value={email} onChange={(event)=>setEmail(event.target.value)} /> </div> </div> <div class="row"> <div class="col-md-6 mb-3"> <label for="address">Address</label> <input type="text" class="form-control" placeholder="Address" value={address} onChange={(event)=>setAddress(event.target.value)} /> </div> </div> <div class="row"> <div class="col-md-6 mb-3"> <label for="address">Phone </label> <input type="text" class="form-control" placeholder="Phone" value={phone} onChange={(event)=>setPhone(event.target.value)} /> </div> </div> <div class="row"> <div class="col-md-6 mb-3"> <button class="btn btn-primary btn-block" type="submit">Save</button> </div> </div> </div> ) } export default Edit;
Services
src/views/js/services/Customer.js
const baseUrl = "http://localhost:3000/api/customer" import axios from "axios"; const customer = {}; customer.get = async (id) => { const urlGet = baseUrl+"/get/"+id const res = await axios.get(urlGet) .then(response=>{ return response.data }) .catch(error=>{ return error; }) return res; } export default customer